프론트엔드 개발자 (기술)면접 인터뷰 질문

🏋️프론트엔드 면접 질문

안녕하세요 오늘은 프론트엔드 개발자 (기술)면접 인터뷰 질문에 대해서 이야기를 해볼게요

👉1. 브라우저 렌더링 원리

브라우저 기본 구조

📌사진을 보듯이 브라우저의 기본구조는 사용자 인터페이스에서, 브라운저 엔진으로
그 다음에 '렌더링엔진'으로 연결됩니다. '렌더링엔진'의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일을 합니다.

'렌더링엔진'은 HTML, XML 문서와 이미지를 표시할 수 있고, 플러그인이나 브라우저 확장기능을 이용해 PDF 같은 다른 유형도 표시할 수 있습니다.

그리고 각 브라우저마다 사용하는 '렌더링엔진'이 다른데 파이어폭스는 게코(Gecko)엔진으로 사용하고,

사파리, 크롬은 웹킷(webkit)을 사용한다는 것도 알고 있으면 굉장히 좋습니다.

렌더링 엔진 동작
✅브라우저가 화면을 그리는 과정을 알아봅시다!

• 파싱 단계 : DOM 트리와 CSSOM 트리를 만듭니다.
• 렌더 트리 단계 : DOM과 CSSOM을 묶어서 렌더 트리를 만듭니다.
• 레이아웃 단계 : 렌더 트리단계에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 좌표에
  나타냅니다.
• 페인트 단계 : 레이아웃 단계를 통해 화면에 배치된 엘리먼트들에게 색을 입히고 레이어의 위치를 결정합니다.
  ("페인팅한다"라고 해요!)

👉2. 호이스팅에 대해서 설명

📌호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.[참고링크]👈

👉3. 클로저는 무엇인가, 원리와 왜 사용하는지 설명

📌참고에 링크를 참고하면 좋을것 같네요[참고링크]👈

👉4. 자바스크립트는 싱글스레드 기반의 언어이지만 실제로 자바스크립트가 사용되는
환경을 생각해보면 많은 작업이 동시에 처리되고 있는데 그 이유는 무엇일까?

자바스크립트 비동기 런타임 과정

다음은 자바스크립트가 실행될 때 각각의 요소들이 어떤 역할을 하는지 설명 입니다.

• Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
• Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실행
• Task Queue: Callback Queue라고도 하며 Web API에서 넘겨받은 Callback함수를 저장
• Event Loop: Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

📌일단 자바스크립트는 '이벤트루프'를 이용해서 비동기 방식으로 동시성을 지원합니다.
추가적으로 이벤트루프의 동시성이 동시에 일어나는 것이 아니라,

동시에 일어나는 것처럼 보이게 하는 것이라고 알고 있으면 좋습니다.[참고링크]

자바스크립트 동작원리[참조링크]

👉5. 브라우저 저장소에 대해서 차이점 설명(Localstorage, SessionStorage, Cookie)

📌하단에 내가 정리해 놓은 글을 보면 될것 같네요. 👇👇

[JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리