3. 렌더링 기본 동작
1. 클라이언트의 요청(Request)
사용자(Client)가 브라우저를 통해 특정 웹 페이지에 대한 접근 요청을 보내면 서버에서는 HTML 문서(document)를 binary stream format(보통 텍스트 파일) 형태로 응답함
응답 헤더(Response header)에는 아래의 정보가 담겨있음
→ Content-type : text/html;charset=UTF-8
text/html
브라우저에게 이 컨텐츠는 HTML 문서라고 설명
charset=UTF-8
이 문서는 UTF-8 방식으로 인코딩 되었다고 설명
서버는 HTML 페이지 외에도 이미지, 동영상, 텍스트 파일 등 다른 컨텐츠들도 응답할 수 있기 때문에 헤더에 담긴 정보를 기반으로 해당 컨텐츠의 타입이 무엇인지에 따라 목적에 맞게 변환(Parsing) 처리를 수행할 수 있음
따라서 이러한 헤더(header) 정보가 없으면 브라우저는 각 컨텐츠를 어떻게 처리하고 렌더링할지 이해할 수 없게 되고,
반대로 이러한 정보가 잘 전달될 경우, 브라우저는 각 파일의 타입에 맞는 컨텐츠를 읽어서 사용자에게 완성된 형태로 전달해줄 수 있게됨
2. 브라우저가 읽을 수 있는 형태로 변환(Parsing)
브라우저는 이 정보를 토대로 binary format을 읽을 수 있는 텍스트 형태로 변환함
ex.
0101110111111101..
↓
"<html><head>...</head><body><div class="container"><h1>Hello World</h1>...</body></html>"
curl http://example.com -o response.html
xxd response.html | head -n 10
# 실행 결과
# 00000000: 3c21 646f 6374 7970 6520 6874 6d6c 3e0a <!doctype html>.
# 00000010: 3c68 746d 6c3e 0a3c 6865 6164 3e0a 2020 <html>.<head>.
# 00000020: 2020 3c74 6974 6c65 3e45 7861 6d70 6c65 <title>Example
# 00000030: 2044 6f6d 6169 6e3c 2f74 6974 6c65 3e0a Domain</title>.
# 3c = <, 68 = h, 74 = t, 6d = m, 6c = l그 후 AST(Abstract Syntax Tree, 추상 문법 트리), DOM, CSSOM(CSS Object Model), Render Tree 등 추가적인 과정을 통해 페이지 렌더링을 수행함
3. 사용자에게 응답 결과 페이지 출력
렌더링 작업이 모두 완료될 경우 아래와 같이 사용자가 이해할 수 있는 GUI 기반의 페이지로 결과가 제공됨
