Next.js 공부 - Prettier, 프레임워크, Data Fetching

1. Prettier 설정은 아래의 2가지로 가능하다.
   1. Format on Save
   2. Default Formatter
2. Next.js 프레임워크 구조 살펴보기
   1. Pages: url과 매칭됨.
   2. Commerce 예제: VSCode 설정 (code / prettier...)
   3. 예제 특징 : Typescript / Turbo / 실행 명령
   4. 발견 : fast refresh / slug / api
3. Data Fetching
   1. Fetching = 가져오기
   2. 즉, 데이터 가져오기라는 뜻..!
   3. 시작부터 왜 Data Fetching 인가? : 화면에 무엇인가 그리려면 결국 어디선가  Data를 가져와야 함.
   4. Next.js가 제시하는 3+1가지 Data Fetching 방법
      1. SSR
      2. CSR
      3. SSG
      4. ISR
   5. SSR (Server Side Render)
      1. 서버가 그린다.
      2. 그린다 : 데이터를 가져와서 그린다.
      3. 서버가 그린다 : 서버가 데이터를 가져와서 그린다.
      4. SSR을 담당하는 함수 : getServerSideProps
   6. CSR (Client Side Render)
      1. 클라이언트가 그린다.
      2. 그린다 : 데이터를 가져와서 그린다.
      3. 클라이언트가 그린다 : 클라이언트가 데이터를 가져와서 그린다.
      4. CSR을 담당하는 함수 : 따로 없음. 기존 React 사용법과 동일함.
   7. SSG (Static-Site Generation)
      1. 정적인 사이트를 생성한다. (새로고침해도 시간이 바뀌지 않음.)
      2. 생성한다 : 데이터를 가져와서 그려둔다.
      3. 정적인 사이트를 생성한다. : 정적인 사이트를 데이터를 가져와서 그려둔다.
      4. SSG를 담당하는 함수 : getStaticProps (with getStaticPaths)
   8. ISR (Incremental Static Regeneration)
      1. 증분 정적 사이틀를 재생성한다.
      2. 재생성한다 : (특정 주기로) 데이터를 가져와서 다시 그려둔다.
      3. 증분 정적 사이트를 재생성한다 : (특정 주기로) 정적인 사이트를 데이터를 가져와서 다시 그려둔다.
      4. ISR을 담당하는 함수 : getStaticProps with revalidate
      5. ISR은 SSG와 다르게 새로고침을 하면 시간이 바뀐다. 단, 바로 바뀌는 것이 아니라 약간의 텀을 두고 시간이 변경되는 것을 볼 수 있다.
4. Data Fetching 최종 정리
   1. 페이지를 그리는 방식 : 데이터를 가져와서 그린다.
   2. 3 + 1 : SSR / CSR / SSG / ISR
   3. SSG : yarn dev 로는 SSR처럼 동작.
   4. 필요에 맞춰서 : SSR은 서버 부하 / SSG + ISR