prepare_frontend_interview

프론트엔드 기술 면접을 위한 핸드북 만들기

면접의 인터뷰어 분들이 JS의 수 많은 개념들을 순서대로 질문을 하지는 않습니다.

하지만 자바스크립트의 연관되어 있는 개념들을 순서대로 나열하고 핸드북 형식으로 보다 보면,

모르는 개념을 파악하고 한눈에 보는 것에 있어서 도움이 되지 않을까 싶어 제작하게 되었습니다.

크게 ① CS ② HTML/CSS ③ JavaScript 로 나누었습니다

① CS인 computer science에는 자바스크립트 이외에 지식들에 대한 조금 잡다한 내용이 담길 예정입니다

목차를 보고 해당 내용이 마음에 드실 경우에 보시는 것을 추천합니다!

질문의 빈도

① JS > ② CS > ③ React > ④ HTML/CSS

contribute

① 클론 받기 / 포크 받기

$ git clone https://github.com/junh0328/prepare_frontend_interview.git

② 내용 추가 또는 변경하기

ex)

- [타입과 인터페이스 🔥](#타입과-인터페이스) >>> [xxx](#xxx) 마크다운 구조

  - 타입스크립트를 왜 쓰나요? (본인이 느낀점)
  - 타입과 인터페이스의 차이를 아나요?
  - 제네릭이란?

③ 목차에도 해당 내용 추가하기

ex)

- `타입과 인터페이스 🔥` >>> 백틱 내부에 제목 그대로 표시 `xxx`

  - 타입스크립트를 왜 쓰나요? (본인이 느낀점)
  - 타입과 인터페이스의 차이를 아나요?
  - 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?

④ 이슈 생성 및 PR 날리기

예시 이슈: (#6)

템플릿을 작성해 두었으니, 해당 예시 이슈에 맞춰 작성해주시면 됩니다!

① Computer Science

네트워크 🔥
- 네트워크에서 패킷이란 무엇을 의미하나요?
- 네트워크에서 처리량은 무엇을 의미하나요?
- 지연시간이란 무엇인가요?
- 처리량은 어떤 상황에 영향을 받나요?
- 네트워크 병목현상은 무엇인가요?
- TCP/IP 가 무엇인가요? 각 계층에 대해서 설명할 수 있나요?
- 전송 계층의 대표적인 방식은 무엇이 있고 어떤 차이가 있나요? (키워드: TCP, UDP)
- 계층 간 데이터 송수신 과정에 대해 설명할 수 있나요? (키워드: 캡슐화, 비캡슐화)
- 네트워크에서 PDU에 대해 알고 있나요?
- 로드밸런서란 무엇인가요?
- ARP란 무엇인가요?
- MAC 주소란 무엇인가요?
- NAT란 무엇인가요?
HTTP 🔥
- HTTP란 뭔가요?
- HTTP 프로토콜의 가장 큰 특징은 뭔가요?
- URL은 뭔가요?
- HTTP/1.0 과 HTTP/1.1의 차이는 뭔가요?
- HTTP/1.1 과 HTTP/2.0의 차이는 뭔가요?
- HTTPS는 HTTP랑 뭐가 다른가요?
- 심화) 공개키 (비대칭키) 방식이 뭔가요?
운영체제 🔥
- 운영체제란 무엇인가요?
- 운영체제는 어떤 역할을 하나요?
- 운영체제는 어떤 구조로 이루어져 있나요?
- 컴퓨터는 어떤 요소로 이루어져 있나요?
- CPU는 어떤 요소로 이루어져 있나요?
- CPU는 어떻게 동작하나요?
- 메모리란 무엇인가요?
- 메모리는 어떤 계층 구조로 이루어져 있나요?
- 메모리는 어떤 방식으로 데이터를 관리하나요?
프로세스와 스레드 🔥
- 프로세스가 뭔가요?
- 스레드가 뭔가요?
- 프로세스와 스레드는 어떤 차이가 있나요?
- 프로세스의 컴파일 과정에 대해 설명해줄 수 있나요?
- 프로세스는 어떤 상태 값을 가지고 있나요?
- 프로세스는 어떤 구조로 이루어져 있나요? (스택, 힙, 데이터 영역, 코드 영역)
- PCB는 무엇인가요? 어떤 용도로 사용되나요? (메타 데이터)
싱글 스레드와 멀티 스레드 🔥
- 싱글 스레드 장점
- 싱글 스레드 단점
- 멀티 스레드 장점
- 멀티 스레드 단점
공유 자원 임계 영역 교착 상태 🔥
- 공유 자원
- 임계 영역
- 뮤텍스
- 세마포어
- 교착 상태
쿠키 세션 🔥
- 쿠키, 세션을 왜 쓰나요? 🔥🔥
- 쿠키가 뭔가요? 🔥🔥
- 세션이 뭔가요? 🔥🔥
- 쿠키와 세션의 차이는 어떤 점이 있을까요? 🔥🔥
- JWT을 아나요?
- JWT를 웹 스토리지에 저장해야 한다면 어디다 저장하시겠나요? 이유는요?
CORS 🔥
- CORS가 뭔가요?
- CORS를 겪고 직접 해결해 본 경험이 있으면 말해주세요
개발 방법론 🔥
- 소프트웨어 개발 주기(SDLC)에 대해 아나요?
- 폭포수 방법론이란 뭔가요?
- 애자일 방법론이란 뭔가요?
Cache 🔥
- 캐시란 무엇인가요?
CDN 🔥
- CDN이란 뭔가요?
테스트 🔥
- 테스트란 무엇인가요?
- 테스트의 예는 어떤 것들이 있나요?
- 테스트는 왜 해야 하나요?
- 유닛 테스트란 무엇인가요?
- 통합 테스트란 무엇인가요?
- E2E 테스트란 무엇인가요?
웹팩 🔥
- 웹팩이란?
- 모듈이란?
- 모듈 번들링이란?
- 웹팩이 등장한 이유 웹팩 사용 시에 이점
- 바벨이란?
- 웹팩의 주요 속성 4가지
타입과 인터페이스 🔥🔥🔥
- 이 글을 보시는 분들께
- 타입스크립트를 왜 쓰나요? (본인이 느낀점)
- 타입과 인터페이스의 차이를 아나요?
- 타입의 유틸리티 타입 중 알고 있는 것들에 대해 가볍게 설명해주세요
- 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?

② HTML/ CSS

HTML

DOCTYPE 🔥
- DOCTYPE에 대하여 설명하시오
- meta 태그에 대해서 알고 있나요?
- meta 태그의 요소에 대해서 아는대로 말해보세요
웹 표준 및 웹 접근성 🔥
- 웹 표준이란?
- HTML5에서 추가된 내용이 있나요?
- 웹 접근성이란?
- 웹 접근성에 맞는 마크업 예시 몇가지 말해보시오
- 시멘틱 태그란 무엇인가 왜 사용하는가
- 텍스트 관련 태그
- SEO란 무엇인가?
- Button 태그의 Default type은 무엇인가?
- Section 태그와 article 태그의 차이점
- 크로스 브라우징이란 무엇인가요?
그 외 🔥
- 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법
- UI란 무엇인지 설명하시오
SVG란 ? 🔥
- SVG 장점과 단점
- SVG 내부 도형에 대해 아는게 있나요?

CSS

display 🔥
- block
- inline
- inline-block
- none
position에 대하여 설명해보세요. 🔥
- static
- relative
- fixed
- absolute
float가 어떻게 작동하는가 🔥
Flexbox나 Grid 스펙을 사용해본 적이 있나요 ? 🔥
- flex 를 사용하는 이유가 무엇인가요?
- Grid를 사용하는 이유가 무엇인가요?
이미지 태그를 스타일로 대체하는 법 🔥
반응형 웹의 3요소 🔥🔥
CSS selector가 어떠한 원리로 동작하나요? 🔥
반응형웹과 적응형웹에 설명하시오 🔥
- 반응형 웹이란? 🔥
- 적응형 웹이란?
PX, EM에 대해 설명하시오 🔥🔥
- 절대단위
- 상대단위
- px
- em
- ex
- %
- pt
CSS 적용 우선순위 🔥🔥
CSS-in-JS에 대해서 설명해 주세요. 🔥
CSS 전처리기(CSS preprocessors)를 사용해보셨나요? 🔥
- 사용해봤다면 장점과 단점
padding과 margin의 차이가 무엇인가요? 🔥
- padding에 대하여
- margin에 대하여

