프론트엔드 면접 질문 & 답

이직 준비를 하면서 프론트엔드 면접에 필요한 질문과 그에 대한 답을 구글에 검색했을 때 중요하다고 나오는 것들과 내가 생각했을 때 중요하다고 생각되는 것들로 정리해봤다.
우선 질문리스트에 대해서 쭉 정리한 다음 보기 편하게 카테고리별로 질문에 대한 답을 적어놓으려 한다.

CS

• 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나?
• DNS에 대해 설명
• REST API에 대해 설명
• get, post 차이
• 객체 지향 프로그래밍(Object Oriented Programming)이란?
• 자료구조 stack과 queue에 대해 설명
• 프로세스와 스레드에 대해 설명
• MVC와 MVVM패턴의 차이
• SPA와 MPA의 차이
• Git에 대한 설명
• API에 대해 설명

JavaScript

• Promise와 Callback 차이
• 콜백 지옥을 해결하는 방법
• async, await 사용 방법
• Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이를 설명
• var, let, const 차이를 설명
• 함수 선언형과 함수 표현식의 차이에 대해 설명
• 이벤트 버블링과 캡처링에 대해 설명
• 클로저(Closure)에 대해 설명
• 실행 컨텍스트에 대해 설명
• 호이스팅(hoisting)에 대해 설명
• 데이터 타입에 대해 설명
• 자바스크립트에서 일어나는 데이터 형 변환에 대해 설명
• 프로토타입에 대해 설명
• 깊은 복사와 얕은 복사에 대해 설명
• 불변성을 유지하려면 어떻게 해야하는지
• 화살표 함수와 일반함수의 차이
• ES6에 추가된 문법
• map / foreach의 차이

React

• virtual DOM 가 무엇이고 작동원리에 대해 설명
• React를 사용하는 이유
• 제어 컴포넌트와 비제어 컴포넌트의 차이
• key props를 사용하는 이유
• props와 state의 차이는?
• 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명
• 생명 주기 메서드에 대해 설명
• 리액트에서 JSX문법이 어떻게 사용되는지
• useState를 사용하는 이유
• useMemo와 useCallback에 대해 설명
• react-query란?
• Context API에 대해 설명
• React 라이프사이클에 대한 설명

Redux

• Redux를 사용하는 이유
• Redux의 장단점에 대해 설명
• Context API와 Redux를 비교

Frontend

• 브라우저 렌더링 과정을 설명
• 브라우저는 어떻게 동작하는지
• Webpack, Babel, Polyfill에 대해 설명
• CSR과 SSR의 차이는 무엇인지?
• CORS는 무엇인지
• 쿠키와 세션, 웹스토리지에 대해 설명
• 이벤트 루프와 태스크 큐에 대해 설명
• 타입스크립트를 사용하는 이유
• 웹 사이트 성능 최적화 방법에 대한 설명

HTML, CSS

• Cascading에 관해서 설명
• CSS 애니메이션과 JS 애니메이션 차이에 대해 설명
• HTML이란?

*참고링크
1. https://xiubindev.tistory.com/119
2. https://velog.io/@kim_unknown_/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EB%AA%A8%EC%9D%8C
3. https://manon-kim.tistory.com/entry/%EB%A9%B4%EC%A0%91%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC