프론트엔드 면접 대비

페리·2021년 4월 18일
4
post-thumbnail
post-custom-banner

면접에 대비하여 아래 참고 사이트에 해당하는 질문들을 정리
참고 사이트 : CAPTAIN PANGYO


질문 유형

질문의 범주를 다음과 같이 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가 나왔을 때 관련 정보를 어떻게 검색하는지?

- 다른 직무의 동료들과 어떤 식으로 커뮤니케이션 하는지?

- 여태까지 소속되었던 팀 내부적으로 혹은 회사 외부적으로 지식 공유나 지식 전파 같은 활동들을 해본 적이 있는지?

- 새로 배우는 개발 지식은 보통 어떤 식으로 정리하는가?

- 코딩 컨벤션은 보통 어떤 걸 따르고 코딩 컨벤션을 프로젝트에 적용하기 위해 어떤 노력들을 하는지?


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

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

- 이 직무로 지원한 이유?

- 이 직무로 지원했을 때 하는 일에 대해서 얼마나 조사 및 이해를 하고 왔는지?

- 이직하려는 회사의 직무에서 기대하는 부분과 기여할 수 있는 부분?


프론트 엔드 개발자가 되려면 이렇게 많은 지식을 요구하고, 또 그만큼 내가 잘 설명할 수 없었다는 것에 모르고 있다는 것에 대해 반성하게 되었다.

post-custom-banner

0개의 댓글