• 소개
• 중요도5:⭐️⭐️⭐️⭐️⭐️
• 중요도4:⭐️⭐️⭐️⭐️
• 중요도3:⭐️⭐️⭐️
• 중요도2:⭐️⭐️
• 중요도1:⭐️
• 기타질문:🌟

취업 준비를 하면서 알게된 프론트엔드 분야의 면접 질문들과 답을 중요도별로 용어 설명과 함께 정리하고 있습니다.
자세한 내용은 참고 링크를 확인하며 공부하시길 권장드립니다.

• 프론트엔드 개발자 기술면접 인터뷰 질문 모음
  
• 프론트엔드 면접 문제 은행

위의 두 링크를 참고해 중요도별로 먼저 정리한 뒤 기타 질문들과 답도 추가하려고 합니다.

개인적으로 정리한 내용이라 틀린 부분이 있을 수 있으니 발견시 PR과 이슈를 날려주시면 감사드리겠습니다!

프론트엔드 엔지니어를 꿈꾼다면 정확하게 알고 있어야 하는 것들, 하나라도 모르면 떨어진다고 봐도 무방합니다. 꼭 알고 들어갑시다.

• 브라우저의 렌더링 원리 - 브라우저의 렌더링 원리에 대해 설명해주세요.

• Reflow와 Repaint가 실행되는 시점 - Reflow와 Repaint가 실행되는 시점에 대해 말씀해주세요.

• 주소창에 google.com을 입력하면 일어나는 일 - 주소창에 google.com을 입력하면 일어나는 일에 대해 말씀해주세요.

• 호이스팅(hoisting)이란? - 호이스팅에 대해서 설명해주세요.

• 클로저(Closure)란? - 클로저에 대해서 설명해주세요.

• CSS에서 margin과 padding이란? - CSS에서 margin과 padding에 대해서 설명해주세요.

• CSS에서 position이란? - CSS에서 position을 어떻게 사용하는지 설명해주세요.

• REST API란? - REST API란 무엇인지 설명해주세요.

90% 이상을 알아야 하며 많이 대답한다고 좋은게 아니라 정확하게 대답해야 합니다. 본인이 프론트엔드 엔지니어라고 말하고 싶다면 필수적으로 알아야 합니다.

• this의 용법 - this의 용법에 대해 아는대로 설명해주세요.

• 브라우저 저장소의 차이점 - 브라우저 저장소의 차이점에 대해 설명해주세요. (LocalStorage,SessionStorage,Cookie)

• Restful API - Restful API에 대해 아는대로 설명해주세요. (GET, PUT, POST, PATCH, OPTION, DELETE)

• JavaScript는 어떤 언어일까? - JavaScript는 어떤 언어인가요?

• JavaScript에서 비동기적으로 코딩하기 - JavaScript에서 비동기적으로 코딩하는 법을 알려주세요.

• Event Loop - Event Loop에 대해 알고 있으신가요?

• 마이크로태스크 큐, 태스크 큐 - 마이크로태스크 큐와 태스크 큐에 대해서 말씀해주세요.

• 이벤트 전파 - 이벤트 버블링에 대해서 말씀해주세요.

• 타입스크립트란? - 타입 스크리트 사용해 본적이 있나요? 어떤지 말씀해주세요.

• 실행문맥(실행 컨텍스트) - 실행 문맥에 대해서 설명해주세요.

• SPA, CSR, SSR의 차이 - SPA, CSR, SSR의 차이에 대해 설명해주세요.

• null, undefined, undeclared, NaN - null, undefined, undeclared, NaN 에 대해 설명해주세요.

JavaScript 프레임워크, 플러그인, 그 외 사용법 등 중요한 질문입니다.

• HTML 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유 - HTML이 렌더링 중에 JavaScript가 실행되면 멈추는데 그 이유는 무엇일까요?

• require와 import의 차이점 - require와 import의 차이점에 대해 설명해주세요.

• var, let, const의 차이점 - var, let, const의 차이점에 대해 설명해주세요.

• sass(scss)의 장점 - SASS(SCSS)를 사용해본 적이 있나요? 기존 CSS와 비교할 때 어떤 면이 더 좋은가요?

• CORS에 대처하는 방법과 우회하는 방법 - CORS에 대처하는 방법과 우회하는 방법에 대해 설명해주세요.

• React의 라이프 사이클 - React의 라이프 사이클에 대해 설명해주세요.

• ES6에서 Arrow 함수를 언제, 왜 쓸까? - ES6에서 Arrow 함수를 언제 쓰나요? 왜 쓰나요?

가볍고 기본적인 질문입니다.

• [중요도2] CSS에는 Box-model이라는 것이 있습니다.이 때 width의 값을 차지하는 크기는 어떻게 될까요?

알면 가산점이나 모른다고 크게 등락에 영향은 없습니다.

• [중요도1] 스켈레톤 UI에 대해서 적용해본 적이 있나요?

• [기타질문]