HTTP, Rest API, Client, Server 도대체 뭐야?
이번주에는 Figma plugin 개발 사이드 프로젝트를 시작하기 앞서 여러 추상적인 개념들을 먼저 훑어보는 시간을 가지려고 한다.
플러그인 개발 다큐멘테이션을 보다가 Rest API라는 용어를 마주쳤는데 사실 몰라도 플러그인을 개발할 수 있긴 하지만 이번주에 같이 공부해보고자 한다.
참조:
1. Deep dive
2. 생활코딩 - HTTP
브라우저의 렌더링
브라우저는 HTML, CSS, JS로 작성된 텍스트 문서들을 파싱(해석)하여 브라우저에 렌더링 한다. 브라우저가 렌더링을 하는 과정은 다음과 같다.
- 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다.
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM를 생성하고 이들을 결합하여 렌더 트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 Abstract Syntax Tree 를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있고, 변경된 DOM, CSSOM는 다시 렌더 트리로 결합된다.
- 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.
브라우저
브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답 받아 브라우저에 시각적으로 렌더하는것이다.
요청 방법?
서버에 요청을 전송하기 위해 브라우저는 주소창을 제공한다. 반드시 브라우저의 주소창을 통해 서버에게 정적 파일만을 요청할 수 있는것은 아니다.
HTTP란?
웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)이다. 2015년 HTTP/2가 발표되었다. 2.0의 경우 다중 요청/응답이 가능해 페이지 로드속도가 1.0보다 50% 정도 빠르다고 알려져 있다.
HTTP - 요청/응답 메세지
개발자 도구의 Network 패널에서 각 파일이 서버에 요청한 내용과 서버가 응답한 내용을 확인할 수 있다.
파싱
브라우저의 요청에 의해 서버가 응답한 HTML,CSS,JS 등의 문서를 브라우저가 이해할 수 있는 자료구조로 변환하는 작업
- HTML 파싱과 DOM 생성
- CSS 파싱과 CSSOM 생성
- 렌더 트리 생성
- 자바스크립트 파싱과 실행
- 리플로우와 리페인트
script 태그의 async/defer 어트리뷰트
브라우저는 HTML 파일을 파싱하는 중에 CSS 또는 script 태그를 만나면 HTML 파싱을 멈추고 CSS나 Javascript를 파싱하기 시작한다.
즉, 브라우저는 동기적으로 (코드의 위에서 아래 방향으로) 파싱하고 실행한다.
우리가 script 태그를 바디의 가장 아래에 위치시키는 이유가 이런 이유때문이다.
만일 script 태그를 body 보다 상단에 위치시켰을 경우
- DOM이 완성되지 않은 상태로 js에서 DOM을 조작하면 에러를 발생시킬 수 있다.
- HTML 파싱중에 자바스크립트를 파싱함으로 인해 렌더링에 지장이 가 페이지 로딩 시간에 영향을 줄 수 있다.
이러한 자바스크립트 파싱에 의해 DOM 생성이 blocking되는 문제를 해결하기 위해 HTML5부터 script 태그에 async와 defer 어트리뷰트가 추가되었다.
<script async src="extern.js"></script>
<script defer src="extern.js"></script>
async, defer 어트리뷰트를 사용하면 HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.
