신입 프론트엔드 개발자 기술면접 질문 모음

프론트엔드 개발자에게 질문할만한 기술면접 질문 및 답변들을 정리하여 지속적으로 업데이트 하려고 해당 글을 작성하였습니다.

해당 글은 지속적으로 업데이트 예정입니다.

 

• HTML/CSS

  • • Flexbox와 Grid Layout의 차이점은 무엇인가요?
    • CSS 그리드(Grid)를 사용하여 복잡한 레이아웃을 만드는 방법에 대해 설명해주세요.
    • 미디어 쿼리(Media Queries)를 사용하여 반응형 웹 디자인을 구현한 경험이 있나요?
    • 모바일 우선 디자인(Mobile-First Design)의 이점에 대해 설명해보세요.
    • SASS 또는 LESS와 같은 CSS 전처리기를 사용한 경험이 있나요? 이들의 주요 기능에 대해서 언급해주세요.
    • px, em, rem 의 차이에 대해 설명해주세요.
    • 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
    • vw, vh에 대해 설명해주세요.
    • 반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
    • CSS 선택자의 우선순위에 대해 설명해주세요.
    • 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
    • Flexbox에 대해 설명해주세요.
    • float의 동작에 대해 설명해주세요.
    • CSS에서 Cascading에 대해 설명해주세요.
    • ⭐ SCSS에 대해 설명해주세요.
    • ⭐ postition 속성에 대해 설명해주세요.
    • margin과 padding에 대해 설명해주세요.
    • HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
    • Box model에 대해 설명해주세요.
    • Attribute와 Property의 차이에 대해 설명해주세요.
    • ⭐ display 속성에 어떤 것들이 있는지 설명해 주세요.
    • CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
    • CSS in JS의 장단점에 대해 설명해주세요.
    • ⭐ 시맨틱 마크업에 대해 설명해주세요.
    • HTML5의 태그에 대해 설명해주세요.
    • script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
    • 가상 클래스에 대해 설명해주세요.
    • margin 병합에 대해 설명해주세요.

 

• Javascript

  • 자바스크립트는 무슨 언어인가요?
  • 변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.
  • 데이터 타입에 대해 설명해주세요.
  • 생성자에 대해 설명해주세요.
  • ⭐ this에 대해 설명해주세요.
  • call, apply, bind에 대해 설명해주세요.
  • ⭐ 콜백 함수에 대해 설명해주세요.
  • ⭐ 콜백 지옥을 해결하는 방법을 설명해주세요.
  • ⭐ Promise에 대해 설명해주세요.
  • Promise.all() 에 대해 설명해주세요.
  • ⭐ Promise와 Callback를 비교 설명해주세요.
  • ⭐ Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.
  • ⭐ Promise와 Async, Await의 차이를 설명해주세요.
  • AJAX에 대해 설명해주세요.
  • ⭐ var, let, const 차이를 설명해주세요.
  • TDZ에 대해 설명해주세요.
  • 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.
  • ⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요.
  • ⭐ 이벤트 위임에 대해서 설명해주세요.
  • 이벤트 위임의 동작 방식에 대해서 설명해주세요.
  • ⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요.
  • 스코프 (Scope)에 대해 설명해주세요.
  • 스코프 체인에 대해 설명해주세요.
  • ⭐ 클로져(Closure)에 대해 설명해주세요.
  • 실행 컨텍스트에 대해 설명해주세요.
  • 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.
  • 자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.
  • 자바스크립트가 동적 언어인 이유는 무엇인가요?
  • 프로토타입에 대해 설명해주세요.
  • 깊은 복사와 얕은 복사에 대해 설명해주세요.
  • 불변성을 유지하려면 어떻게 해야하나요?
  • Blocking과 Non-Blocking에 대해 설명해주세요.
  • ⭐ 동기와 비동기에 대해 설명해주세요.
  • ES6에서 새로 생긴 기능을 아는대로 말씀해주세요.
  • undefined, null, undeclared를 비교해주세요.
  • 자바스크립트를 멀티 쓰레드처럼 사용하는 방법이 뭔가요? / 자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요. (이벤트 루프)
  • 태스크 큐와 마이크로 태스트 큐에는 어떤 함수가 들어가나요?
  • requestAnimationFrame에 대해 설명해주세요.
  • 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요?
  • map과 forEach, reduce에 대해 설명해주세요.
  • 자바스크립트의 메모리 관리에 대해 아는 대로 설명해주세요
  • 클래스에 대해 설명해주세요.
  • 즉시 실행 함수 (IIFE)에 대해 설명해주세요.
  • 엄격 모드에 대해 설명해주세요.
  • 콜 스택 (Call Stack)과 힙 (Heap)에 대해 설명해주세요.
  • Rest 연산자와 Spread 연산자에 대해 설명해주세요.
  • 제너레이터에 대해 설명해주세요.
  • 이터러블과 이터레이터 프로토콜에 대해 설명해주세요. 
  • JavaScript에서의 화살표 함수(Arrow Function), 템플릿 리터럴(Template Literal), 클래스(Class), 및 비구조화 할당(Destructuring Assignment)에 대해 설명하세요.
  • const, let, var의 차이점과 각각의 사용 사례에 대해 설명해보세요.
  • JavaScript를 사용하여 이벤트 핸들링을 어떻게 구현하는지 설명해보세요.
  • 이벤트 위임(Event Delegation)의 개념과 사용 이유에 대해 설명해주세요.
  • JavaScript에서 비동기 코드를 처리하는 방법과 콜백(callback) 함수의 문제점에 대해 설명해주세요.
  • Promise와 async/await의 차이점을 설명하고, 언제 어떤 것을 사용해야 할까요?

 

