SSR(Server-side Rendering)이란? 간단히 말하자면 제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법을 통칭하는 용어다. 웹 서비스는 결국 화면으로 보여줘야 하고 그걸 그려야 하는데, 클라이언트 단에서 그리냐 서버 단에서 그리냐의 차이가 있을 뿐이다. 이전 글에서 알아봤던 CSR은 웹 사이트 패러다임에 대단히 큰 변화를 가져왔지만 모든 기술에는 양면이 있다. 이제 CSR의 장단점을 조금 더 들춰볼 차례로, 그 특징을 좀 더 자세히 들여다보려면, 반대편에 있는 기술인 SSR이 어떻게 돌아가는 기술인지 간략하게 체크해볼 필요가 있다. CSR은 서버로부터 페이지 렌더링에 필요한 asset들을 받아 브라우저에서 렌더링하고, SSR은 서버에서 페이지를 렌더링하고 브라우저로 보내준다. ..

중요 렌더링 경로(Critical Rendering Path)란? Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다. CRP는 6단계를 거치며 각 단계는 다음과 같다. DOM 트리 만들기 CSSOM 트리 만들기 JavaScript 실행 Render 트리 만들기 레이아웃 생성하기 페인팅 그럼 렌더링(rendering)한다는 것은 무엇일까? 상태(state)를 변수로 받아 그 상태에 따른 화면(view)을 결과물로 출력하는 함수를 떠올려볼 수 있다. const render = (targetElement, state) => { const element = targetElement.cloneNode(true) // 변화를 바로 ..

웹 브라우저(web browser)란? 웹 브라우저란 웹에서 정보를 탐색하고 HTML 문서, 이미지 등 여러 콘텐츠를 우리에게 표현해주는 소프트웨어로 구글 크롬(Chrome), 애플의 사파리(Safari), 마이크로소프트 엣지(Microsoft Edge), 모질라 파이어폭스(Firefox) 등이 있다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다...