BlogJob

프론트엔드 면접 질문 목록

, ,

면접!

Interview Question Summary

프론트엔드 면접 준비를 위한 질문 리스트 정리!

아래 질문 리스트를 기반으로 면접 질문 & 답변 목록을 작성할 예정이고, 지속적으로 보충 or 보수할 계획입니다.

업데이트 날짜

  • 2020-10-26
  • 2020-10-28
    • FE (Browser) 질문 목록 수정
    • Security 항목 추가

FE (Browser)

  • 브라우저의 렌더링 과정에 대해서 상세하게 설명해달라
  • DOM을 건드리는 방식과 아닌 방식들의 차이
  • CORS(Cross-Origin Resource Sharing)는 무엇인가 왜 이러한 방법이 정의 되었으며, 본인이 코드를 작성하면서 CORS와 관련하여서 경험하였던 이슈는 무엇인가
  • 라이브러리와 프레임워크에 대해서 설명
  • 프로세스와 스레드의 차이
  • CSR과 SSR의 차이
  • 가비지컬렉터의 역할은? 어떻게 동작하나요?
  • 크로스 브라우징이란 무엇인가요?
  • 우아한 퇴보와 점진적 향상은 무엇인가요

Security

  • 보안은 서버쪽에서 많이 신경쓰고 있지만, 프론트엔드 개발에서 보안관련 이슈는 어떠한 것들이 있는가
  • Wireshark 에 대해 알고 있는가
  • HTTP 통신의 문제점에 대해서 아는대로 말해달라
  • CORS(Cross-Origin Resource Sharing)는 무엇인가 왜 이러한 방법이 정의 되었으며, 본인이 코드를 작성하면서 CORS와 관련하여서 경험하였던 이슈는 무엇인가
  • 간단한 데이터를 클라이언트로만 관리 할수 있는가, 이와 관련해서 브라우저 에서 어떠한 것들을 지원하고 있는가, 예를 들면 소셜 로그인같은 것들에 대한 브라우저 종료시 발생하는 문제에 대응 경험이 있는가

Network

  • Http와 Https 통신 방식의 차이?
  • 웹 프로토콜이란
  • CORS(Cross-Origin Resource Sharing)는 무엇인가 왜 이러한 방법이 정의 되었으며, 본인이 코드를 작성하면서 CORS와 관련하여서 경험하였던 이슈는 무엇인가
  • RESTful API 가 무엇인가, 아는대로 다 말해달라

Programming

  • 타입스크립트를 사용해본 경험이 있는가, 타입스크립트에 대한 본인의 생각과 도입시의 장점을 말해달라

  • 메소드 체이닝이란 무엇이며, 이것의 장단점은 무엇인가?

  • 메모라이제이션이란

  • 배포를 해본적이 있는가?

    • 어떻게 배포를 해보았나

  • 쓰로틀링과 디바운스