• Typescript

  • 타입스크립트를 사용하는 이유에 대해 설명해주세요.
  • Type과 Interface의 차이점에 대해 설명해주세요.
  • 제네릭에 대해 설명해주세요.
  • 제네릭 유틸리티 타입에 대해 설명해주세요.
  • 클래스의 Public, Private, Protected에 대해 설명해주세요.
  • 클래스의 Static에 대해 설명해주세요.

 

 

• React

  • React에 대해 설명해주세요.
  • React의 원리, 특징, 장단점이 무엇인가요?
  • Virtual DOM 이 무엇인지 설명해주세요.
  • Virtual DOM 작동 원리에 대해 설명해주세요.
  • JSX에 대해 설명해주세요.
  • 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
  • 리액트에서 컴포넌트를 어떻게 생성하나요?
  • 클래스형 컴포넌트를 사용해보셨나요?
  • 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
  • ⭐ 라이프사이클에 대해 설명해주세요.
  • ⭐ 라이프 사이클 메소드에 대해 설명해주세요.
  • 함수형 컴포넌트의 장점에 대해 설명해주세요.
  • ⭐ React Hooks에 대해 설명해주세요.
  • ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
  • useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
  • Pure Component에 대해 설명해주세요.
  • shouldComponentUpdate에 대해 설명해주세요.
  • State에 대해 설명해주세요.
  • React에서 State를 어떻게 관리하나요?
  • Props에 대해 설명해주세요.
  • ⭐ Props Drilling에 대해 설명해주세요.
  • ⭐ Props Drilling을 어떻게 해결할 수 있나요?
  • 데이터를 자식에서 부모로도 전달할 수 있나요?
  • Props와 State의 차이에 대해 설명해주세요.
  • 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?
  • React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요.
  • React에서 State의 불변성은 어떻게 유지할 수 있나요?
  • setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?
  • 왜 비동기적으로 동작하나요?
  • HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.
  • ⭐ Key Props를 사용하는 이유에 대해 설명해주세요.
  • Ref의 용도에 대해 설명해주세요.
  • 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
  • HOC (Higher-Order Components)에 대해 설명해주세요.
  • Context API에 대해 설명해주세요.
  • React.Fragment에 대해 설명해주세요.
  • Portal에 대해 설명해주세요.
  • 에러 바운더리에 대해 설명해주세요.
  • 메모이제이션에 대해 설명해주세요.
  • ⭐ 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?
  • ⭐ useMemo와 useCallback에 대해 설명해주세요.
  • React.memo와 useMemo의 차이에 대해 설명해주세요.
  • 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?
  • 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
  • CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.
  • React 18 버전 업데이트 내용에 대해 말씀해주세요.
  • Client Side Routing에 대해 설명해주세요.
  • Next.js 를 사용해보셨나요?
  • React에서 Form 이벤트는 어떻게 제어하셨나요?
  • React Hook Form 를 사용해보셨나요?
  • 기억나는 Hook에 대해 전부 설명해주세요.
  • React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까요?
  • ⭐ Redux에 대해 설명해주세요.
  • ⭐ Redux를 사용하는 이유에 대해 설명해주세요.
  • ⭐ Redux의 장단점에 대해 설명해주세요.
  • Flux 패턴에 대해 설명해주세요.
  • Context API와 Redux를 비교해주세요.
  • Redux의 3대 원칙에 대해 설명해주세요.
  • React-Query를 사용해보셨나요?
    • React-Query에 대해 설명해주세요.
    • React-Query의 등장 배경과 장점에 대해 설명해주세요.
  • Recoil을 사용해보셨나요?
    • Recoil에 대해 설명해주세요.
    • Recoil에서 Loadable의 개념에 대해 설명해주세요.
    • Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?
    • Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?
    • ⭐ Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)

 

 

