외부 라이브러리 없이 Node.js로 구현한 웹 브라우저 엔진 설계 기록

Context

웹 동작 원리에 대한 추상화 계층으로 인한 내부 메커니즘 이해 부족. 네트워크 전송 계층부터 렌더링 파이프라인까지의 전 과정을 직접 구현하여 동작 원리 규명 필요.

Technical Solution

• TCP 및 TLS 연결을 통한 raw 소켓 통신 및 HTTP GET 요청/응답 처리 로직 구현
• 문자 단위 HTML Tokenizer와 Stack 기반의 DOM Tree 생성 알고리즘 설계
• CSS 규칙-DOM 노드 매칭 및 요소별 좌표와 크기를 계산하는 Layout Engine 구축
• 부모에서 자식으로 너비(Width)를 전달하고 자식에서 부모로 높이(Height)를 전달하는 2-Pass Tree 순회 방식 채택
• Electron Canvas API를 활용한 텍스트 및 사각형 렌더링 기반의 Paint 시스템 구현
• eval() 함수를 통한 JavaScript 실행 환경 및 독립적 히스토리를 가진 멀티 탭 네비게이션 구조 설계

Key Takeaway

브라우저는 네트워크 통신, 파싱, 레이아웃, 페인팅으로 이어지는 일련의 데이터 파이프라인 집합체라는 설계 관점의 통찰 확보.