참고

• https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/main/FrontEnd

1. 브라우저의 구조에 대해 설명해주세요.

브라우저는 크게 7개 정도의 파트들로 구성되어 있다.

사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, UI 백엔드,자바스크립트 해석기 그리고 자료 저장소.

1. 사용자 인터페이스

   주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

2. 브라우저 엔진

   사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

3. 렌더링 엔진

   요청한 콘텐츠를 표시한다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시하는 것이다.

   • 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 또한 플러그인이나 브라우저 확장 기능을 이용해 PDF 와 같은 다른 유형도 표시할 수 있다.
   • 파이어폭스와 크롬, 사파리는 두 종류의 렌더링 엔진으로 제작되었다.
     • 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용하고
     • 사파리와 크롬은 웹킷(Webkit) 엔진을 사용한다.
   • 렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송된다.

4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용되는데 이것은 플랫폼 독립적인 인터페이스로서 각 플랫폼 하부에서 실행된다.

5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행한다.

7. 자료 저장소 - HTML5부터 추가된 기능으로 웹사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조 계층이다. 기존의 웹환경의 쿠키와 비슷한 기능이고, WebStorage는 key-value로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다.

   • 저장소는 영구적인 LocalStorage와
   • 임시저장소인 SessionStorage를

   두고 있어 업무의 목적에 맞게 사용이 가능하다.

1-1 LocalStorage와 SessionStorage의 특징 및 차이점