[개념] 클라이언트에서 서버까지 흐름

1. 웹 애플리케이션 구동의 큰 그림

Tiny Web Server 프로젝트를 할 때 당시에는 큰 그림을 그리지 못하고 구현에 급급했다. 그 때 공부했던 여러 용어들에 대해서도 마음에 와닿을 정도로 이해하지는 못했다.
이번에 정글 최종 프로젝트를 준비하면서 초기 세팅을 맡게 되었는데, 그 때 여러 자료를 찾아보다가 다시 Tiny Web Server 관련 자료를 겸사겸사 보게 되었다. 전보다 훨씬 잘 보인다는 느낌을 받았다. 그래서 한 번 정리를 해야겠다고 생각했다.

2. 클라이언트에서 서버까지 큰 그림

2-1. Client URL Request

• 브라우저 주소창에 URL을 적고 엔터치면, 브라우저가 해당 URL을 PARSING
• HTTP, HTTPS 둘 중에 하나를 통해 통신하게 되는데, HSTS의 경우 HTTPS 만을 통해 통신
• URL을 IP주소로 변환 : 브라우저의 로컬호스트 파일이나 브라우저 캐시에 URL이 있는 확인하고 없으면 DNS 서버에 요청해 URL을 IP로 변환

2-2. Router를 통해 서버 게이트웨이까지 이동

• IP주소를 서버로 요청
• 라우터의 라우팅 기능으로 서버에 도착

2-3. IP 주소 -> MAC 주소

• ARP를 통해 IP 논리 주소를 MAC 물리 주소로 변환해야 실질적인 통신이 가능하다.
• MAC 주소 즉 실질적인 주소가 있으니 수신부와 송신부 각각의 주소를 모두 알게 된 것이니 준비는 끝났다.

2-4. 3번 인사로 TCP 소켓 연결(three-way-handshake)

위의 그림은 three-way-handshake 전체 그림이다. 영어가 많아서 당황할 수 있는데 실제로 매우 귀여운 네이밍이라고 생각한다.

client와 server 모두 각각의 위치를 파악한 이후,
1. client에서 먼저 syn을 서버에 요청한다.(syn은 sync로 연결을 의미)
2. server는 ack과 syn을 client에 보낸다.(ack은 acknowlege로 인정을 의미, 즉 서버에서 client의 연결 요청을 받아들이고 자기도 연결 요청하는 것)
3. client에서 server의 ack를 syn하는 것으로 통신 연결이 완료된다.

쉽게 생각하면 인스타그램의 두 사람 간에 팔로우 요청하고 맞팔하는 느낌이다.

2-5. client에서 서버에 페이지 요청

• Server에서 Client로 페이지 관련 파일(HTML, CSS, Javascript)를 보내면 브라우저에서 로드하고 렌더링한다.

그렇다면 CSR, SSR 등을 대입해본다면?

- CSR

SPA이기 때문에 client의 페이지 요청 시, 서버가 줄 건 페이지 하나이다. 그래서 처음 받은 페이지 하나 가지고 브라우저에서만 사용자와 상호작용하는 것이다.

- SSR

서버에 여러 이미 세팅이 끝나 여러 페이지가 존재하고 사용자가 페이지를 넘기거나 특정 인터렉션이 있을 때마다 위의 과정을 통해 서버에서 HTML파일을 로드한다.

2-6. 브라우저 렌더링 과정

위의 그림은 브라우저에서 화면을 그리는 과정을 나타내고 있다.

1. HTML파일 로드 후, HTML 코드를 위에서 아래로 읽는다.
2. HML 코드 내에서 link tag를 읽어 외부 리소스를 로드한다. ex) CSS
3. HTML 코드 내에서 script tag를 읽는다. ex) JS, Image
   *스크립트 코드 해석 끝날때까지 렌더링을 멈춘다.
4. HTML은 DOM(HTML 요소 데이터)을 만든다.
5. CSS는 CSSOM(CSS 요소 데이터)을 만든다.
6. DOM과 CSSOM을 합쳐 Render Tree가 된다.
   7. Layout -> Painting -> Render의 과정을 차례대로 거치며 브라우저 렌더링 과정이 마무리된다.

Layout

• 배칭에서 조금 신경을 쓰면 프로그램의 성능을 높일 수 있다.

• 먼저 렌더링 시, Layout 관련 변화가 없으면 layout 과정은 생략된다. 하지만 관련 변화가 있을 시, 전체 ReRendering이 이루어진다.

• Layout과정은 CPU를 많이 먹기 때문에 줄일 수로 좋다.

• Layout을 줄이기 위한 CSS 속성으로는 left, top, right, bottom이 있다. → 이것으로 애니메이션 만들면 60fps 보장이 힘들다.
  ** 60fps : 1초당 60번 화면 노출에서 유저들은 부드럽다고 느낌.

• transform 위치 이동시키지만, Painting으로 분류되기 때문에 CPU 사용을 줄일 수 있다.

Paint

• 화면에 UI가 나타나는 단계
• 변경 사항이 없어도 무조건 다시 발생
• GPU를 많이 먹음

Render

• 화면에 다 그려짐

3. 느낀점

• 웹 개발자 지망자로서 클라이언트에서 서버까지의 얕게 나마 큰 그림을 알고 있다는 점에서 뿌듯하다.
• 정글 프로젝트가 끝나며 네트워크 공부를 시작해야겠다고 결심했다.
• 렌더링을 최적화할 수 있는 방법에 대해 고민하고 실무에 도입할 수 있는 웹 개발자가 되어야 겠다.

4. 참고 자료

웹 브라우저에서 서버까지의 흐름
조은 프론트엔드 강의