웹이 동작하는 전체적인 흐름

오늘은 웹이 동작하는 전체적인 흐름에 대해서 알아보도록 하겠다.

1. URL 입력
   사용자가 브라우저에 URL을 입력하거나 링크를 클릭한다.
   예: www.example.com

2. DNS 조회
   브라우저는 DNS(Domain Name System) 서버에 도메인 이름을 질의한다.
   DNS 서버는 도메인에 해당하는 IP 주소를 반환한다.
   예: www.example.com -> 93.184.216.34

3. HTTP 요청
   브라우저는 얻은 IP 주소로 웹 서버에 HTTP 요청을 보낸다.
   요청 방식에는 GET, POST, PUT, DELETE 등이 있다.

4. 서버 처리
   웹 서버는 요청을 받아 처리한다.
   필요한 경우 데이터베이스에서 정보를 조회한다.
   동적 컨텐츠의 경우 서버에서 HTML을 생성한다.

5. HTTP 응답
   서버는 처리 결과를 HTTP 응답으로 브라우저에 전송한다.
   HTML, CSS, JavaScript 등의 리소스가 포함된다.

6. 렌더링 과정
   브라우저는 받은 HTML을 파싱하여 DOM 트리를 생성한다.
   CSS를 처리하여 CSSOM을 생성한다.
   DOM과 CSSOM을 결합하여 렌더 트리를 만듭니다.
   레이아웃 계산 후 화면에 그린다.(Paint)

7. 최종 표시
   완성된 웹 페이지가 사용자에게 보여진다.
   JavaScript가 실행되어 동적인 기능이 작동된다.

위와 같은 과정을 통과해 웹이 동작하게 되는데 한 문장으로 정리하자면 이렇다.

사용자가 브라우저에 URL을 입력하면, 브라우저는 DNS 서버에 도메인 이름을 질의하여 IP 주소를 얻고, 해당 서버로 HTTP 요청을 보낸 후, 서버가 요청을 처리하여 HTML, CSS, JavaScript 등의 리소스를 포함한 HTTP 응답을 전송합니다. 브라우저는 받은 데이터를 파싱해 DOM, CSSOM을 생성하고, 이를 결합하여 렌더링 후 최종 웹 페이지를 화면에 표시하며, JavaScript로 동적 기능이 작동됩니다.