Front-End interview questions(이직 후기)

주니어 프론트엔드 개발자 면접 후기

2021년 하반기에 이직을 하게 되면서 꽤 많은 회사의 면접을 봤다. 시니어 개발자들을 볼 수 있던 기회가 많이 없던 나로서는 굉장히 좋은 기회였고 즐거웠다. 가고 싶은 회사는 많았지만 아쉽게도 몸이 하나라 그 중 가장 가고싶던 회사를 가게 됐다. 이 좋았던 면접 기억이 날아가기 전에 정리를 해두려고 한다.

회사별로 면접 때 나온 질문들을 간단히 요약해 정리했고 당연히 회사의 이름은 공개하지 않았다. 특정할 수 있는 정보 또한 생략했다. 과제나 테스트에 대한 내용도 당연히 생략한다.

대부분의 인터뷰는 1차 기술면접, 2차 인성면접(컬처핏)으로 진행된다.

1차 기술면접의 경우 주로 물어봤던 것은

• 이력서에 기술한 내용
• 기술에 대한 내용 (웹에 대한 이해, 자바스크립트, 리액트 일부, 타입스크립트 일부 등)
• 인성, 협업에 대한 내용
• 과제나 코딩테스트가 있었다면 그 풀이에 대한 내용
• 질문

2차 인성면접에서 주로 물어봤던 것은

• 지원동기, 이직사유
• 개발 시작한 이유
• 협업 시 트러블 상황
• 누군가를 설득한 경험
• 3~5년 사이의 목표

크게 이 정도가 될 것 같다.

1. A사

1차 면접을 아주 재밌게 봤었다. 특히, 추가 질문에서 “어떻게 공부하시나요?” 라는 질문을 했었는데 가장 배울 수 있었던 답변(라이브러리 릴리즈 노트를 본다는 것)을 들었었다. 다시 생각해도 참 감사하다. 특이했던 것은 1차에서 지원한 포지션이 변경되어 2차에서도 기술면접을 봤었고, 2차 면접에는 모두 백엔드 개발자들이 들어왔었다.

1차

• 이력서에 대한 내용
  • 프로젝트에 대한 설명
  • prettier, eslint cicd로 구현했는지
  • E2E 테스트 cypress 선정 이유
• 기술
  • 브라우저의 동작 원리
  • 웹 접근성이 무엇인지
  • 시스템을 구축할 때 어떤식으로 설계할건지
  • event에 대한 설명(bubbling, capturing, delegation)
  • 리액트 useCallback, useMemo 에 대한 설명
  • react.memo를 쓰면 안되는 경우
  • 테스트코드는 주로 어떤 걸 쓰는지
  • context랑 state차이점
  • javascript의 클로저
  • promise all
  • 컴포넌트 나누는 방법
  • 함수형 프로그래밍에 대한 장/단점, 예시
  • typescript에서 any 썼는지? 썼으면 어떤 상황에서 썼는지
  • typescript의 제네릭
• 인성
  • 이직 사유
  • 업무를 하면 어떻게 성장할 수 있을지
  • 프론트엔드 개발자로서 본인의 강점
  • 3년정도 후에 어떤 개발자가 될건지

2차

• 이력서에 대한 내용
  • 팀을 리딩하게 된 과정
  • 최적화 한 경험
  • SEO 적용 경험
  • 개발한 것 중 다시 만들어 보고 싶은 것, 그 이유
• 기술
  • 리액트 최적화 경험, 어떤 것을 써서 최적화 시켰는지
    • useCallback, useMemo, memo
  • 리액트 shouldComponentUpdate
• 인성
  • 이직 사유
  • 본인 성격의 장 단점
  • 누군가를 설득해 본 경험
  • 회사를 선택하는 조건
  • 그 다음 공부할 것, 그 이유
  • 개발자로서 갖춰야 할 능력
  • 5년, 10년 후 본인의 모습
  • 같이 일하기 싫은 사람은 어떤 사람인지

2. B사

1차 면접경험이 굉장히 좋았었던 회사다. 면접관님이 어떤 것에 대해 질문을 하셨을 때 대답을 하긴 했지만 정확한 예시를 들지 못했었는데, 노트북으로 직접 그 예시를 보여주셨다. 이런 거는 알고 있어야 나중에 실수를 하지 않을 수 있다고 하면서... 면접보다가 감동받았던 회사.......

1차

• 이력서에 대한 내용
  • SEO최적화
  • 자동화
• 기술
  • 이벤트 동작 설명
  • 이벤트 루프
  • 시멘틱 태그
  • javascript의 싱글 스레드
  • javascript의 클로저란
  • 커링
  • 스택과 큐 차이
  • call by reference, call by value
• 인성
  • 이직 사유
  • 지원 동기
  • 본인 성격의 장 단점
  • 3년 후 본인의 모습
  • 누군가를 설득해 본 경험

2차

• 이직사유
• 지원 동기
• 자동화 경험
• 개발이 진짜 재밌는지
• 본인 성격의 장 단점
• 누군가를 설득해 본 경험
• 회사 선택 기준

3. C사

1차 2차 경험이 둘 다 좋았다. 면접이 재밌고 즐거웠다. 실무에 관련된 질문들이 많았었고, 나도 질문을 꽤 많이 했던 걸로 기억난다. 면접관님들도 즐겁게 대답해 주셨다.

1차

• 이력서에 대한 내용 일부
• 기술
  • 퀴즈 → 기술질문으로 이어지는 것들이 많았고, 생략한다.
  • object의 함수들
  • typescript 제네릭
  • 추상화 하는 기준
  • debounce throttle
  • infinity scroll 고려할 점
