본문 바로가기

(3)
Which RENDERING strategy should we take on the Web? 🤔 Background As a part of React migration, I want to know what benefits we can take from SSR and CSR. Rendering Server rendering: generates the full HTML for a page in the server. 👍 A fast FP, FCP, and TTI 👍 Avoid waiting for CPU-bound JS processing time 👎 Generating pages on the server takes time, it results in a slower TTFB 👎 Client can't still avoid third-party JS processing time Content-heavy ..
브라우저의 작동원리 (3) (How browsers work) 다단계 순서에 따라 규칙 적용하기 스타일 객체는 모든 CSS 속성을 포함하고 있는데 어떤 규칙과도 일치하지 않는 일부 속성은 부모 요소의 스타일 객체로 부터 상속받는다. 그 외 다른 속성들은 기본 값으로 설정된다. 문제는 하나 이상의 속성이 정의될 때 시작되고 다단계 순서가 이 문제를 해결한다. 스타일 시트 다단계 순서 스타일 속성 선언은 여러 스타일 시트에서 나타날 수 있고 하나의 스타일 시트 안에서도 여러 번 나타날 수 있는데 이것은 규칙을 적용하는 순서가 매우 중요하다는 것을 의미한다. 이것을 "다단계(cascade)" 순서라고 한다. CSS2 명세에 따르면 다단계 순서는 다음과 같다. (우선순위가 낮음->높음.) 브라우저 선언 사용자 일반 선언 작성자 일반 선언 작성자 중요 선언 사용자 중요 선언..
브라우저의 작동 원리 (1) (How browser works) 브라우저의 주요 기능 사람마다 브라우저를 사용하는 용도는 다를 것이다. 하지만 브라우저가 하는 일은 같다. 사용자가 원하는 자원(HTML, PDF 등.)을 찾아서 보여주는 일을 하는 것이다. 예를 들어서 구글에서 '기리보이'를 검색한다고 가정해보자. 우리가 원하는 것은 무엇일까? 바로 '기리보이'에 대한 정보이다. 일단 사용자는 주소 표시줄에 www.google.com을 입력하고 엔터키를 누를 것이다. 그럼 어떻게 보여주는지는 모르겠지만 브라우저는 구글의 첫 화면을 우리에게 보여줄 것이다. 그리고나서 검색창에 '기리보이'를 입력하고 검색 버튼을 누르면 또 화면이 바뀐다. 주소창에 있는 URL 또한 바뀐다. 주소가 바뀌었다는건 구글 검색 버튼이 어떤 주소로 연결해주었기 때문이라고 짐작할 수 있다. 그런데 ..