1. 브라우저의 개념

프론트엔드 개발자라면 단순히 코드 개발을 하는 것을 뛰어넘어 브라우저가 어떻게 동작을 하는지, 어떻게 렌더링을 수행하는 지에 대해 아는 것이 굉장히 중요하다. 결국 작성한 코드는 브라우저라는 소프트웨어 프로그램 상에서 수행되기 때문이다. 아무리 잘 짜여진 코드라도 그 코드가 수행될 프로그램의 동작 방식에 대해 이해하지 못한다면, 코드가 의도한 대로 퍼포먼스를 내기 어렵다.

1-1) 웹 브라우저의 개념

• 웹 브라우저 === 웹 탐색기
• 웹 서버에서 쌍방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람하기 위한 GUI 기반의 소프트웨어 프로그램
• 웹 브라우저는 페이지를 다운로드하기 위해 HTTP를 통해 송수신함

1-2) 웹 브라우저의 주요 기능

• 사용자가 선택한 자원(resource)을 서버에 요청(request)하고 서버가 보내온 것(response)을 브라우저에 표시(rendering)하는 것
• 자원은 대개 HTML문서(PDF, 멀티미디어 등 다른 형태일 수 있음)
• 자원의 주소 : URI

2. 기본 구조

브라우저는 각기 그 모양이 조금씩 다르지만 모두 기본적인 구조를 가지고 있음

• 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 부분, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분