1년차 프론트엔드 개발자가 들은 면접 질문 모음 공유 (네카라쿠배, 시리즈 b~c 기업)

면접 질문들을 기억나는대로 정리한 리스트입니다. 기술 면접을 준비하시는분들에게 많은 도움이 되었으면 합니다~

네트워크

(1) 로그인과 로그인 유지를 할 때 어떤 방식으로 구현했는지 순서대로 설명해주세요.

(2) HTTP 0.9, HTTP 1.0, HTTP 1.1 각각 무슨 차이점이 있나요?

(3) HTTP 메소드들을 설명해주세요.

(4) HTTP와 HTTPS는 어떤 차이점이 있을까요?

(5) HTTP 헤더 중 Etag는 어떠한 역할을 하나요?

(6)HTTP 헤더 중 Cache-Control는 어떠한 역할을 하나요?

(7) HTTP status code 중 304는 어떤 의미인가요?

브라우저 - 랜더링 방식

(1) 검색창에 google.com을 치게되면 일어나는 일을 네트워크부터 브라우저가 하는일까지의 과정을 아는대로 모두 설명해주세요.

(2) cookie, session storage, local storage에 대해 설명해주세요.

(3) reflow, repaint에 대해 설명해주세요.

(4) reflow와 repaint가 일어나는 상황을 한 가지씩 설명해주세요.

(4-1) 그렇다면 그러한 상황에서 어떻게 최적화해야 하나요?

(5) CROS가 무엇인지 아시나요? 어떻게 해결을 할 수 있을까요.

(6) 크로스 브라우징이 무엇인가요?

(6-1) 크로스 브라우징에서 어떤 문제가 있었고 어떻게 해결했는지 경험이 있다면 소개해주세요.

(7) SPA는 무엇인가요?

(8) SSR와 CSR의 차이점을 설명해주세요.

(8-1) 각각의 방식의 장점과 단점을 설명해주세요.

(9) Next.js의 SSG은 SSR과 어떤 차이점이 있나요?

(9-1) 그렇다면 SSG와 SSR은 어떤 상황일 때 사용해야 될까요? 각각 하나 씩 예시 상황을 알려주세요.

HTML

(1) HTML tag에 <!DOCTYPE>은 어떤 의미인가요?

(2) HTML의 필수 태그는 어떤 것이 있나요.

(3) 시맨틱 태그에 대해 설명해주세요.

(4) 웹 접근성이 무엇인가요?

(4-1) 접근성 개선을 해본 경험이 있다면 어떤 식으로 개선했는지 설명해주세요.

(4-2) HTML5 outline에 대해 설명해주세요.

javascript

(1) 실행컨텍스트는 무엇인가요?

(2) 클로저에 대해 설명해주세요.

(3) 호이스팅에 대해 설명해주세요.

(4) this는 무엇인가요?

(5) 이벤트 버블링에 대해 설명해주세요.

(6) 브라우저에서 자바스크립트는 어떻게 비동기를 처리하나요?

(7) var, let, const의 각각의 차이점을 설명해주세요.

(8) 비동기 프로그래밍이 무엇인지 설명해주세요.

(8-1) 그렇다면 어떤 문제를 비동기로 해결해야 하나요.

(8-2) 본인을 가장 힘들게 했던 비동기 문제는 무엇이고 어떻게 해결했는지 경험을 소개해주세요.

(9) Promise는 무엇이고 기존 방식과 어떠한 차이점이 있을까요?

(10) async await는 어느 상황일 때 사용하나요?

(11) scope chaining에 대해 설명해주세요.

(12) prototype은 무엇인가요?

(12-1) 그렇다면 class 방식의 언어와 어떠한 차이점이 있을까요?

(13) generator에 대해 설명해주세요.

(14) javascript 엔진 중 v8은 어떤 방식으로 작동하나요?

(15) 불변성에 대해 설명해주시고 왜 불변성을 지켜야 할까요?

(16) 선언형과 명령형 방식의 차이점을 알려주세요.

typescript

(1) 타입스크립트와 자바스크립트의 차이점은 무엇인가요?

(2) 가장 자주 사용하는 유틸리티 타입은 무엇인가요?

(3) 타입스크립트의 장점을 알려주세요.

javascript Ecosystem

(1) Webpack에 대해 설명해주세요.

(2) Babel에 대해 설명해주세요.

(3) Lint에 대해 설명해주세요.

(3-1) 본인이 꼭 지켰으면 좋겠는 Lint 속성이 있나요?

React

(1) React에 대해 설명해주세요.

(1-1) Flux 패턴은 기존 패턴과 무엇이 다른가요?

(2) 웹 프론트엔드 개발에서 컴포넌트는 무엇인가요?

(3) 컴포넌트를 활용하면 어떠한 장점이 있나요?

(4) 좋은 컴포넌트를 설계하기 위한 자신만의 원칙이 있다면 소개해주세요.

(5) 가장 고민이 되었던 컴포넌트는 무엇이였나요? 고민을 하게된 이유와 어떻게 해결했는지 소개해주세요.

(6) React에서 상태를 어떻게 관리했는지 대표적인 한가지를 소개해주세요.

(6-1) 그 상태관리 방법을 선택한 이유를 알려주세요.

(6-2) 그렇다면 더 좋은 상태 관리 방법이 있을까요? 최근에 따르는 상태 관리의 원칙이 있다면 소개해주세요.

(7) virtualDom은 무엇인가요? 장점에 대해서도 설명해주세요.

(8) 리액트에서 key prop은 어떤 역할을 하나요?

(9) 컴포넌트 테스트를 해본적이 있다면 테스팅 라이브러리는 어떤 것을 써보셨나요?

(9-1) 해당 라이브러리을 선택한 이유는 무엇인가요?

(9-2) 테스트 대상과 커버리지는 어떻게 잡았는지 원칙이 있다면 설명해주세요.

(10) 리액트에서 리랜더링 문제를 해결 할 수 있는 방법은 무엇이 있을까요?

(10-1) 가장 해결하기 힘들었던 리랜더링 문제와 어떻게 해결했는지 공유해주세요.

(10-2) pure component에 대해 설명해주세요.

(10-3) react memo는 어떤 방식으로 작동하나요?

(11) uncontrol component에 대해 설명해주세요.

(11-1) uncontrol component을 활용한 경험이 있다면 공유해주세요.

(12) useMemo와 useCalback은 각각 어느상황에서 사용되나요?

웹 프론트엔드 공통

(1) 다국어 페이지는 어떤 식으로 제공 할 수 있을까요?

(2) SEO는 무엇인가요?

(2-1) SEO을 하기위해 어떤 방법을 적용했는지 경험을 공유해주세요

(3) 다크모드을 구현해본적 있나요? 어떤 식으로 구현했는지 소개해주세요.

(4) UX을 개선했던 경험이 있다면 공유해주세요.

개인적인 질문

(1) 본인만의 학습법이 있나요?

(2) 현재 가장 주의깊게 보고있는 오픈소스가 있나요?

(3) 최종 커리어 골이 어떻게 되시나요.

(4) 야근에 대해서 어떻게 생각하시나요?

(5) 인생에서 가장 몰입했던 경험이 무엇인가요.

(6) 팀원과 의사소통을 수월하게 하기 위한 본인만의 방법이 있나요?

(7) 팀 내부적으로, 외부적으로 자신의 지식 공유을 위한 활동을 해보신적 있나요?

(8) 모르는 개발 지식이나 API 사용법등은 어떻게 학습하시나요?

(9) 현재 하고 있는 사이드프로젝트가 있다면 소개해주세요.