JS

  • 실행 컨텍스트(Execution Context)에 대해 설명해달라
  • DOM (Document Object Model)
    • 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.
    • 이벤트 위임(event delegation)에 대해 설명하세요.
  • Javascript Scope Chaining
  • 전역 scope를 사용했을 때 장단점에 관해 설명해주세요.
  • 이벤트 루프와 동시성 모델에 대해서 설명
  • document load와 DOM Content Loaded의 차이
    • document load : DOM을 비롯한 모든 asset이 로드된 후 발생
    • DOM Content Loaded : 초기 html 문서가 완전히 로드되고 나면 파싱 후 발생
  • attribute와 property
    • attribute : HTML 마크업에서 정의
    • property : DOM에서 정의
  • 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
    • 호스트 객체 : 빌트인 또는 네이티브 객체에 포함되지 않은 사용자에 의해 생성된 객체 ⇒ js는 빌트인 및 네이티브 객체 구성 후 호스트 객체를 해석
    • 네이티브 객체 : 브라우저 혹은 구동 엔진에 내장되어 있는 객체 DOM이 이에 해당 ⇒ 구동앤잔 별 사용성이 달라서 크로스 브라우징 문제를 바랭시키기도 함
  • 자바스크립트의 원시 타입(Primitive Data Type)은 몇가지이며, 전부 말해달라
    • Number, String, Boolean, Null, Undefined, (Symbol)
  • null vs undefined
  • use strict 은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
  • 클로져(Closure)는 무엇이며,
  • 자바스크립트의 Number Type은 다른 언어들과 차이점이 무엇인가, 왜 하나만 존재하는가
  • 자바스크립트의 순환참조란? 어떤게 문제이고 해결방법은?
  • function foo() {} 와 var foo = function() {} 에서 foo 의 차이가 무엇인지 설명해보세요.
  • ES6에서 화살표 함수와 일반 함수의 차이는
  • 자바스크립트의 배열(Array)이 실제 자료구조 배열이 아닌데 그 이유는?
  • 자바스크립트의 호이스팅(Hoisting)은 어떻게 이루어져 있는가
  • 클로저(Closure)란 무엇이며, 어떻게 사용하는지, 왜 이러한 패턴을 사용하는가
  • This
    • 자바스크립트에서 This는 몇가지로 추론 될수 있는가, 아는대로 말해달라
    • 일반함수의 this와 화살표 함수의 this는 어떻게 다른가?
    • Call, Apply, Bind 함수에 대해 설명해달라
    • use strict모드에서의 this?
  • 프로토타입이란
  • 객체 지향 프로그래밍(Object Oriented Programming)
    • OOP에 특징에 대해 설명해달라(상속, 캡슐화 등등…)
    • 현실에 상황을 예로 들어 OOP의 개념으로 설계과정을 설명해달라
      ex) 축구를 게임으로 만든다거나, 기타 어떠한 상황이라도 좋다
    • 프로토타입 상속이 이루어지는 법
  • 함수형 프로그래밍(Function Programming)
    • 함수형 프로그래밍에 대해 설명해달라
    • 함수형 프로그래밍에 개념에서 순수함수란 무엇인가
    • OOP와 함수형 프로그래밍의 가장 큰 차이점은 무엇인가
  • OOP와 함수형 프로그래밍의 차이
  • ES6
    • 크롬 정도의 브라우저를 제외하곤 ES6 스펙에 대한 지원이 완벽하지 않다. 해결방법은 무엇인가
    • Babel이란? babel은 컴파일러 인가 ? 트랜스파일러인가
    • ES6 에서 추가된 스펙에 대해 아는대로 다 말해달라
    • var 와 let, const의 차이점은 무엇인가 (function scope와 block scope의 개념에서)
    • Class 는 무엇이고, Prototype, fucntion의 ES5 스펙만으로 Class를 구현할수 있는가
  • 익명함수와 함수 즉시 호출
  • 비동기 프로그래밍
    • 동기 함수와 비동기 함수
    • AJAX란 무엇인가
    • Callback 함수란
    • Promise 함수
    • Promise와 Callback의 차이점은 무엇이며 각각의 장단점에 대해 설명해달라
    • Promise란 무엇이며 코드가 어떻게 구성되어있는가
    • async, await는 무엇이며 Promise의 차이는
  • 고차함수 (High-Order Function)
  • JSON이 무엇이며 사용하면 어떠한 장점이 있나요?
  • JSONP의 동작
    • 크로스 도메인 이슈에 의해 ajax 요청이 허용 되지 않아 우회용으로 많이 쓰임 ⇒ script 태그를 통해 callback 쿼리 매게 변수를 요청함
  • 모듈 패턴과 전통적 상속, 각각의 장단점을
  • Call by value & call by ref
  • 디자인 패턴

CSS

  • CSS cascading system
  • CSS 적용 우선순위
  • CSS selector 동작원리
  • 선택자
    • 하위 선택자 : 부모요소에 포함딘 모든 하위 요소에 스타일 적용
    • 자식 선택자 : 부모 바로 아래 자식 요소에만 적용
  • float
  • float 속성 해제 방법
  • 이미지 대체
  • 컨텐츠 이미지 숨기기
  • inline vs inline-box
  • px and em
  • inline vs inline block
  • Progressive Rendering
  • 개발사 접두어
  • 반응형과 적응형 웹
  • 반응형 웹의 3요소
    • 미디어 쿼리, 플루이드 그리드, flexible img
  • @media속성
  • 모바일 우선 전략
  • w3c box iebox
  • Position 요소
  • 자식 중앙 정렬
  • And 나머지는 여기서 => https://yangshun.github.io/front-end-interview-handbook/kr/css-questions

