[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 13일차 기록

 

오늘의 학습

 

• NEXT.js에서 api 통신으로 fetch를 사용하는 이유
  • 리액트에서 많이 쓰이는 fetch와 axios는 모두 CSR 기반의 애플리케이션에서만 사용 가능한 Web API 임
  • 리액트의 fetch API를 기반으로 wrapping해서(알맞게 가공해서) NEXT.js에서도 사용가능한 fetch API를 만듦
  • 결론: NEXT.js의 fetch와 리액트의 fetch는 서로 다르다
• API Route Handler
  • NEXT.js 자체적으로 RESTful한 API 를 제공하기 위한 방법
  • api method와 path만으로 그 api 의 역할을 유추할 수 있게 개발한 것 == ‘restful 하게 개발했다’
• 무한스크롤 구현
  • 무한스크롤을 적용하는 페이지의 기준: 해당 페이지에 보이는 데이터가 하나의 종류일 때
  • npm 패키지 사용: react-intersection-observer
• on demand 방식의 캐시 삭제
  • revalidatePath (해당 path에 있는 모든 데이터 패칭의 캐시를 다 날려버림)
  • revalidateTag (지정해놓은 tag에 대해 직접 설정을 통해 캐시를 날려버릴 수 있음)
  • revalidateTag가 revalidatePath보다 안정적임
• NEXT로 블로그 만들기
  • write page 입력하기 구현

 

오늘 기록