2023-03-27 월요일

✏️ 무엇을 배웠나

---

1. 브라우저가 페이지를 렌더링하는 과정

브라우저는 HTML 파일을 받아 여러 단계를 거쳐 웹페이지를 렌더링한다.

Parsing

서버에서 받은 HTML 파일을 토큰화해서 DOM을, CSS 파일을 분석해 CSSOM을 생성한다. DOM과 CSSOM은 이 단계에서 렌더 트리로 합쳐지며 렌더 트리는 페이지의 최종 레이아웃을 나타내는 골자가 된다.

Layout

렌더 트리가 만들어지면 브라우저는 CSS 규칙에 따라 페이지에 있는 여러 요소의 레이아웃을 계산한다. 이때 렌더 트리에 있는 노드(요소)의 사이즈와 위치가 결정된다. 뒤늦게 들어오는 CSS 규칙이 있을 수 있고 이 때문에 레이아웃이 한 번 더 일어날 수 있는데 이것을 리플로우라고 한다.

Paint

노드의 사이즈와 위치 계산이 끝나면(레이아웃) 계산을 값을 가지고 있다가 화면에 그려준다. 각 요소를 실제 화면의 픽셀로 변환하는데 텍스트, 색, 보더, 그림자, 버튼 등 모든 시각적인 부분을 화면에 그리는 단계다.

2. Restful API란?

Restful API는 클라이언트가 서버와 통신할 때 HTTP 프로토콜을 사용하는 웹 기반 API를 말한다. 표준화된 프로토콜을 사용하기 때문에 다른 종류의 클라이언트(모바일, PC 등)을 모두 커버할 수 있어서 효율적이다.

Restful API에서 사용하는 HTTP 메서드

• GET : 서버에 데이터를 달라고 요청
• POST : 서버에 데이터를 생성하라고 요청
• PUT : 서버에 있는 기존 데이터를 업데이트하라고 요청
• DELETE : 서버에 있는 데이터를 삭제하라고 요청
• PATCH : 서버에 있는 기존 데이터를 일부분 업데이트하라고 요청
• HEAD : 서버에서 데이터 헤더만 달라고 요청 (단순히 메타데이터만 알고 싶을 때)
• OPTIONS : 서버에서 사용할 수 있는 HTTP 메서드를 알려달라고 요청

왜 Restful API가 나왔나?

이전에는 클라이언트와 서버가 함수 및 매개 변수가 포함된 메시지를 주고받으면서 통신했는데 이를 RPC 모델이라고 한다.

이게 코드가 복잡해지고 성능도 저하시켰고 통신 프로토콜이 제각각이어서 여러 클라이언트를 처리하는 데 비효율적이었다.

---

출처 : https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work