브라우저 렌더링 과정을 설명해 주세요.
프론트엔드 개발자 면접 단골 질문 중 하나다. 지금 저 질문에 대한 답변을 해보자면 다음과 같다.
네트워크를 통해서 다운받은 HTML 문서를 파싱하여 DOM 트리를, CSS 문서를 파싱하여 CSSOM 트리를 만든 후에 두 트리를 합쳐서 렌더 트리를 만든다. 이 렌더 트리에서 <head>처럼 화면에 보이지 않는 메타 태그나 display: none 속성을 가진 태그는 제외된다. 그리고 이 렌더 트리를 기반으로 레이아웃, 페인트, 컴포지트 단계를 거쳐 사용자에게 화면을 보여준다.
레이아웃 과정에서는 렌더 트리를 순회하면서 각 요소의 크기와 좌표를 계산한다.
페인트 과정에서는 각 요소를 어떤 순서로 그려야 할지 계산하고, 같이 묶일 요소들을 레이어 단위로 나눈다.
컴포지트 과정에서는 지금까지 계산한 정보들을 화면의 픽셀로 변환하는 래스터화(Rasterizing)가 일어나며, 뷰포트에 맞게 여러 레이어를 합성해서 사용자에게 보여준다.
브라우저 렌더링 과정과 관련된 정보들을 찾아보면 과거의 내용들과 최신의 내용이 뒤섞여 있어 확실치 않은 내용들도 있고, 나의 공부가 부족한 부분이 있어서 좀 더 보충이 필요해 보인다.
TDD
어제에 이어 TDD로 코드숨 과제를 진행하고 있다. 오늘 한 것 중에 테스트 관련해서 가장 기억에 남는 것은 mock 사용법이다. 특히 __mocks__라는 폴더를 이용하는 법, 어떤 모듈을 mocking 하는 방법들이 꽤 새로웠다. 이와 관련해서 코드숨 동기 중 한 분이 올려주신 링크가 있는데 많은 도움이 됐다.
https://www.daleseo.com/jest-mock-modules/
[Jest] jest.mock() 모듈 모킹
Engineering Blog by Dale Seo
www.daleseo.com
'TIL' 카테고리의 다른 글
| TIL - 20220630 (0) | 2022.07.01 |
|---|---|
| TIL - 20220629 (0) | 2022.06.30 |
| TIL - 20220627 (0) | 2022.06.27 |
| TIL - 20220624 (2) | 2022.06.25 |
| TIL - 20220623 (0) | 2022.06.24 |