https://media.vlpt.us/images/jay/post/3a497590-d1b6-414c-9f3f-7b6c7eb18f6d/img.png

1일차

• 프론트엔드?
• 프로그램 설치

  npm install -g yarn
mkdir 폴더명
cd 폴더명
yarn init -y
yarn install --save react react-dom next
  

• 폴더명 의미
• JSX란?
• CSS-IN-JS
• Git 과 Github

2일차

Next.js?

• Next.js는 따로 설정을 해주지 않고도 SSR, SEO부터 TypeScript까지 생산에 필요한 많은 기능들을 제공하는 아주 강력한 React 프레임워크

Why Next.js

1. SSR (Server Side Rendering)

1. 서버는 렌더링할 준비가 된 HTML을 응답을 브라우저에게 보냅니다.
2. 브라우저는 페이지를 렌더링하고 이 때 페이지를 볼 수 있습니다.
3. 브라우저가 JS를 다운로드 받습니다.
4. 브라우저가 React를 실행합니다.
5. 페이지를 상호작용 할 수 있습니다.

3일차

API

RestAPI?

• uri의 형태와 method의 조합으로 특정리소스의 조회,생성,수정,삭제등을 이용하는 방식
  RestAPI단점
• axios 요청을할때마다 항상 method와 uri를 조합하는데 용량커짐을 발생할수도있다.

GraphQL?

• query를 보내서 원하는 결과물을 뽑아낼수도있다.
• RestAPI의 단점을 보완

Apollo를이용해 Node.js 서버 만들기

npm install apollo-server // 라이브러리 설치
yarn add graphql // 라이브러리 설치
npm install nodemon -D 
yarn add nodemon -D // souce code를 수정했을때 자동으로 서버를 새로고침을 하기위한 라이브러리(dev dependencies로 이용하기 위해 -D)

npm install graphql // graphql설치

혼자 생각해보는 은밀한.zip

SSR

• SSR에 대해서 이해하려면 이와 반대 개념인 CSR과
  싱글 페이지 애플리케이션 SPA입니다.

Page LifeCycle

• Client에서 Server로 최초의 요청을 보냅니다.
• Server는 응답을 보내고 Client에서 화면이 보입니다.
• Client에서 상호작용을 하기위한 요청을 Server에 보냅니다.
• Server는 이에 응답합니다.
• 페이지가 Reload 됩니다

1-1. CSR (Client Side Rendering) -- REACT

1. 서버에서 브라우저로 응답을 보냅니다.
2. 브라우저에서 JS를 다운로드 받습니다.
3. 브라우저가 React를 실행합니다.
4. 페이지가 보이고 상호작용 할 수 있습니다.

2-1 CSR의 장점

1. 컴포넌트 단위로 UI를 구성하기 때문에 재사용에 용이하고 중복을 줄일 수 있다.
2. 사용자가 페이지를 전환할 때 부드럽다.
3. 변경된 사항만 Server에 요청을 보내면 되기 때문에 비용적인 측면에서 효율적이다.

2-2 CSR의 단점

1. 초기 페이지 로딩이 오래걸린다.
2. SEO가 어렵다