[CS] 웹 브라우저 동작 원리 (1)
[CS] 웹 브라우저 동작 원리(1)
그동안 웹 개발을 공부하고 프로젝트를 진행하면서, 필요한 기능을 구현하고 동작시키는 것에 그치지 않고 조금 더 효율적이고 최적화된 코드들을 작성해보고 싶어졌습니다.
그러기 위해서 웹이나 브라우저의 구동 방식 등 기초적인 지식을 차근차근 공부해 보면 좋겠다는 생각이 들었는데요!
이번 포스팅에서는 웹 브라우저 동작 원리 및 브라우저가 웹 페이지를 어떻게 표현하는지에 대해 공부한 내용들을 일부 정리해보겠습니다.
웹 페이지 로드 과정
아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다.
W3C Navigation Timing Level 2 Specification
https://www.w3.org/TR/navigation-timing-2/#processing-model
Prompt for unload
웹 브라우저 내 현재 문서에서 다른 문서로 벗어나는(이동하는) 단계입니다.
해당 단계에서는 window: beforeunload 이벤트를 적용할 수 있습니다.
beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누를 경우 브라우저는 새로운 페이지로 탐색하고, 취소할 경우 탐색을 취소하고 현재 페이지에 머무릅니다.
window: beforeunload Event
https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event
Redirect
브라우저의 URL 요청에 대해, 서버에서 다른 URL로 요청할 것을 지시하는 것을 말합니다.
예를 들어, 브라우저에서 A 라는 URL을 웹 서버에 요청했을때 서버는 B 로 재요청할 것을 지시할 수 있습니다.
[1]www.jeewonscript.tistory.com/pageA 요청
브라우저 ————> 서버
[2]www.jeewonscript.tistory.com/pageB 로 이동할 것을 지시
브라우저 <———— 서버
[3]www.jeewonscript.tistory.com/pageB 재요청
브라우저 ————> 서버
Redirect 는 HTTP 표준으로 정의되어 있습니다.
최초 요청을 받은 웹서버는 HTTP 응답 상태코드로 302를 보내게 되는데, 헤더필드 내 Location에 Redirect 되어야할 URL 주소를 반환합니다.
AppCache
서버에서 데이터를 불러오기 전 저장된 데이터가 있는지 확인하는 단계입니다.
사용자가 앱을 실행하거나 웹사이트를 처음으로 방문한 후, 다음번의 재방문시 빠르게 정보를 수집하거나 실행할 수 있도록 일부 임시 저장된 데이터가 캐시데이터입니다.
DNS
Domain Name System의 약자이며 인터넷 전화번호부입니다.
DNS는 사람이 읽을 수 있는 도메인 이름( ex : www.jeewonscript.tistory.com )을 머신이 읽을 수 있는 IP 주소( ex : 123.0.4.56 )로 변환하기 때문에, 사람이 192.168.1.1( IPv4 )과 같은 IP 주소 또는 2400:cb00:2048:1::c629:d7a2( IPv6 )처럼 영문과 숫자로 된 복잡한 IP 주소를 기억할 필요가 없습니다.
DNS
https://aws.amazon.com/ko/route53/what-is-dns/
https://www.cloudflare.com/ko-kr/learning/dns/what-is-dns/
TCP
전송 제어 프로토콜(Transmission Control Protocol)로 인터넷상에서 데이터를 메세지형태로 보내기 위해 IP와 함께 사용하는 프로토콜(규약)입니다. 일반적으로 TCP와 IP를 함께 사용하는데, IP가 데이터의 배달을 처리한다면 TCP는 *패킷을 추적하고 관리합니다.
TCP는 클라이언트와 서버가 연결된 상태에서 데이터를 주고받는 연결 지향 프로토콜로 인터넷 환경에서 기본으로 사용합니다.
*패킷 : 정보 기술에서 패킷 방식의 컴퓨터 네트워크가 전달하는 데이터의 형식화 된 블록을 나타내며, 컴퓨터 간 데이터를 주고 받을 때 네트워크를 통해 전송되는 데이터 조각을 패킷이라고 합니다.
TCP
https://ko.wikipedia.org/wiki/%EC%A0%84%EC%86%A1_%EC%A0%9C%EC%96%B4_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C
https://mangkyu.tistory.com/15
https://ko.wikipedia.org/wiki/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC_%ED%8C%A8%ED%82%B7
Request & Response
Request와 Response는 네트워크의 기본 지식일뿐만 아니라 웹 프론트엔드 개발에서도 필수적으로 알아야만 하죠.
서버에 필요한 데이터를 요청하고 결과를 응답받아야만 원하는 외부 데이터를 화면에 나타내줄 수 있기 때문입니다.
HTTP 프로토콜은 일반적으로 위에서 언급한 TCP/IP 통신 위에서 동작합니다.
그런데 HTTP 프로토콜로 데이터를 주고받기 위해서는 아래와 같이 브라우저와 서버 사이에서 요청(Request)을 보내고 응답(Response)을 받아야 합니다.
Request는 클라이언트에서 서버로 전송하는 메시지입니다.GET, POST, PUT, DELETE 등과 같은 메서드를 가지고 있으며, 이러한 메서드로 서버에 존재하는 자원에 대한 요청, 생성, 변경, 삭제 등의 동작을 요청합니다.
또한 이러한 메서드들과 함께 주로 URL 또는 프로토콜, 포트, 도메인의 절대경로 등의 타겟을 요청하게 됩니다.
Response는 클라이언트의 요청에 대해 서버가 보내는 응답 정보입니다. 상태 코드와 데이터를 담은 Body를 함께 보내게 되는데요.
이 때 오는 상태 코드에 따라서 프론트엔드에서 처리해야하는 동작이나 에러처리가 달라집니다.
주요 상태 코드는 대략적으로 다음과 같습니다.
- 2xx : 성공
200번대는 대부분 성공을 의미합니다. 200번은 GET 요청에 대한 성공을 의미하며, 다른 200번대의 상태 코드는 추가적인 상태를 알려주거나 일부 데이터를 반환하기도 합니다. - 3xx : 리다이렉션
300번대는 리다이렉션을 주로 나타내며, 위에서 언급한 것처럼 새로운 URL에 대한 요청을 유도합니다. - 4xx : 클라이언트 에러
400번대는 클라이언트 에러입니다. 주로 유효하지 않은 자원을 요청하거나, 잘못된 요청에 대해 응답하는 상태 코드들입니다. - 5xx : 서버 에러
500번대는 서버 단에서 오류가 난 경우가 대부분입니다.
HTTP Request/Response
https://developer.mozilla.org/ko/docs/Web/HTTP/Messages
https://joshua1988.github.io/web-development/http-part1/#http-request--http-response
여기까지가 서버 조회 후, 자원들을 요청하고 응답받아 리소스를 로딩한 단계입니다!
이렇게 웹 페이지의 리소스를 로드하기까지의 각 단계를 간단히 살펴보았는데요. 생각보다 알아야 할 것도 많고 복잡한 과정들이었다고 생각했는데, 아직 데이터를 받아오기만 했어요... 역시 공부는 쉬운게 아니었습니다ㅋ
이후의 Processing과 Load 단계는 다음 포스팅에서 작성하도록 하겠습니다 ㅎㅎ