이직하려는 친구에게 보내는 프런트엔드 개발 면접 질문

들어가며

올해 코로나의 영향으로 비대면 IT 서비스를 하는 회사들이 폭발적으로 사업을 확장하고 적극적으로 구인하는 것 같습니다. 벌써 올해만 해도 꽤 많은 IT 기업들에서 대규모 공채를 진행한 것 같아요. 얼마 전 제 가까운 친구와 지인들이 최근에 열린 경력 공채에 프런트엔드 개발자로 지원한다는 사실을 알게 되었습니다. 개인적으로 친분이 두터운 분들이라 이것 저것 면접에 대해서 여쭤보시는 것도 많고 저도 어떻게든 도움을 드리고 싶었습니다. 그래서 면접 질문을 정리해 봤습니다.

이 글은 제가 여태까지 회사에서 프런트엔드 개발자로 일을 하면서 쌓은 경험과 제 개인적인 생각이 반영된 글입니다. 저도 구직을 하기 위해 여러 곳에서 면접을 봤었고 실제로 같이 일할 분들을 모시기 위해 면접관의 입장에서 면접을 본 경험도 있습니다. 무엇보다도 이 글은 현재 제가 함께 서비스를 만들어 나가고 싶은 분을 모신다고 했을 때 질문드리고 싶은 내용들을 모았습니다.

따라서, 이 질문은 면접을 통과하기 위해 답을 찾고 외우는 것이 아니라 자기 스스로 이 질문들에 자연스럽게 대답할 수 있는 웹 서비스 개발 경험을 쌓았는지 확인하는 지표 정도로 봐주셨으면 좋겠습니다 :) 혹은 질문에서 낯선 용어나 내용이 있다면 그쪽 방향으로 학습해 보는 것도 좋겠구나 라는 생각을 해보실 수 있는 계기가 되었으면 좋겠습니다 :)

그럼 다들 건강 유의하시고 남은 한 해 잘 마무리 하세요! :)

질문 유형

질문의 범주를 다음과 같이 4개로 구분하였습니다.

단골 질문 - 기본적으로 다 알고 대답할 수 있어야 하는 내용
직무 관련 질문 - 최소 70% 이상 대답할 수 있으면 좋지 않을까? 하는 내용
그 외 나올 수 있는 질문 - 필수로 알아야 하는 질문은 아니지만 알면 좋은 내용
기본적으로 준비해 가야 하는 질문 - 지원자로서 기본적으로 대답할 준비가 되어야 있어야 하는 내용

자 그럼 하나씩 살펴볼게요 :)

단골 질문 - 기본적으로 다 알고 대답할 수 있어야 하는 내용

프런트엔드 개발자 면접이라면 거의 빠지지 않고 물어보는 내용입니다. 웹 서비스를 개발하기 위해서 기본적으로 알아야 하는 지식과 함께 빠르게 변화하는 프런트엔드 개발 생태계를 따라가기 위한 노력을 질문하였습니다.

브라우저 저장소에 대해서 설명해 보세요
- ex) 로컬 스토리지, 세션 스토리지, 쿠키 각각 설명
- ex) 로컬 스토리지와 쿠키의 차이점 설명
자바스크립트 this란?
- ex) 화살표 함수, call, bind, apply 등
자바스크립트 이벤트 관리 방법? 보통 어떤 식으로 이벤트를 설계해야 하는지?
- ex) 이벤트 캡처링 & 버블링
- ex) 이벤트 등록 & 해제
- ex) 이벤트 위임 방식 등
자바스크립트 비동기 처리에 대한 설명
- ex) 콜백, 프로미스, async await
- ex) 비동기 처리의 특성 및 에러 처리 방법?
프런트엔드 개발은 지속적으로 학습해야 하는 분야인데 어떤식으로 학습을 하고 있는지?

직무 관련 질문 - 최소 70% 이상 대답할 수 있으면 좋지 않을까? 하는 내용

프런트엔드 개발의 기술적인 부분뿐만 아니라 지원자의 전반적인 웹 서비스 개발 경험을 파악할 수 있는 질문입니다. 아래 질문에 전반적으로 고루 답변할 수 있는 분이라면 하나의 웹 서비스를 담당하실 수 있을 것이라 생각합니다.