③ JavaScript

프로그래밍 🔥
- 프로그래밍이란 뭐라고 생각하나요?
- 컴파일러는 뭐고 인터프리터는 뭔가요?
자바스크립트란 🔥
- 자바스크립트의 특징은 뭐가 있나요?
변수 🔥
- 변수란 무엇인가요?
- 식별자란 무엇인가요? 🔥
- 변수를 선언한다는 것은 어떤 것을 의미하나요?
- var 키워드는 뭔가요?
- 호이스팅이 뭔가요? 🔥🔥🔥🔥
- var 키워드의 문제점은 무엇이 있나요? 🔥🔥
- let 키워드는 var 키워드와 어떤 점이 다른가요? 🔥🔥🔥
- TDZ 🔥🔥🔥
- const 키워드는 어떤 특징이 있나요? 🔥🔥
- 식별자 네이밍 규칙은 어떤 것들이 있나요?
- 네이밍 컨벤션은 어떤 것들이 있나요?
- 리터럴이 뭔가요?
데이터 타입 🔥
- 데이터 타입의 종류는 어떤 것들이 있나요? 🔥
- 심벌 타입은 뭐죠?
- 데이터 타입은 왜 필요할까요? 🔥
- 정적 타이핑이 뭔가요?
- 동적 타이핑이 뭔가요?
타입변환과 단축 평가 🔥
- 명시적 타입 변환이 뭔가요?
- 명시적 타입 변환 함수를 예를 들어볼 수 있나요?
- 암묵적 타입 변환이 뭔가요?
- truthy / falsy 한 값이 뭔가요?
배열 🔥
- 자바스크립트의 배열은 자료구조의 배열과 같나요?
- 배열의 메서드는 어떤 종류가 있나요?
- 고차 함수에 대해서 아나요?
- forEach 메서드와 map메서드의 차이점에 대해 알고 있나요?
객체 리터럴 🔥
- 자바스크립트에서 객체란 뭘까요?
- 함수와 메서드의 차이점에 대해 알고 계신가요?
- 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?
원시 값과 객체 비교 🔥
- 동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유가 있을까요?
- 값에 의한 전달이 뭔가요?
- 참조에 의한 전달이 뭔가요?
함수 🔥
- 자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?
- 함수 선언문과 함수 표현식은 어떤 차이가 있나요?
- 즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요
스코프 🔥
- 스코프가 뭔가요? 🔥🔥🔥
- 스코프에는 어떤 종류가 있죠? 🔥🔥
- 렉시컬 스코프를 아나요? 안다면 렉시컬 스코프는 무엇을 의미하나요? 🔥
- 전역 변수로 변수를 선언하면 생기는 문제점은 무엇이 있을까요?
생성자 함수에 의한 객체 생성 🔥
- 생성자 함수가 뭔가요?
- 객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?
- 생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나요?
함수와 일급 객체 🔥
- 일급 객체가 뭔가요?
- 자바스크립트에서 함수가 일급 객체라면, 일급 객체로 뭘 할 수 있나요?
- 꼬리 질문) 함수형 프로그래밍이 뭔가요? 🔥🔥
- 꼬리 질문) 순수 함수가 뭔가요? 일반 함수와는 어떤 차이가 있죠? 🔥🔥
Map과 Set 그리고 Lookup Table
프로토타입 🔥
- 객체지향 프로그래밍은 무엇을 의미하나요? 🔥
- 객체지향 프로그래밍의 특징에 대해 말해볼 수 있나요? 🔥
- 자바스크립트는 객체지향 프로그래밍 언어인가요?
- 프로토타입이 뭔가요?
strict mode 🔥
- strict mode가 뭔가요?
- strict mode를 통해 무엇을 예방할 수 있죠?
빌트인 객체 🔥
- 빌트인 객체가 뭔가요? 종류는 어떤게 있죠?
- 래퍼 객체에 대해서 알고 있나요?
this 🔥
- this가 뭔가요? 🔥
- this 바인딩이란? 🔥
- this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?
실행 컨텍스트 🔥
- 실행 컨텍스트에 대해 말해보세요 🔥🔥
클로저 🔥
- 클로저에 대해서 아나요? 🔥🔥🔥
- 클로저를 사용하면 뭐가 좋죠? 🔥🔥
- 클로저를 어떻게 생성하나요? 🔥
클래스 🔥
- 자바스크립트에서 클래스가 생기기 전에는 어떤 방식으로 객체지향 패턴을 구현했나요?
- 그럼 생성자 함수와 클래스는 어떤 차이가 있나요?
- 클래스 정의
- 클래스의 상속
스프레드 문법 🔥
- spread 문법이 뭔가요?
- 어떤 상황에서 사용할 수 있죠?
구조 분해 할당 🔥
- 구조 분해 할당이 뭔가요?
- 구조 분해 할당은 크게 어떤 종류가 있나요?
브라우저 렌더링 과정 🔥
- 브라우저의 렌더링 과정에 대해 설명해보세요 🔥
- 브라우저의 렌더링 과정에 자바스크립트는 어떻게 동작하나요? 🔥
- <script></script> 태그를 <body></body> 태그 밑에 둬야하는 이유가 있을까요?
DOM 🔥
- DOM이 뭔가요?
- DOM을 구성하는 건 뭐가 있나요?
이벤트 🔥
- 마우스 이벤트 타입에는 뭐가 있나요? click 말고 클릭을 대체할 수 있는 이벤트가 있나요?
- 그 외에 알고 있는 대표적인 이벤트가 있나요?
- 이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나요?
- 이벤트 전파(propagation)에 대해서 알고 있나요?
- 이벤트 위임(delegation)에 대해서 알고있나요? 🔥
- e.preventDefault 에 대해 알고 있나요?
- e.stopPropagation
타이머 🔥
- 호출 스케쥴링이 무엇인가요?
- 타이머 함수에는 어떤 것들이 있나요?
- 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우에 할 수 있는 어떤 일을 통해 해결할 수 있나요?
- 디바운스에 대해서 알고 있나요?
- 쓰로틀에 대해서 알고 있나요?
비동기 프로그래밍 🔥
- 동기와 비동기의 차이점에 대해서 설명해줄 수 있나요? 🔥🔥
  - 한줄 요약
