[면접 대비] 신입 프론트엔드 개발자 기출 면접 질문 정리

이번에 면접 보려는 회사에서 기술에 대한 지식을 많이 물어본다기에, 기출 질문들을 좀 긁어모았다.

당장은 암기하기에 급급하겠지만, 이후에 질문들에 대한 답변을 제대로 이해하고 학습해보려 한다. 👽

  질문 리스트


CS

1.    브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나요?

2.    GET 과 POST의 차이는 무엇인가요?

3.    객체 지향 프로그래밍이란 무엇인가요?

4.    프로세스와 스레드에 대해 설명해 주세요.

5.    DNS에 대해 설명해 주세요.

6.    REST API에 대해 설명해 주세요.

7.    자료구조 stack queue에 대해 설명해 주세요.

 

JavaScript

1.    Promise Callback 차이를 설명해 주세요.

2.    async, await 사용 방법을 설명해 주세요.

3.    var, let, const 차이를 설명해 주세요.

4.    이벤트 버블링과 캡처링에 대해 설명해 주세요.

5.    클로져(Closure)에 대해 설명해 주세요.

6.    실행 컨텍스트에 대해 설명해 주세요.

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

8.    프로토타입에 대해 설명해 주세요.

9.    불변성을 유지하려면 어떻게 해야 하나요?

10.  이벤트 버블링과 이벤트 캡처링에 대한 예시를 들어주세요.

11.  자바스크립트가 유동적인 언어인 이유는 무엇인가요?

12.  this에 대해 설명해 주세요.

13.  콜백 지옥(Callback hell)을 해결하는 방법을 말씀해 주세요.

14.  Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이를 설명해 주세요.

15.  함수 선언형과 함수 표현식의 차이에 대해 설명해 주세요.

16.  렉시컬 환경(Lexical Environment)에 대해 설명해 주세요.

17.  데이터 타입에 대해 설명해 주세요.

18.  자바스크립트에서 일어나는 데이터 형 변환에 대해 설명해 주세요.

19.  깊은 복사와 얕은 복사에 대해 설명해 주세요.

20.  requestAnimationFrame을 사용해 본 적 있나요? 왜 사용했는지

 

React

1.    Virtual DOM 작동 원리에 대해 설명해 주세요.

2.    Virtual DOM 이 무엇인지 설명해 주세요.

3.    React를 사용하는 이유에 대해 말씀해 주세요.

4.    클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해 주세요.

5.    생명 주기 메서드에 대해 설명해 주세요.

6.    리액트에서 JSX 문법이 어떻게 사용되나요?

7.    state를 직접 바꾸지 않고 useState를 사용해야 하나요?

8.    useMemo useCallback에 대해 설명해 주세요.

9.    리액트에서 메모이제이션을 어떤 방식으로 하나요?

10.  리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

11.  React-query에 대해 들어봤나요?

12.  React18 버전 업데이트 내용에 대해 말씀해 주세요.

13.  useEffect useLayoutEffect의 차이점에 대해 말씀해 주세요.

14.  Context API에 대해 설명해 주세요.

15.  key props를 사용하는 이유는 무엇인가요?

16.  제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해 주세요.

17.  props state의 차이는 무엇인가요?

18.  pure component에 대해 설명해 주세요.

19.  shouldComponentUpdate에 대해 설명해 주세요.

20.  리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?

 

Redux

1.    Redux를 사용하는 이유가 무엇인가요?

2.    Redux의 장단점에 대해 설명해 주세요.

3.    Context API Redux를 비교해 주세요.

4.    Redux-saga에 대해 설명해 주세요.

5.    Generator 문법에 대해 설명해 주세요.

6.    Redux-saga, Redux-Thunk의 차이에 대해 설명해 주세요.

 

Frontend

1.    브라우저 렌더링 과정을 설명해 주세요.

2.    브라우저는 어떻게 동작하나요?

3.    Webpack, Babel, Polyfill에 대해 설명해 주세요.

4.    CSR SSR의 차이는 무엇인가요?

5.    CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해 주세요.

6.    웹 표준을 지키며 개발하시나요?

7.    쿠키와 세션에 대해 설명해 주세요.

8.    이벤트 루프와 태스크 큐에 대해 설명해 주세요.

9.    타입스크립트를 사용하는 이유는 무엇인가요?

10.  쿠키, 세션, 웹스토리지의 차이에 대해 설명해 주세요.

11.  크로스 브라우징 경험이 있으신가요?

12.  웹 소켓을 사용해 보셨나요?

13.  웹사이트 성능 최적화에는 어떤 방법이 있나요?

14.  bundle의 사이즈를 줄이려면 어떻게 해야 하나요?

로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?

 

Html Css

1.    Cascading에 관해서 설명해 주세요.

2.    CSS 애니메이션과 JS 애니메이션의 차이에 대해 설명해 주세요.

3.    Flexbox를 사용해 보셨나요?

4.    Grid 를 사용해 보셨나요?

5.    position 속성을 나열해 주세요.

 


 

현직 개발자가 정리해주는 프론트엔드 기술 면접 필수 질문, 답변 20선 (feat. 전 카카오 엔터프라

신입 개발자라면 반드시 준비해야 할 프론트엔드 기술면접 질문+답변

zero-base.co.kr

위 링크는 제로베이스에서 제공해 주는 기술면접 질문과 답변인데, 중요한 질문만 모아져 있어서 면접 직전에 한번 훑어보고 가면 좋을 듯 싶당. 👽