• 프론트엔드 전반

  • ⭐ 브라우저 렌더링 과정을 설명해주세요.
  • 브라우저는 어떻게 동작 하나요?
  • Webpack, Babel, Polyfill에 대해 설명해주세요.
  • ESLint와 Prettier에 대해 설명해주세요.
  • SPA와 MPA에 대해 설명해주세요.
  • ⭐ CSR과 SSR의 차이는 무엇인가요?
  • ⭐ CORS와 해결 경험을 말씀해주세요.
  • bundle의 사이즈를 줄이려면 어떻게 해야 하나요?
  • ⭐ 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.
  • 브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 어떤 영향을 끼치나요?
  • ⭐ 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?
  • ⭐ 토큰 기반 인증 방식에 대해 설명해주세요.
  • ⭐ JWT 토큰을 쿠키에 저장했을 때 취약점에 대해 설명해주세요.
  • ⭐ 크로스 브라우징에 대해 설명해주세요.
  • 크로스 브라우징 이슈를 해결했던 경험을 말씀해주세요.
  • 웹사이트 성능 최적화에는 어떤 방법이 있나요?
  • 객체 지향 프로그래밍이란 무엇인가요?
  • 객체 지향 프로그래밍의 특징에 대해 말씀해주세요.
  • 객체 지향 프로그래밍의 장단점에 대해 말씀해주세요.
  • ⭐ REST API에 대해 설명해주세요.
  • Git Flow에 대해 설명해주세요.
  • ⭐ SEO에 대해 설명해주세요.
  • BOM과 DOM에 대해 설명해주세요.
  • ⭐ 리플로우와 리페인트에 대해 설명해주세요.
  • 리플로우와 리페인트의 발생 조건에 대해 설명해주세요.
  • visibility 속성은 리플로우를 발생시킬까요?
  • Agile에 대해 설명해주세요.
  • dependencies 와 devDependencies 차이에 대해 설명해주세요.
  • XSS와 CSRF에 대해 설명해주세요.
  • 인증과 인가에 대해 설명해주세요.
  • package.json에서 private에 대해 설명해주세요.
  • 프로젝트를 npm에 배포하려면 어떤 설정이 필요할까나요?
  • ⭐ SEO는 어떤 식으로 신경쓰셨나요?
  • ⭐ 어플리케이션의 성능은 어떤식으로 측정하셨나요?
  • LightHouse 결과가 좋지 않을 때, 프로젝트에서 병목 현상은 어떻게 해결할 수 있을까요?
  • ⭐ 주소창에 주소를 입력했을 때의 흐름을 설명해주세요.

•