DIL: 모던 리액트 딥 다이브, 4주차-3

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부
코드샌박: 링크

---

DIL-week4-3_2024-03-27

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ----------- | | 4주차 | 4, 8장 | SSR과 ESlint, 테스트 라이브러리 | 311p~314p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시20분~10시반, 11시반~12시반

---

Next.js 톺아보기

Data Fetching

getStaticPaths와 getStaticProps

• 정적으로 결정된 페이지
• CMS(Contents Management System) 콘텐츠 관리 시스템, 블로그, 게시판
• 정적인 HTML 페이지를 만든다. 어디서? 서버에서
  • next build 시, html과 json 준비

| 함수 | 기능 | 참고 | | -------------- | ----------------------------------------------- | ---------------------------------------------------------- | | getStaticPaths | 접근 가능한 주소를 배열로 반환 | 그 외의 페이지는 404 | | getStaticProps | 접근 가능한 주소로 요청이 왔을 때, 반환할 props | params를 기준으로 props로 전달할 요청/응답을 서버에서 처리 |

폴더 구조 예시

| 폴더 | url | | ---------------------- | ------------------------------------------------- | | /[year]/[…slugs] | /2024/03/react_week4-3 | | /pages/[id] | /pages/11 | | /tags/[tag]/pages/[id] | /tags/javascript/pages/1 /tags/react/pages/1 |

• paths에 미리 빌드할 paths 기재
• fallback: true
  • fallback 컴포넌트 보여주기
• blocking
  • 로딩x 빌드 완료까지 사용자 대기

getServerSideProps 비교 -> 내일 이어서

| 함수 | 기능 | 참고 | 빌드 시 생성 | | ------------------ | ----------------------------------------------- | ---------------------------------------------------------- | ------------ | | getStaticPaths | 접근 가능한 주소를 배열로 반환 | 그 외의 페이지는 404 | html | | getStaticProps | 접근 가능한 주소로 요청이 왔을 때, 반환할 props | params를 기준으로 props로 전달할 요청/응답을 서버에서 처리 | json | | getServerSideProps | 서버에서 실행되는 함수 | 페이지 진입 전 무조건 실행 | js |