브라우저 렌더링 과정 및 REST API

브라우저는 서버와의 데이터 통신을 통해 렌더링을 수행

브라우저는 크게 4단계를 거쳐 랜더링을 수행
- 브라우저의 리소스 서버에 요청 후 응답
- HTML, CSS 파싱후 각각 트리 생성후 렌더 트리 생성
- 자바스크립트 파싱후 AST 생성후 실행
- 렌더 트리로 HTML를 브라우저에 페인팅

1. 사용자가 브라우저를 통해 웹 사이트에 접속
2. Resource Downloading : 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받음
3. HTML DOM Tree 구축 : 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리 형성
4. CSSOM Tree 구축 : 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM Tree 형성
5. Render Tree 구축 : 만든 DOM 트리와 CSSOM 트리를 결합
6. Rayout : 각 요소를 어디에 배치할 지 결정
7. Paint : 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작하는 과정

REST API란?

- REST는 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서,
- HTTP 프로토콜을 의도에 맞게 디자인하도록 유도
- 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고,
  REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미
- REST의 기본 원칙을 성실히 지킨 서비스 디자인을 'RESTful'이라고 표현

REST API는 자원(resource), 행위 (verb), 표현 (representations) 의 3가지 요소로 구성
REST에서 가장 중요한 기본적인 원칙은 두 가지다.

• URI는 리소스를 표현하는데 집중
• 행위에 대한 정의는 HTTP 요청 메소드를 통해 해야함

참고

• 책 모던 자바스크립트 Deep Dive
• https://github.com/FE-Lex-Kim/-TIL/blob/master/Javascript/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EB%A0%8C%EB%8D%94%EB%A7%81%20%EA%B3%BC%EC%A0%95.md