프런트엔드 개발 면접 질문

질문 유형

질문의 범주를 다음과 같이 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가 나왔을 때 관련 정보를 어떻게 검색하는지?
• 다른 직무의 동료들과 어떤 식으로 커뮤니케이션 하는지?
• 여태까지 소속되었던 팀 내부적으로 혹은 회사 외부적으로 지식 공유나 지식 전파 같은 활동들을 해본 적이 있는지?
• 새로 배우는 개발 지식은 보통 어떤 식으로 정리하는가?
• 코딩 컨벤션은 보통 어떤 걸 따르고 코딩 컨벤션을 프로젝트에 적용하기 위해 어떤 노력들을 하는지?

그 외 기본적으로 준비해가야 하는 질문

구직하려는 조직에 대해서 얼마나 알아봤는지 그리고 구직 후 해당 조직의 성장에 얼마나 기여할 수 있을지 힌트를 얻을 수 있는 질문입니다.

• 이 직무로 지원한 이유?
  이 직무로 지원했을 때 하는 일에 대해서 얼마나 조사 및 이해를 하고 왔는지?
• 이직하려는 회사의 직무에서 기대하는 부분과 기여할 수 있는 부분?

마무리

• 아무쪼록 힘든 시기지만 다들 원하시는 곳에서 좋은 개발자로 성장하실 수 있었으면 좋겠습니다. 화이팅! :)