(이제서야 정리해 보는) 브라우저에 URL을 입력하면 화면이 보여지는 과정

경력은 짧지만 나름 전문가라고 생각했지만, 누군가에게 설명을 하지 못하는 것에 자괴감을 느끼고

스스로 다시 한번 정리해 보고자 작성하는 '이제서야 정리해 보는' 시리즈

 

---

 

우리는 특정 사이트를 보기 위해 브라우저를 켜고 URL을 입력합니다

그러면 해당 서버에서 정의된 응답(화면)이 사용자에게 보여지게 되는데, 이러한 과정이 어떻게 진행되는지 간단히 정리하고자 합니다

 

 

브라우저에 https://google.com을 입력했을 때 일어나는 일들

1. 브라우저 주소창에 https://google.com을 입력
2. DNS 서버에서 google.com을 호스팅하는 IP를 조회
   (캐싱되어 있다면 캐싱된 정보를 이용)
3. 위 IP의 서버에 입력된 프로토콜과 포트에 요청을 보냄
4. 서버에서 구현한 로직에 따른 데이터를 응답
   [분류 전체보기] - (이제서야 정리해 보는) Spring이 Request를 처리하는 과정
5. 브라우저가 응답을 파싱 & 렌더링

 

 

---

 

1. 브라우저 주소창에 https://google.com을 입력

 

 

2. DNS 서버에서 google.com을 호스팅 하는 IP를 조회

cmd에서 nslookup google.com을 입력하면 해당 IP를 조회할 수 있습니다

Ex. nslookup google.com의 결과로 142.250.207.110을 얻을 수 있음 (2023.02.05 기준)

 

 

3. 위 IP의 서버에 입력된 프로토콜과 포트에 요청을 보냄

https://google.com을 기준으로 입력한 포트가 없으므로 https 기본 포트인 443으로 GET 요청합니다

Ex. 142.250.207.110:8443 -> 142.250.207.110의 8443 포트로 GET 요청

개발자도구 - 네트워크를 보면

142.250.207.110 → (http://)www.google.com → (https://)www.google.com 순으로 이동한 것을 볼 수 있습니다

브라우저의 주소창에 입력하면 기본적으로 GET Method로 요청을 보내기 때문에 요청 메서드가 GET으로 되어있는 것도 확인할 수 있습니다

상태 코드에 대해서는 나중에 다시 정리해야겠지만, 간단히말하자면 www.google.com으로 리다이렉트 된 것이라고 생각하면 되겠습니다

 

 

4. 서버에서 구현한 로직에 따른 데이터를 응답

요청에 따라 서버에서 구현한 로직을 처리한 후 처리 결과를 응답합니다

응답으로 외계어가 왔는데 이게 어떻게 우리에게 친숙한? 사이트로 보이게 되는 걸까요??

 

 

5. 브라우저가 응답을 파싱 & 렌더링

위 데이터는 브라우저가 해석할 수 있는 형식의 코드로 브라우저는 파싱하여 데이터에 맞는 화면을 렌더링 합니다

간단히 말하자면 어떤 요소를 어디에 위치시킬 건지 어떤 요소는 어떤 모양이고 어떤 색상인지 등등을 해석하고 어떤 요소를 클릭하면 어떤 동작을 할 건지를 해석합니다

이 과정에 대해서도 별개의 글로 다뤄야겠습니다