← Blog

카테고리

Frontend

작성일

태그

#면접#CS#JavaScript#React

프론트엔드 개발자 면접 질문 목록 정리

CS, JavaScript, React, Redux, 프론트엔드, HTML/CSS 영역별로 반복적으로 등장하는 면접 질문을 정리했다.

목차

프론트엔드 직군 면접을 준비하면서 반복적으로 등장하는 질문들을 영역별로 분류했다. ⭐️ 표시는 출제 빈도가 높거나 개념의 중요도가 높다고 판단한 항목이다.

CS

  • ⭐️ 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나요?
  • DNS에 대해 설명해주세요.
  • ⭐️ GET과 POST의 차이는 무엇인가요?
  • REST API에 대해 설명해주세요.
  • ⭐️ 객체 지향 프로그래밍이란 무엇인가요?
  • 자료구조 stack과 queue에 대해 설명해주세요.
  • ⭐️ 프로세스와 스레드에 대해 설명해주세요.

JavaScript

  • ⭐️ Promise와 Callback 차이를 설명해주세요.
  • 콜백 지옥(Callback hell)을 해결하는 방법을 말씀해주세요.
  • ⭐️ async, await 사용 방법을 설명해주세요.
  • Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이를 설명해주세요.
  • ⭐️ var, let, const 차이를 설명해주세요.
  • 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.
  • ⭐️ 이벤트 버블링과 캡처링에 대해 설명해주세요.
  • 이벤트 버블링과 이벤트 캡처링에 대한 예시를 들어주세요.
  • ⭐️ 클로져(Closure)에 대해 설명해주세요.
  • 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.
  • ⭐️ 실행 컨텍스트에 대해 설명해주세요.
  • ⭐️ 호이스팅(hoisting)에 대해 설명해주세요.
  • 데이터 타입에 대해 설명해주세요.
  • 자바스크립트에서 일어나는 데이터 형 변환에 대해 설명해주세요.
  • 자바스크립트가 유동적인 언어인 이유는 무엇인가요?
  • ⭐️ 프로토타입에 대해 설명해주세요.
  • 깊은 복사와 얕은 복사에 대해 설명해주세요.
  • ⭐️ 불변성을 유지하려면 어떻게 해야하나요?
  • this에 대해 설명해주세요.
  • requestAnimationFrame을 사용해본 적 있나요?

React

  • ⭐️ Virtual DOM 작동 원리에 대해 설명해주세요.
  • ⭐️ Virtual DOM 이 무엇인지 설명해주세요.
  • ⭐️ React를 사용하는 이유에 대해 말씀해주세요.
  • 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
  • key props를 사용하는 이유는 무엇인가요?
  • props와 state의 차이는 무엇인가요?
  • pure component에 대해 설명해주세요.
  • shouldComponentUpdate에 대해 설명해주세요.
  • ⭐️ 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
  • ⭐️ 생명 주기 메서드에 대해 설명해주세요.
  • ⭐️ 리액트에서 JSX 문법이 어떻게 사용되나요?
  • 왜 state를 직접 바꾸지 않고 useState를 사용해야 하나요?
  • ⭐️ useMemo와 useCallback에 대해 설명해주세요.
  • 리액트에서 메모이제이션을 어떤 방식으로 하나요?
  • 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?
  • ⭐️ 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
  • React-query에 대해 들어봤나요?
  • React 18 버전 업데이트 내용에 대해 말씀해주세요.
  • useEffect와 useLayoutEffect의 차이점에 대해 말씀해주세요.
  • ⭐️ Context API에 대해 설명해주세요.

Redux

  • ⭐️ Redux를 사용하는 이유가 무엇인가요?
  • ⭐️ Redux의 장단점에 대해 설명해주세요.
  • ⭐️ Context API와 Redux를 비교해주세요.
  • Redux-saga에 대해 설명해주세요.
  • Generator 문법에 대해 설명해주세요.
  • Redux-saga, Redux-Thunk의 차이에 대해 설명해주세요.

Frontend

  • ⭐️ 브라우저 렌더링 과정을 설명해주세요.
  • ⭐️ 브라우저는 어떻게 동작 하나요?
  • ⭐️ Webpack, Babel, Polyfill에 대해 설명해주세요.
  • ⭐️ CSR과 SSR의 차이는 무엇인가요?
  • ⭐️ CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해주세요.
  • ⭐️ 웹 표준을 지키며 개발하시나요?
  • 쿠키와 세션에 대해 설명해주세요.
  • 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?
  • ⭐️ 이벤트 루프와 태스크 큐에 대해 설명해주세요.
  • bundle의 사이즈를 줄이려면 어떻게 해야 하나요?
  • ⭐️ 타입스크립트를 사용하는 이유는 무엇인가요?
  • ⭐️ 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.
  • 크로스 브라우징 경험이 있으신가요?
  • 웹 소켓을 사용해보셨나요?
  • ⭐️ 웹사이트 성능 최적화에는 어떤 방법이 있나요?

HTML, CSS

  • Flexbox를 사용해보셨나요?
  • ⭐️ Cascading에 관해서 설명해주세요.
  • ⭐️ CSS 애니메이션과 JS 애니메이션의 차이에 대해 설명해주세요.
  • position 속성을 나열해주세요.

Design Patterns

(추후 추가 예정)

정리

영역을 나누어 목록을 만들고 보니, ⭐️ 항목만 추려도 적지 않은 분량이다. 단순히 정의를 암기하는 방식보다는 각 개념이 왜 필요하고 어떤 문제를 해결하는지 흐름으로 이해하는 편이 면접에서도 실무에서도 오래 남는다. 항목별 상세 답변은 별도 포스팅으로 분리해 기록할 예정이다.

← 블로그 목록으로