이 글은 기술 면접 준비를 위해 쓰는 글이므로 편하게 작성하겠다.
정적웹
사용자가 요청할 때 서버에서 이미 만들어져있는 리소스를 응답해 보여주는 웹 페이지입니다. 보통 회사 소개, 메뉴 소개 등 데이터의 변화가 크게 없는 곳에서 쓰입니다.
지정된 리소스를 응답하기 때문에 서버 간 통신이 동적 웹에 비해 적어 속도가 빠릅니다. 하지만 지정된 리소스를 응답 받기 때문에 한정적인 서비스를 보여줄 수 밖에 없습니다.
React, Vue로 웹 개발을 했다면 CSR 방식인데 정적웹으로 동작한다. 웹 서버로부터 정적 자원(리소스: html, css, js)를 응답 받고 클라이언트(브라우저)가 DB를 다루는 서버와 데이터를 주고받으며 수행한다. 클라이언트의 핵심 작업들은 웹서버에서 가져온 js가 담당한다.
동적웹
사용자가 요청할 때 서버에서 요청 정보에 맞는 리소스를 가공한 뒤 응답해서 보여주는 웹 페이지입니다. 같은 웹 페이일지라도 사용자마다 다른 내용의 웹 페이지를 볼 수 있습니다. 보통 홈페이지 게시판, 블로그 댓글 부분 등 사용자의 참여가 가능한 곳에서 쓰입니다.
다양한 요청에 따라 보여주기 때문에 서비스가 다양합니다. 하지만 사용자에게 응답하기 전 처리해야 할 작업이 있기 때문에 정적 웹에 비해 상대적으로 속도 느립니다.
SPA
싱글 페이지 애플리케이션의 약자로 최초 요청할 때 모든 리소스를 다 받아오고 이후 사용자가 페이지 이동 같은 요청을 할 때 필요한 부분만 서버로부터 응답 받아 클라이언트에서 랜더링하는 방식을 말합니다.
페이지의 필요한 부분만 업데이트하기 때문에 트래픽이 적고 페이지간 이동이 빠릅니다. 하지만 클라이언트에서 랜더링하기 때문에 검색엔진 최적화(SEO)가 어렵습니다.
SEO
검색엔진 최적화란 네이버, 구글 같은 검색 사이트에 검색했을 때 웹 페이지가 상위에 노출될 수 있도록 하는 작업을 말합니다. SPA 방식으로 페이지 제작했을 때 SEO가 어려운 이유는 필요한 부분만 업데이트 되기 때문에 페이지는 1개라고 인식해 검색되기 어렵습니다. 그래서 대안으로는 CSR이 아닌 SSR 방식으로 개발하는 방법이 있습니다.
CSR
클라이언트 사이드 랜더링이란 뜻으로 클라이언트에서 브라우저 랜더링하는 방식입니다. 최초 요청할 때 빈 HTML을 받아오고 필요한 모든 리소스를 받아 클라이언트에서 랜더링해 보여줍니다. 이후 사용자의 요청에 따라 필요한 부분만 응답 받아 클라이언트에서 랜더링해 보여줍니다.
검색엔진 최적화가 어렵고 최초 요청 시 모든 리소스를 받아오기 때문에 초기 로딩 속도가 느리다는 단점이 있지만 구동 후에는 필요한 부분만 응답 받아 업데이트 하기 때문에 훨씬 빠르게 동작합니다.
SSR
서버 사이드 랜더링이란 뜻으로 서버에서 브라우저 랜더링하는 방식입니다. 최초 요청할 때 서버에서 랜더링을 마친 HTML 파일을 클라이언트에게 전송하고 이미 랜더링된 페이지를 받기 때문에 즉시 웹 페이지를 볼 수 있습니다.
새로운 페이지로 이동할 때마다 서버에서 랜더링 후 페이지를 받아오기 때문에 CSR에 비해 속도가 느립니다. 하지만 초기 로딩 속도가 CSR에 비해 빠르고 검색엔진 최적화가 원활합니다.
DOM과 Virtual DOM
돔은 HTML 요소를 자바스크립트가 이용할 수 있게 트리 구조로 만든 객체 모델입니다. 브라우저에서 새로운 변화가 있을 때마다 돔을 직접 조작해 새로운 랜더 트리를 만들고 불필요한 랜더링 작업이 반복적으로 일어납니다. 이런 속도적인 이슈를 개선하기 위해 가상 돔이 나오게 됐습니다.
가상 돔은 실제로 돔을 수정하는 것이 아닌 추상화한 자바스크립트 객체를 구성하여 실제 돔의 가벼운 사본처럼 사용합니다.
리액트에서 가상 돔을 반영하는 절차는 데이터가 업데이트 되면 전체 UI를 가상 돔에 리랜더링합니다. 이전 가상 돔과 현재의 가상 돔끼리 내용을 비교하고 바뀐 부분만 실제 돔에 적용합니다.
실제 가상 돔을 통해 처리하는 것은 돔을 사용하는 것보다 빠르지 않다. 개발자가 작업을 쉽게 할 수 있도록 도와주는 것이지 더 빠른 동작을 제공하는 것은 아니다. 하지만 SPA 같은 비동기적 서비스를 효율적으로 관리할 수 있다. 따라서 최적화 작업을 제대로 해두면 돔을 직접 제어하는 것보다 훨씬 더 좋은 성능을 낼 수 있다.