- 이벤트 루프와 태스크 큐에 대해서 알고 있나요? 🔥🔥🔥
- 마이크로태스크 큐에 대해서 알고 있나요? 🔥🔥
- 태스크 큐와 마이크로태스크 큐 중 어떤 것이 먼저 실행되나요? 🔥🔥
Ajax 🔥
- Ajax가 뭔가요 어떤 것을 담당하고 있죠?
- Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?
- JSON 이 뭔가요?
- JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?
- Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?
- XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🔥
REST API 🔥
- REST API가 뭔가요?
- REST API의 구성은 어떤 것이 있나요?
- REST API를 설계하는데 중요한 것이 있을까요?
- HTTP 요청 메서드에 대해서 아는대로 얘기해보세요
- HTTP 상태 코드를 아는대로 말해주세요 🔥
Promise 🔥
- 콜백이란 뭐라고 생각하나요? 🔥
- 프로미스가 뭔가요? 🔥
- 프로미스 생성 방법
- 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요? 🔥
- 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요? 🔥
제너레이터와 async await 🔥
- 제너레이터란 뭔가요? 일반 함수와는 어떤 차이가 있죠?
- 제너레이터의 구조
- async/await 가 뭔가요? 기존의 Promise와는 어떤 차이가 있죠? 🔥
- Promise와 async/await의 차이점 한 줄 요약 🔥
에러 🔥
- 에러처리를 왜 해야 하나요? 🔥
- 자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까요?
모듈 🔥
- 모듈이 뭔가요?
가비지 컬렉션 🔥
- 자바스크립트의 가바지 컬렉션에 대해 알고 있나요?