• 인성
  • 가장 힘들었던 커뮤니케이션
  • 스트레스 관리
  • 회사를 고르는 기준

2차

• 이직 사유
• 누군가를 설득했던 경험
• 브라우저의 동작원리를 비전공자에게 설명한다면
• 들어본 가장 부정적인 피드백
• 일에 대한 몰입이 언제 깨지는지

4. D사

면접경험이 그렇게 좋지 않아서 1차 면접을 합격했지만 2차 면접을 진행하지 않았다. 지원자가 궁금한 게 아니라 “니가 여길 통과할 수 있는지 보자" 이런 느낌이었다. 실제로 어떤 질문에 대한 답을 했을 때 “n년차인데 그걸 어떻게 알아요?” 라고 말하셔서 조금 의아했었다.

1차

• 이력서에 대한 내용
  • 사이트 성능개선 경험
  • 에러바운더리에 대해 설명
  • 테스트 코드 작성 시 작성하는 기준
  • 전역관리는 뭘로 해봤는지, ContextAPI를 썼다면 렌더링 이슈는 어케 확인을 했는지, Redux안 쓴 이유
• 기술
  • html5 doctype란?
  • meta 태그
  • http https차이 / https 구축하는데 참여해 본 적 있는지
  • CORS에 대해 설명
  • 브라우저 동작 원리
  • 리플로우 리페인트 설명
  • ssr과 csr차이
  • 웹 스토리지 설명
  • RestAPI설명 Post메소드와 Put 메소드의 URI 차이
  • 자바스크립트 자료형에 대해 아는대로 설명
  • 자바스크립트 오브젝트에 대해 설명
  • 값에 의한 참조, 레퍼런스에 의한 참조 설명
  • var와 const let 차이
  • 클로저에 대해 설명
  • 타입스크립트 제네릭
  • 자바스크립트가 멈췄을 때 해결법
  • es6이상 문법에 대해 아는대로 설명
  • vdom에 대한 설명 - 언제 썼을 때 좋을지
  • 비동기 통신 뭘로 했는지
  • array function에 대해 아는대로 설명(map, filter, forEach, reduce)
  • 자바스크립트 반복문 종류, for문은 언제 어디에 사용해야되는지, 언제 어떻게 썼을 때 lint에러 나는지
  • 자바스크립트 제네레이터
  • 자바스크립트 버전 어디까지 나왔는지 새로 추가된 기술은 뭐가 있는지?
  • 깃 플로우에 대해 설명
  • 깃 체리픽 아는지 / 2년차인데 어떻게 아는지
  • arraw function 과 일반 function과의 차이점
  • 깊은 복사, 얕은 복사 차이점
  • 클린코드에 대해 아는대로 설명

5. E사

1차 면접경험이 아주 좋았던 회사다. 어떤 질문에 대해 답을 찾지 못하고 있을 때 그 질문에 대한 답을 유도해 주면서 스스로 생각할 수 있게 만들어 주셨다. “아 그럼~ 같이 한 번 생각해 볼까요~?이게 이렇게 되면 어떤 문제가 있을까요? 그럼 그것들을 어떻게 해결할 수 있을까요?” 이런 식으로 말이다.

1차

• 이력서에 대한 내용
  • 프로젝트 초기 세팅
  • 코드스플릿
  • 번들 사이즈 줄이는 이유
  • 웹 최적화
• 기술
  • 대부분 과제에 대한 질문이라 생략한다.
  • useState가 비동기인 이유, 해결 방법
  • useEffect 에 대한 질문(렌더링, 이름의 뜻)

2차

• 지원 동기
• 이직 사유
• 건축에서 개발로 온 이유
• 본인이 생각하는 좋은 세상을 만드는 것이란?

6. F사

1차 2차 모두 면접 경험이 좋았던 회사다. 1차 대부분의 기술 질문은 과제와 관련된 것들이 많아서 여기에 적을 수 없어서 아쉽다.

1차

• 이력서에 대한 내용
  • CI/CD 적용했는지
  • 지금 프로젝트의 build 배포 과정
  • SEO 어떻게 적용했는지
  • 검색엔진에 노출되기 위한 노력
  • 컴포넌트 계층 구조 어떻게 설계했는지
• 기술
  • 대부분 과제에 대한 질문이라 생략한다.
  • 서버상태관리 / 클라이언트 상태관리
  • 시멘틱 태그
• 인성
  • 이직 사유
  • 해당 직무로 지원한 이유
  • 코드리뷰에 대한 생각
  • 튜토리얼 말고 경험에 의한 공부는 어떻게 하는지
  • 번아웃 관리
  • 코드리뷰 하면서 충돌난 경험

2차

• 건축에서 개발로 온 이유, 또 프론트엔드를 선택한 이유
• 프로젝트를 주도적으로 할 수 있었던 배경
• 프로젝트를 구축하면서 많은 것을 도입하느라 물리적인 시간이 부족했을 텐데 어떻게 했는지
• 혼자 구축을 하다보면 어느 정도 선이 적절한지 모를텐데 어떻게 판단했는지
• 공부하는 시간과 업무 시간을 분배하는 기준
• 긍정적인 피드백을 받은 경험, 부정적인 피드백을 받은 경험
• 공부할 내용을 어떻게 정하는지
• 전전 직장, 전 직장에 들어간 이유, 나온 이유
• 일에 대한 몰입이 언제 깨지는지
• 협업 시 문제 됐던 것, 해결한 방법
• 1차 면접 때 제대로 대답한 것들에 대해 다시 찾아보고 정리한 게 있는지
• 개발 이외의 관심사
• 블로그 글을 쓰는 이유
• 3~4년 후 본인의 모습