📖 HTML(1) 사전 지식

HTML은 마크업 언어다. 프로그래밍 언어가 아닌 마크업 언어이기 때문에 종종 개발자들이 무시하는 글을 봤지만, HTML의 중요도도 상당하다고 생각한다.

컴퓨터가 HTML을 어떻게 인식하는지 간략하게 살펴보자.

🎨 브라우저의 붓터치

컴퓨터는 활성화(1)와 비활성화(0)를 기반으로 한 이진법 체제로 움직인다. 그렇다면 모니터에 출력되는 이 화면은 어떻게 그려지는 걸까?

이때 컴퓨터가 하는 일은 두 가지다. 명령에 따라 특정 색을 조합하고, 올바른 픽셀 위치에 그 색을 비추게 하는 것이다.

HTML과 CSS, 이 단순한 텍스트 덩어리들이 그런 행위를 명령하는 문서인 셈이다.

시나리오
네이버에 접속하는 과정을 예시로 브라우저의 렌더링 표현해보겠다.

1. HTTP 요청을 통해 관련 파일 수신

브라우저의 주소창에 www.naver.com이라고 입력하면 네이버 페이지가 요청된다.

굉장히 복잡하지만 간단하게 설명하자면 저 URL이 네이버 서버의 IP로 변환되어 요청을 보내고 필요한 파일들을 받는 과정이다.

2. HTML 해독

우리가 볼 땐 텍스트이지만 HTML 파일은 인코딩(보통 UTF-8) 규칙에 따라 이진수로 저장된 파일이다. 그렇다면 이 일련의 데이터들을 해독해주는 과정이 필요하다.

글자들을 조합해 의미를 가지는 단위(토큰)으로 만들어주기 위해 Lexer가 등장한다. Lexer를 통해 만들어진 토큰들을 기반으로 DOM 객체가 생성된다. 이때 DOM 생성자들이 작동하며 여닫는 태그를 통해 전체적인 트리 구조를 만든다.

3. 화면 렌더링

link 태그를 통해 css파일을 만나면 렌더링 엔진은 HTML 파싱을 잠시 멈추고 CSS 파일을 파싱한다. 이때 HTML 파싱에서 트리 구조가 생성된 것처럼 CSSOM이 생성되고 DOM과 CSSOM이 결합해 렌더 트리가 생성된다.

최종적으로 이 렌더 트리를 기반으로 우리가 보고 있는 화면이 생성되는 것이다.

많은 요소가 생략된 과정이지만 전체적으로 보면 이런 플로우를 따른다. 네트워크부터 렌더링의 세세한 과정까지 추후 나눠서 포스팅 할 예정이다. 😥

정보들의 저장은 어디?

렌더링 과정을 하드디스크를 통해 한다면 어마어마한 딜레이가 발생할 것이다. 그렇기 때문에 브라우저는 메모리(RAM)를 이용하는데, 크롬으로 예를 들면 새로운 탭이 열릴 때마다 그 탭에 메모리를 할당한다.

일부 동적 데이터(이미지, CSS, JS) 등은 빠르게 접근 가능한 브라우저 캐시라는 공간에 저장되기도 한다.

JS로 DOM에 접근하는 querySelector 등은 메모리에서 해당 DOM의 위치를 찾는 것이라고 할 수 있겠다.

👩‍💻 프론트엔드 개발자의 역할

서버로부터 데이터를 받아 그것을 렌더링하는 것. 이게 프론트엔드 개발자의 역할이다. 한 문장이지만 이 속에 담긴 의미는 가볍지 않다.

사용자들에게 노출되기 위한 검색엔진 최적화, 성능 개선을 통한 좋은 사용자 경험 제공, 유지 보수를 위한 적절한 디자인 패턴의 이해, 올바른 시맨틱 태그의 사용으로 웹 접근성 향상 등 다양한 작업이 프론트엔드 개발자의 역할이다.

쉽지 않은 길인 만큼 꾸준히 노력해야겠다.