프런트엔드 빌드 시스템에 대해서 설명해보세요.
- 바벨이란?
- 폴리필이란?
- Node.js란?
- NPM이란?
- ESLint란?
- Prettier란?
- 웹 태스크 매니저란?
웹팩이란? 모듈 번들러가 무엇인가요?
자바스크립트 프레임워크를 써봤는지? 써봤다면 어떤 걸 쓰는지? 만약 쓴다면 쓰는 이유와 썼을 때의 장점?
“기획 - 디자인 - API 개발 - 프런트엔드 개발”의 서비스 절차에서 프런트엔드 개발자의 역할은 무엇이라고 생각하는지?
CORS란? CORS를 해결하기 위한 방법을 아는 대로 모두 설명해 주시고 보통 어떤 방식으로 해결하는지 자주 사용하는 방법 1가지와 함께 실제 해결하신 경험을 공유해 주세요.
프런트엔드 성능 최적화란? 프런트엔드 성능 최적화 경험이 있다면 자세하게 설명해달라.
백엔드 개발 경험이 있는가?
- (꼬리 질문) REST API 구축 경험과 구현 관점에서의 간단한 REST API 설계 방식 설명해 보세요. 브라우저의 URL 요청을 받아서 서버의 데이터를 화면에 다시 뿌려주기까지의 백엔드 쪽의 플로우를 알고 있는지 확인하는 차원.
Virtual DOM이 뭔지 아시는지? 썼을 때의 장점?
- (꼬리 질문) 브라우저 동작 원리 아는 만큼 설명
웹 서비스 배포 시스템 구축 경험?
- (꼬리 질문) CI, CD가 무엇인지 아는지? 구축해본 경험 혹은 사용해본 경험이 있는지
테스트 자동화 경험? 단위 테스트 또는 E2E 코드를 작성해 본적이 있는지?
- (꼬리 질문) 테스팅 라이브러리와 프레임워크에 특화된 테스팅 라이브러리는 각각 어떤 걸 썼는지?
- (꼬리 질문) 테스트 대상과 커버리지는 보통 어떻게 잡는지?
웹 접근성과 시맨틱 마크업이란? 이 2가지를 지키기 위해 보통 어떤식으로 마크업을 작성하는지?
웹 서비스를 기획부터 배포까지 모두 스스로 해본 경험이 있는가? 토이 프로젝트나 회사 서비스 등
- (꼬리 질문) 구체적으로 어떤 역할을 수행했는지 설명
SEO(검색 엔진 최적화)란? 적용 사례가 있으면 구체적인 적용 방법도 같이 설명
REST API로 받은 객체와 배열은 보통 어떤 자바스크립트 API나 로직을 이용해서 화면에 맞게 가공을 하는지?
- (꼬리 질문) map, filter, reduce API 사용 경험과 각각 설명
함수형 프로그래밍이란?
- (꼬리 질문) 자바스크립트 클로저란?
- (꼬리 질문) 자바스크립트 프로토타입이란?
서버 사이드 렌더링과 싱글 페이지 애플리케이션의 차이점?
- (꼬리 질문) 서버 사이드 렌더링이나 SPA로 각각 구현해 본 경험이 있는지?

나올 수 있는 질문

그 외 물어볼만한 질문들 그리고 서비스와 조직 차원에서 이상적인 동료인지 힌트를 얻을 수 있는 질문입니다.

타입 시스템에 대해서 알고 있는지? 타입스크립트를 써봤는지?
- (꼬리 질문) 자바스크립트와 타입스크립트의 차이점?
- (꼬리 질문) 타입스크립트의 장점과 단점?
웹 서비스의 사용성을 개선하기 위해 고민해 봤던 부분이 있는지? 구체적인 사례와 경험 설명
자바스크립트 관련해서 모르는 문법이나 API가 나왔을 때 관련 정보를 어떻게 검색하는지?
다른 직무의 동료들과 어떤 식으로 커뮤니케이션 하는지?
여태까지 소속되었던 팀 내부적으로 혹은 회사 외부적으로 지식 공유나 지식 전파 같은 활동들을 해본 적이 있는지?
새로 배우는 개발 지식은 보통 어떤 식으로 정리하는가?
코딩 컨벤션은 보통 어떤 걸 따르고 코딩 컨벤션을 프로젝트에 적용하기 위해 어떤 노력들을 하는지?