④ React

React 시작🔥
리액트는 라이브러리인가요 프레임워크 인가요?🔥
리액트를 사용하는 이유🔥🔥
virtual DOM에 대해서 아나요?🔥🔥
리액트의 렌더링에 대해 아나요?
리액트 파이버에 대해서 아나요?
리액트 파이버 트리
리액트 파이버와 DOM, Virtual DOM의 관계
렌더 단계와 커밋 단계에 대해 아나요?
React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 🔥
리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유가 무엇인가요 🔥
props와 state의 차이🔥
Props가 컴포넌트간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가 🔥
FLUX에 대해서 아나요? 🔥🔥
리덕스에 대해서 아나요? 🔥🔥
리덕스의 기본 원칙은? 🔥🔥
React에서 state의 불변성을 유지하라는 말이 있는데 이에 대해 설명해달라 🔥
리듀서 내부에서 불변성을 지키는 이유는? 전개 연산자의 단점을 해결할 수 있는 방법은 무엇인가 🔥
리액트 사용시에 부수효과로 인해 생기는 문제점이 있다면 🔥🔥
- 부수 효과를 일으키는 함수 (불순 함수)
- 부수 효과를 일으키지 않는 함수 (순수 함수)
- 요약
컴포넌트의 라이프 사이클 메서드 🔥🔥
- 이해
- 메서드 종류 🔥
Hooks의 종류 🔥🔥
- useState
- useEffect
- useReducer
- useMemo
- useCallback
- useRef
- 커스텀 Hooks
useMemo와 useCallback의 차이를 아나요 🔥🔥
리액트에서 setState는 비동기 동작인가요 동기 동작인가요? 🔥
setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요? 🔥
useLayoutEffect는 무엇인가요? 🔥
리액트의 성능개선 방법에 대해서 설명해주세요
컴포넌트에서 이벤트를 실행시키기 위해서는 어떻게 핸들링해야 하나요?🔥
SPA가 뭔가요?🔥
- SPA의 단점
SSR이 뭔가요?🔥
SEO가 뭔가요?🔥
- TTV, TTI
서버사이드 렌더링을 지원하기 위한 리액트 API를 알고 있나요 ?
하이드레이션에 대해 알고 있나요 🔥
Next의 렌더링 수행 방식 🔥
Next를 쓴 이유가 있나요 ? 🔥
Next를 구성하는 기본 설정 파일에 대해서 알고 있나요? 🔥
사전 렌더링을 위해 사용해 본 함수가 있나요 🔥
Suspense 🔥
- suspense가 뭔가요?
- suspense로 가능한 것은 어떤 것들이 있나요?
웹 성능 최적화
LCP가 뭔가요?
FCP가 뭔가요?
controlled pattern에 대해서 아나요?
uncontrolled pattern에 대해서 아나요?

⑤ 자료구조

자료구조란 무엇인가요 🔥
- 효율적으로 데이터를 관리해야 하는 이유 (예)
대표적인 자료구조는 어떤 것들이 있나요 🔥
- 선형 구조
- 비 선형 구조
리스트 🔥
큐 🔥
스택 🔥
링크드 리스트 🔥
해쉬 테이블 🔥
트리 🔥
힙 🔥
그래프 🔥

⓺ 알고리즘과 자료구조 v2

Frequency Counters
Multiple Pointers
Sliding Window
Divide and conquer
Recursion
Linear Search
Naive String Search
Binary Search
Bubble Sort
Selection Sort
Insertion Sort
Merge Sort
Quick Sort
Single Linked List
Dobule Linked List
Stack
Queue
Binary Search Tree
Breadth First Search
Depth First Search
Binary Heap
Priority Queue
Hash Table
graph
Dijkstra
Dynamic Programming