HTML

  • Doctype

  • 표준모드와 쿼크모드

  • 다국어 서비스 제공방법

  • HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가요?

  • <script async>, <script defer> 사이의 차이점을 설명하세요.

    • script async : 페이지 파싱과 동시에 비동기적으로 진행
    • script defer : html 구문 분석이 끝나면 스크립트 파일 실행
    • script : html 파싱 도중 정지하고 실행

  • window 객체란 무엇입니까?

  • DOM

  • 블록요소와 인라인요소

  • 웹 스토리지

    • 쿠키, 로컬 스토리지, 세션 스토리지의 정의와 차이점

  • FOUC

    • 브라우저로 웹 문서에 접근할 때 CSS 스타일이 미적용된 모습이 화면에 노출되며 생기는 깜빡임
    • CSS를 <head> 안에 import하고 @import 사용 자제
    • FOUC를 보여주는 요소를 js를 통해 숨긴 후 script가 모두 적용된 후 보여줌

  • XML과 HTML

    • XML은 웹 브라우저 외에도 포괄적으로 사용되는 형식으로 데이터 교환에 특화되어 있으며 이것 만으론 데이터를 가지고 있을 뿐 화면에 표시되지 않는다. HTML은 웹 브라우저에서 사용하는 문서 형식이며 XHTML은 HTML규격이 가진 문제를 극복하고 확장기능을 제공한다.

  • CSS와 JS 문서의 위치

    • CSS를 안에 넣으면 페이지 로딩 중 스타일 적용이 안 된 DOM의 모습을 안보이게 하고 js를 앞에 놓으면 CSS로딩 직후 로딩 되어 사용자가 조금 빠르다고 느낄 수 있다.

  • 기능이 제한된 브라우저 페이지 만들기

    • 우아한 퇴보, 점진적 향상

  • Single Page Application

    • 최초 한 번 페이지를 전체 로드한 후 데이터만 변경하여 사용 가능한 어플리케이션
      • 클라이언트 사이드 랜더링 : 서버는 JSON 파일만 보내주고 html을 그리는 건 자바스크립트가 담당
      • html 다운로드 ⇒ js 다운로드 및 해석 ⇒ Fetch Data
      • 서버 사이드 랜더링 : html 다운로드 ⇒ 사용자가 봄

Vue

  • Vue를 선택한 이유
  • Vue의 장점
  • vue에서의 라이프사이클?
  • vue와 React의 차이?
  • 가상돔 (virtual DOM)
  • 면접관을 Vue.js 비사용자라고 가정하고 Vue.js에 설명하고 장단점을 말해달라
  • Vue.js의 Life-cycle에 대해 아는대로 말해달라
  • Vue.js 에서 DOM은 어느 시점에 생성되나
  • Computed와 Methods의 차이점은 무엇인가
  • 가상돔(Virtual DOM) 개념은 무엇이며, DOM과의 차이점 가상돔의 개념이 사용되게된 배경은 무엇인가
  • 최근의 프레임워크를 사용할때 외부 라이브러리와의 결합시에 더 나은 코드 작성법을 고민해본적이 있는가
  • DOM을 직접 조작하는 D3.js 같은 라이브러리와의 결합시에 예상되는 문제점이 있는가
  • State 관리
  • Vuex 상태 관리 & Redux

개발외 질문 목록

  • 왜 개발자가 되려고 하는가

  • 개발자로서의 본인의 비전을 이야기 해달라

  • 비전공자로써 갖고 있는 컴플렉스가 있는가

  • 운영체제같은 컴퓨터공학(cs)에 대한 기초지식이 있는가

  • 최근에 관심갖거나 공부 하고 싶은 개발 기술은 무엇인가

  • 프로젝트 협업 과정을 경험한 적이 있는가

  • 공부 방법

    • 개발자가 되기 위해서 어떻게 공부하였는가
    • 학습시 주로 이용하는 웹페이지나, 동영상 강좌 페이지는 어디인가
    • 최근의 읽은 개발 관련 서적은 무엇인가
    • 즐겨 보는 개발 관련 유튜브가 있는가
    • 회사 기술 스택에 맞추어 단기간 내에 언어와 프레임워크를 학습 하여야 할 때, 어떻게 공부하고 해결할 것인가

  • 포트폴리오 제작시에 비인기 라이브러리를 사용한 경험이 있는가

  • 이러한 비인기 라이브러리에 대한 정보를 어디서 얻는가 왜 활용하였는가

FE 개발 환경

  • Eslint가 무엇인가요
  • Webpack이란
  • 패키지매니저로 어떤거 사용? npm
    • npm과 yarn은 어떤게 다른가
  • AMP
    • AMP의 개념은 무엇이고 기존의 것에 비해 장점은 무엇인가
    • 최근의 프레임워크들과의 조합을 고려해 본적이 있는가 ex) vue-amp..
  • package.json 파일의 역할
  • package.json에서 dependencies와 devDependencies의 차이는

git

  • 두 명의 프론트엔드 개발자가 있다 git을 관리하는 방식?
  • git pull request rebase 와 다른 방법

자료구조(Data Structure) & 알고리즘

리스트 관련 링크

인터뷰 관련 링크

Share