MPA (Multiple Page Application)
- 요청할 때마다 이미 만들어진 새로운 페이지 반환하는 방식
- 이때 새로운 HTML 파일을 불러와 렌더링하므로 불러오는데 걸리는 시간만큼 화면 깜박임 발생
- 새로운 페이지 요청 시 마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링
- 페이지에서 필요 없는 부분을 포함하여 전체를 갱신하기 때문에 비효율적
SPA (Single Page Application)
- 하나의 페이지에서 모든 페이지를 이동하고 보여주는 방식
- 필요한 모든 정적 리소스를 로딩할 때 한번에 다운로드
- 페이지를 이동할 때 필요한 데이터만 JSON으로 받아 페이지 갱신
JSON으로 페이지를 갱신하는 방법
코드 텍스트에서 트리 구조의 데이터 스트럭쳐를 만들어낸다 →
AST어떻게 코드에서 AST를 가져오는 것일까? → 컴파일러의 역할
- 코드를 문법 단위로 잘라 토큰화(tokenizing) -
lexical analyzer
- 이를 문법에 맞게 트리 구조로 변환 -
syntax analyzer
- 불필요한 derivation 과정을 제외하고 필수적인 요소만 남김 -
AST
AST를 활용하여 코드 텍스트를 트리 구조의 데이터 스트럭쳐로 표현할 수 있다.
아래 링크를 통해 javascript 코드가 어떤 AST로 변환되는 지 확인할 수 있다.
AST를 이용해 서비스를 제공하는 실사례
바벨(babel)
js에서 사용하는
트랜스파일러 (컴파일러의 하위 집합)컴파일러가 high-level 언어를 low-level 언어로 변환시켜준다면, 트랜스파일러는
같은 수준의 언어로 변환ex) Typescript → Javascript, ES6 → ES5 등
바벨은 크게 3단계로 이루어진다. → parsing, transforming, generation
바벨에 자바스크립트 코드를 넘기면 AST를 활용해서 코드를 새롭게 변환해서 반환한다.
Prettier
자동 줄바꿈, 공백 제거 등 코드를 정해진 규칙에 따라 정리해주는 도구
prettier는 기존의 코드를 받아서 AST로 변환하여 이를 다듬은 코드 반환
SSR (Server Side Rendering)
서버에서 렌더링이 일어나는 방식
SPA가 등장하기 전엔 대부분의 웹 사이트는 MPA 방식으로 운영
서버에서 요청한 HTML파일을 렌더링을 마친 상태로 응답
초기 로딩시간이 상대적으로 짧음
CSR (Client Side Rendering)
SSR과 달리 렌더링이 클라이언트에서 일어나는 방식
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다.
클라이언트는 그것을 받아 렌더링을 시작한다.
자바스크립트 파일이 올 때까지 사용자는 아무 것도 볼 수 없음 !
React - Virtual DOM
CSR을 사용하는 대표적인 라이브러리 :
reactreact의 빠른 렌더링 속도는 virtual DOM 에서 나온다.
실제 DOM을 바꿔 새로 그리는 작업을 반복하면 느려진다.
이를 react에서는 변경사항만 리렌더링하기 위해 virtual DOM 방식을 채택하였다.
React는 성능 향상을 위해 실제 렌더링 된 UI를 내부적으로 JavaScript 객체로 따로 관리한다.
Vitual DOM은 변화를 감지하면 다음 순서로 재조정(Reconcilation) 과정을 통해 실제 DOM과 동기화한다.
- UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링한다. (실제 화면 상에 렌더링 X )
- 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다.
- 변경된 부분을 실제 DOM에 반영한다.
CSR vs SSR
[CSR]
변경되는 부분만 갱신하므로 빠름 -> 사용자 경험(UX) 향상.
초기 로딩시간이 느림. => 한번에 다운로드하기 때문
SEO (Search Engine Optimization) 문제. => HTML 파일은 비어있음
[SSR]
변경되지 않은 부분까지 새로 불러옴 -> 비효율적
SEO에 친화적.
상대적으로 첫 로딩이 짧은 편 => 서버에서 이미 렌더링한 결과를 가져오기 때문
Next. 14
CSR의 장점과 SSR의 장점만을 가져온 react 프레임워크
CSR의 문제점인 SEO → 부분적으로 SSR을 채택하면서 해결
UX를 향상시키는 빠른 페이지 전환 → 부분적으로 CSR을 채택하여 해결
vercel
SSR을 사용하는 next에 알맞게 구축되어 있어 next 배포에 용이
최근 next 14 버전이 나오면서 vercel로 배포하면 DB 까지 구축 가능하다고 한다.
vercel v0
vercel이 개발 중인 AI 프롬프트로 리엑트 컴포넌트를 만들 수 있는 서비스다.
아직 베타버전밖에 안나왔지만 서비스화된다면 프론트엔드의 생산성이 매우 높아질 것으로 예상된다. (이런게 벌써 개발되면 나는 뭐먹고 살지?)
