본문 바로가기

브라우저는 어떻게 동작하는가? (0) - 주절주절

저는 2020년 7월 말에 42서울에서 처음 C로 코딩을 시작했습니다.

지금까지 42서울에서 주어지는 과제에 맞게 C랑 C++만 공부를 했고, 이제 겨우 C랑 C++에 조금은 익숙해져 가던 중이었습니다.

그러던 중에 마지막 프로젝트에 사용되는 언어가 타입스크립트라는 것을 알게 됐습니다.

과제에서 백엔드는 NestJs, 데이터베이스는 PostgreSQL, 프론트엔드는 (뭐가 됐든)타입스크립트 프레임워크 사용을 요구했습니다.

제가 속한 팀은 프론트는 React 라이브러리를 사용하기로 했습니다.

 

html, css, javascript를 다뤄보지 않고 무작정 React 튜토리얼을 따라하다 보니 자꾸 렌더링이나 DOM, 가상 DOM처럼 처음 들어보는 단어가 많이 나오더군요. 그리고 C/C++을 생각하고 순서대로 자바스크립트 코드를 작성했는데 제가 생각한대로 동작을 하지 않기도 했습니다.

 

출처: https://d2.naver.com/helloworld/59361

 

그래서 모르는 것들을 이것저것 검색해봤습니다. DOM을 검색하니 렌더링이 나오고, 렌더링을 검색하니 브라우저의 기본 구조가 나왔습니다. 또 ,브라우저의 기본 구조 안에 자바스크립트 해석기도 포함되어 있었습니다. 제가 몰라서 고통받던 것들이 결국 브라우저의 동작 원리에 대한 이해가 전무했기 때문이었던 같아서.. 브라우저의 동작 원리에 대해 간단하게 정리하려고 합니다.