기술 관련 질문
- 프론트엔드 개발에서 자주 사용되는 디자인 패턴같은게 있는지 궁금합니다.
답변
디자인 패턴이라는게 Java나 C++ 같이 정적인 형태의 언어에서는 많이 사용되지만 자바스크립트같은 경우에는 사실 디자인 패턴이 정형화 되어있다기보다는 유행을 타는 면이 있긴 합니다. 그래도 자주 사용되는 디자인 패턴 같은건 오픈소스를 참고하거나 Learning JavaScript Design Patterns 과 같은 도서를 읽어보는 것도 좋습니다. (책이 11년전 책이어서 지금은 안쓰는 패턴도 있을 수 있습니다.) 디자인 패턴이라는게 유행을 타긴 하지만 잘 알고있으면 좋긴 합니다. Observer, Visitor 패턴 등등..
혹은 위키피디아의 Design Pattern 항목을 읽어보는 것도 좋습니다. 그런데 초보자들이 디재인 패턴부터 공부해서 바로 코드에 적용해보려고 생각하는 것은 너무 어렵고 비효율적일 수 있습니다. 코드를 작성하다가 자연스럽게 필요성에 대해서 느끼고 디자인 패턴을 적용해보면서 학습하는 것이 좋습니다. 패턴이라는 것이 상황에 따라서 굉장히 다양하기 때문에 자주 사용되는 패턴이 있다라고 딱 말씀드리기보다는 여러 가지를 찾아보는 것이 좋겠습니다.
- MVC 패턴이라는 것이 데이터와, 데이터 처리 로직과, 화면에 보여주는 로직을 분리해서 개발하는 패턴이라고 이해했는데, 프론트엔드에서도 이러한 패턴이 적용하는 것이 가능한가요? 또한 유용한 패턴인가요?
답변
조금 역사적인 이야기를 하게 되는데, 옛날에 MVC 패턴이 한창 유행하던 때에 자주 사용되던 라이브러리 중에서 underscore.js 가 있습니다. 당시에 스택오버플로우 등에서 underscore.js 에도 MVC를 도입해야한다는 등 갑론을박이 있었는데 현재에는 MVC가 사실 그렇게까지 중요하다고 생각하지는 않습니다. 지금은 보통 리액트같은 라이브러리를 사용해서 개발하게 되는데 이게 만들다보면 MVC이다 아니다 하는 패턴을 명확하게 나누기가 어려운 경우가 많습니다. 예를 들어 리액트 컴포넌트같은경우 데이터에 대한 부분도 있고, 보여줘야 하는 부분도 있고 등등 섞여있기 때문입니다. 그래서 디자인 패턴에 대한걸 알고 있는건 좋지만 절대적이지는 않기 때문에 무조건 패턴을 먼저 생각하고 코딩한다기 보다는 자연스럽게 코딩을 하다가 필요에 의해서 리팩토링같은 과정에서 어느 패턴이 적합하더라 싶으면 적용하면 좋습니다.
- 현업에서 시맨틱 태그를 적절하게 적용하는 것을 중요하게 생각하는 편인가요? 또, 제가 section 내부의 영역을 한번 더 나누고 싶었을 때 내부에 section 을 또 작성했었는데 중첩된 section의 갯수에 따라서 h1 태그의 사이즈가 작아졌던 문제점이 있었습니다. 제가 시맨틱 태그를 잘못 이해하고 적용한 것인지, 아니면 section 내부의 h1 태그에 대한 기본 스타일을 리셋하고 진행하는 편이 많은건지 궁금합니다.
답변
시맨틱하게 태그를 짜서 우리가 무엇인가? 를 생각해보면 좋습니다. 예를들어 장애인, 로봇 등의 특수한 상황에서는 웹 접근성을 위해서 시맨틱 태그를 적용하면 무조건 좋기는 한데, 그런 상황이 아니라면 시맨틱 태그를 사용한다고 엄청나게 차이가 난다거나 하는건 아닙니다. 다만, 접근성 측면에서 미리 시맨틱하게 잘 구성해놓으면 이후에 좋기때문에 시맨틱한 태그로 잘 작성해두는걸 권장하는 편입니다. 그런데 지금까지 개발해봤을 때 반드시 시맨틱하게 짜야만 한다는 고정관념이 있다거나 하는건 아닙니다. 물론 사람마다 다르기도 하고 태그를 적절하게 잘 사용한다면 구글의 인덱싱에 잘 나온다거나 SEO에 좋아지는 장점이 있습니다. 시맨틱에 관한 내용은 MDN 문서에 방대하게 잘 정리가 되어있어서 참고해보면 좋습니다. (WEB/Accessibility MDN)
스타일링같은 경우에는 user-agent style 이라고 하는 브라우저의 기본 스타일을 잘 따라야한다고 주장하는 사람들도 있긴 한데, tailwind같은 라이브러리에서는 기본 스타일을 초기화하고 진행하는 경우도 많습니다. 실제 프로젝트에서도 결국에는 제한된 시간 안에 눈에 보이는 결과물을 좋게 만드는 것이 중요하기 때문에 스타일을 리셋하고 진행하는 경우도 많습니다.
- 평소에 개발하면서 어떤 카테고리에 대해서 반복적인 하위 아이템을 보여줘야 할 때 ul li 태그를 사용하려는 편 이었습니다. 이번에 노션 클로닝 과제를 하면서도 현재 문서 화면의 하단에 하위 문서들의 링크를 나타내는 목록을 구현했었는데 ul li a 태그의 형태로 구성할지, div a 태그의 형태로 구성할지가 고민됐었습니다. 태그의 의미를 적절하게 적용한다는 측면에서는 전자가 좋아보였고, 효율성이나 노드의 깊이 측면에서는 후자가 좋아보였는데 이런 경우에는 어떻게 구현하는 편이 좋은지 궁금합니다.
답변
이런 경우에는 ul li a 태그로 구성하는 편이 좋아보입니다. 태그만 보았을 때 작성한 사람이 어떤 의도로 작성했는지를 파악하기도 쉽고 크롤러나 검색엔진도 잘 인식하기도 하고 전자와 같은 형식으로 작성한다고 해서 후자의 형태에 비해서 효율성이 차이날 정도로 엄청 좋아지는 것도 아니기 때문입니다. 만약 후자와 같은 형태로 작성해야만 하거나 작성하고 싶은 경우에는 html 요소의 애트리뷰트로 줄 수 있는 role 속성을 참고하면 좋습니다. 해당 태그가 어떤 용도로 사용된다는 것을 명시적으로 부여할 수 있습니다.
면접 관련 질문
- 기술 면접에서 코드를 보여주고 “실행 결과를 예측해서 말해보세요” 라는 질문이 실제로 많이 등장하나요? 예를 들어서 아래와 같은 경우입니다!
답변
사실 이런 질문을 하는 기업도 있기는 하겠지만 좋은 질문의 예시는 아닌 것 같습니다. 왜냐하면 실제로 코딩을 잘 하는 사람들도 이런 걸 틀리는 경우도 있고 너무 트리키한 질문이 될 수도 있어서 이런걸 예측해서 물어본다는 것 자체의 문제의 의도가 사람을 걸러서 받겠다는 것으로 느껴지기 때문입니다. 다만, 조금 더 상식적인 선에서의 질문같은걸 물어보는 경우는 자주 있습니다. 만약 위와 같은 질문들에 잘 대응하고자 한다면 평소에 개발자도구를 많이 사용해보는 것이 좋습니다. 다양한 기능이 존재하기도 하고 특히 콘솔에 코드를 입력해 놓고 debugger라는 키워드를 함게 주면 그 구간에서 실행이 멈추고 그 환경에 대해서 분석을 할 수 있습니다. 시간이 여유로울 때 개발자 도구를 한 번 공부해보면 좋습니다.
- 기술면접에서 자주 등장하는 질문들에 대해서 대답해보는 연습을 위해서 저희끼리 CS 스터디를 진행해보려고 합니다! 혹시 멘토님께서 생각하시는 “이건 모르면 탈락” 이라고 할만한 주제나 질문이 있을까요?
답변
신입이나 주니어를 뽑는데 있어서는 모르면 탈락이 될만한 사유는 없다고 생각합니다. 왜냐하면 주니어를 어떤걸 이미 많이 알고 있는 상태를 기대하기보다도 태도같은 측면을 더 많이 보기 때문입니다. 다만 경력이나 시니어같은 경우 예를들어 리액트 공식문서 초장에 나오는 내용인데 그걸 잘못 알고 있다거나 하면 신뢰성이 떨어지고 좀 곤란하긴 합니다.
CS 분야에 대해서는 사실 예전에 CTO 분으로부터 전화 면접으로 해시맵의 시간복잡도(O(1)) 같은 것을 물어봤는데 답변 못하는 사람들이 엄청 많았다고 들은적이 있습니다. 컴퓨터공학에서는 아주 기본적으로 알 수 있는 것이지만 10명중에 7명이 답을 못했다고 들은 적이 있는 만큼 CS에 대해서는 사실 잘 모르는 사람들도 많이 있습니다. 그래서 CS도 어느정도 준비를 하면 좋긴 한데 레드블랙트리 같은 복잡한건 공부하지 않아도 괜찮습니다. FE에서 쓸 일이 없기 때문입니다.
휴지통
