원티드 프리온보딩 챌린지 10월 사전과제

CSR(Client-Side-Rendering)이란?

• 서버에서 전체 페이지를 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식임

CSR의 장단점

장점

1. 리로딩 없이 서버로 부터 데이터를 받아서 화면을 갱신하게됨
2. 첫 요청할 때 한 페이지만 불러오면 됨

단점

1. 사용자가 첫 화면을 볼 때까지 시간이 오래걸릴 수 있음
2. SEO 적용이 쉽지 않음

SPA로 구성된 웹 앱에서 SSR이 필요한 이유?

SPA란?

• SinglePageApplication으로 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것.
• 이벤트가 일어나면 상호작용하기 위한 최소한의 요소만 변경이 일어남.

SSR이란?

• 클라이언트에서 모든 것을 처리하지 않고, 웹 사이트에서 접속하면 서버에서 필요한 데이터를 모두 가져와서 html 파일을 만들고 만들어진 html과 html파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보냄

필요한 이유

• 유저의 요청 전에 미리 페이지를 렌더링하면 처리 속도가 빨라질 수 있어서

3번

Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요.

yarn 설치하기

• 내 Mac에는 yarn이 설치되어있지 않아서 설치를 먼저해주었다.
  brew install yarn --ignore-dependencies
• 터미널에서 에러가나서 하라는 대로 해줬다.
  sudo xcodebuild -license accept
• 다시 설치 명령어를 입력하고
  yarn -v를 통해 설치를 확인해줬다.

next 프로젝트 만들기

yarn create next-app
yarn create next-app --typescript
를 이용해서 만든다.

next 실행하기

yarn run dev

실행되는 파일

• pages/index.js가 실행된다.

pages/index.js?

• 프로젝트 실행시 실행되는 루트페이지이다.
• 헤드, 메인, 푸터로 구성되어있다.