수업 61~65일차
이번주는 배웠던거를 복습하는 차원으로 공부를 했고 이론보다는 실습 위주여서 한주를 통합하도록 하겠습니다~ 다음주에는 프로젝트..!
이론
- CSR: 초기 로딩은 느리지만, 사용자에게 좋은 사용 경험을 제공
SSR: SEO를 손쉽게 적용할 수 있음
SSG: SSR처럼 완성된 HTML을 받아오지만, 해당 HTML은 빌드 타임에 생성됨
next.js: React에 SSR 개념을 적용한 프레임워크
Code Splitting: 각 페이지에서 필요한 JS만 import할수 있도록 자동분리
배포: 사용자들이 생성된 프론트앱에 접근할수 있도록 하는것
Server Rendering: React, Vue, Angular 등 자바스크립트 프레임워크가 나이기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드
Client Side Rendering: Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여, 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 됨
Server Side Rendering: 서버에서 자바스크립트를 이용해 페이지를 미리빌드
웹 퍼포먼스: 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정
Time To First Byte: 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간
First Contentful Paint: 페이지에 진입하고부터, 브라우저가 어떤 DOM Content를 만들 때까지 걸리는 시간
Time To Interactive: 웹페이지 진입 후, 유저가 클릭, 스크릭, 인풋 등의 행위를 하기까지 걸리는 시간
React DOM Server: ReactDOMServer를 활용하여, 특정 React Component를 HTML로 빌드
renderToString: React Component를 HTMl로 변환함
CSS module: class,id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음
UI framework: 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음
CSS framework: 거대한 CSS 파일 하나를 가져오는 것
CSS-in-JS library: 따로 CSS 파일 만들것 없이 JSX파일 안에서 스타일링 까지 해결 가능함
javascript template literal: 문자열 안에서 JS표현식을 사용할수 있게 하는 문법
Styled Component를 이용하여 트랙카드, 탭, 검색창을 만들어 보며 UI제작 기술 숙련도를 증진합니다.
API호출을 하여 데이터를 가져오고, Styled Component를 이용하여 페이지네이션 UI를 만들어 목표한 UI를 완성합니다.
Next.js
Next.js 는 React 라이브러리의 프레임워크이다
공식 문서에서는 하이브리드 정적 및 서버 렌더링, TypeScript 지원, 스마트 번들링 등 개발하는데 필요한 많은 기능을 제공한다 한다
처음 Next.js 마주치는 입장으로써, 이미 React도 나름 잘 되있는게 아니었어? 라는 궁금증에 마주치기 마련이다.
우선, Next.js는 React의 프레임워크 인 만큼, HTML, CSS, JavaScript와 React에 대한 이해도는 필히 요구한다.
React이 어플리케이션을 만드는데 있어, 자유도가 높은 만큼, third-party tools 와 solution들은 흘러 넘친다. 다른 측면으로는, 바닥 부터 어플리케이션을 만들 때는 꽤나 많은 비용(시간)이 든다.
여기서 Next.js는 React어플리케이션을 만드는데 필요한 tooling 과 configuration을 제공하고, structure, feature, optimiztion 도 함께 제공한다.
Next.js 쓰는 이유
가장 큰 이유는 SEO(Search Engine Optimization)을 위한 SSR(Server-Side Rendering) 을 가능하게 하기 위해서이다.
SEO란 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다
SSR란 SEO를 최적화하는 렌더링 기법으로, 페이지를 이동할 때마다 새로운 페이지를 요청하고, 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답하는 것이다.
첫 렌더링된 HTML을 클라이언트에게 제공하기 때문에 초기로딩속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있다.
다만, 프로젝트의 복잡도가 증가하고, 페이지 이동시 화면이 깜빡 거리며, 서버 렌더링에 따른 부하가 발생한다.
CSR란 반대로 클라이언트에서 렌더링을 하는 방식으로, 첫 요청시 한페이지만 불러오게 된다(SPA). 그 후, 사용자의 행동에 필요한 부분만 읽기 때문에 더욱 빠른 인터렉션을 기대 할 수 있다. 즉, 필요한 부분만 리로딩 없이 서버로 부터 받아와서 화면을 갱신한다.
다만, 초기 구동속도가 느리며, 검색엔진 최적화가 어렵다.
위 개념을 본 뒤 아래 두 그림을 보자.
차이점은 간단하다. 유저가 인터렉티브하게 다룰 수 있는 어플리케이션이 등장하기 전에 정적인 HTML을 보여주는가? 아닌가? 에 따른 결과값이다. 쉽게 말해, 사용자는 모든 컨텐츠 및 기능이 로딩되기 전에, HTML을 보면서 더욱 나은 경험을 줄 수 있다. Pre-rendering을 통해 SSR과 CSR의 장점, 그리고 그 둘의 혼용을 활용할 수 있다.
그 이외의 장점?
많은 기능들을 개발자들에게 제공한다고 호언장담한 만큼, 다음과 같은 기능들을 제공한다.
직관적인 페이지 기반 라우팅 시스템
프로젝트 최 상단의 /page에서 컴포넌트를 export하면, 폴더명이 페이지의 route가 된다.
페이지간 빠르고 매끄러운 전환을 위한 client-side Navigation
<Link /> 컴포넌트를 통해 페이지간 빠르고 매끄러운 이동을 가능하게 한다. HTML의 <a /> 태그와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고, Link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동 할 수 있게 해준다.
Code Splitting
웹페이지가 처음 로딩될 때, JavaScript payload를 보내는 것이 아닌, 번들을 여러 조각으로 필요한 부분만 전송해주는 방식으로 어플리케이션의 로드 타임을 줄여준다.
