🪄 프론트엔드 면접 질문 스터디 - 1편. 브라우저의 동작원리

프론트엔드 개발자로 한층 더 성장도 하고 면접 대비도 한번에!

프론트엔드에 대한 개념 정리 및 면접을 같이 대비하기 위해 이 시리즈를 출간했다. 얇게만 알았던 개념, 동작원리, 놓치면 안되는 개념 등 모든 시리즈는 계속 정리해서 글을 작성할 것이다.

✔️ 브라우저의 동작 원리

브라우저란 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램입니다.

1. 브라우저에서 도메인이름(ex. www.naver.com)을 입력

2. 브라우저가 해당 IP주소를 얻기 위해 DNS 서버의 요청을 보내 주소 획득

3. IP주소를 받은 브라우저는 해당 요청을 IP주소와 일치하는 서버로 전달

웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메시지를 서버로 전송합니다. 서버와 전송되는 모든 데이터는 TCP/IP 연결을 통해서 전송합니다.

4. 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작

5. 웹 서버 또는 그 밖의 리소스는 DNS의 웹 페이지를 웹 브라우저로 반환하고, 웹 브라우저는 이 페이지를 표시

6. 웹 브라우저의 페이지 표시(중요 랜더링 경로)

1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
4. 렌더링 트리에서 layout과정을 거친다. ("어디에 위치할 지 계산)
   이때 CSS box model이 쓰이며 위치와 관련된 부분들이 계산된다.
5. Render Tree의 개별 노드를 화면에 페인트한다.(or 래스터화)

   랜더링의 자세한 내용은 프론트엔드 면접 스터디 - 2편. HTML, CSS, JAVASCRIPT의 브라우저 랜더링 원리 를 참조!

더 자세한 내용은 프론트엔드 로드맵 스터디 - 1편. 인터넷 부분을 참조!