Next.js에서 prefetch의 필요성Next.js는 동적 데이터도 빌드 시점에 미리 fetch해서 로딩 속도를 향상시킬 수 있다. (SSG)하지만 빌드 시점의 상태가 아닌 최신 상태를 받아야하면서도, 로딩 속도를 향상시키고 싶다면 prefetch 를 활용할 수 있다! json-server 옵션으로 user 목록을 json-server에서 로드해오는 fetch에 2초 딜레이를 준 상태다메인 페이지에서 사용자 목록을 prefetch 해두었기 때문에 other 페이지에서 사용자 목록을 로딩 없이 바로 확인할 수 있다!예제Query Provider 만들기하위 컴포넌트들이 queryClient에 접근할 수 있도록 Query Provider를 생성한다// src/components/providers/TQPro..
설치 및 임포트yarn add react-hook-form'use client'import { useForm } from 'react-hook-form';const { register, handleSubmit, formState } = useForm(); handleSubmitform의 onSubmit에 실행하고 싶은 동작을 handleSubmit의 인자로 넣어 준다const onSubmit = (value: FieldValues) => { // form 제출시 실행할 동작 console.log(value);};return ( ) registerinput 태그에 사용input 태그의 용도를 의미하는 id, 옵션을 넣어준다옵션 예시는 required (필수인지), pattern (정규식 검증이 ..
Parallel RoutesURL 세그먼트를 담당하는 폴더에 @를 붙여 여러 페이지 경로를 렌더링할 수 있게하는 기능아래 사진처럼 한 페이지에 두가지 페이지 요소를 띄우는 등의 작업을 할 수 있게 함대시보드나 소셜 사이트의 피드, 상품 상세 페이지 모달 띄우기 같은 보여줘야하는 정보량이 많은 동적인 섹션에 유용하게 사용할 수 있음 모달 실습1) (root)/@modal/page.tsx 생성const ModalPage = () => { return ( modal 영역 );};export default ModalPage; 2) layout의 props에 modal: React.ReactNode를 추가export default function Layo..
Next.js는 대부분의 영역에서 fetch 함수를 기반으로 캐싱을 한다!Next.js의 fetch는 브라우저 API가 아닌 Next.js에서 확장한 새로운 API다.그 중에서도 크게 두가지 포인트에서 캐싱을 진행하게 된다. Next.js의 두가지 캐싱 포인트Full Route Cache (build 시)- 빌드 시점에 페이지를 렌더링하고 그 결과를 캐싱하는 기능- 서버는 매 요청마다 페이지를 다시 렌더링할 필요 없이, 미리 생성된 HTML과 데이터를 빠르게 제공할 수 있어 페이지 로딩속도가 크게 향상됨- 서버에서 React의 API를 활용하여 렌더링 작업을 수행함- 기본적으로 Full Route Cache는 지속적이며, 사용자 요청에 의한 렌더링 결과가 캐싱되어 있음- 따라서 동일한 페이지에 대한 요청..
로그인 요청을 서버로 보내고 나서, 성공할 경우 user 정보를 관리하는 zustand store에 정보를 업데이트하기위해 zustand의 훅을 사용했다. 그런데 ESLint에서 아래와같은 오류가 떴다! ESLint: React Hook "useUserStore" is called in function "onSuccess" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".(react-hooks/ rules-of-hooks) 리액..
Next의 이미지 최적화Next는 자동으로 이미지 크기를 최적화해주는 이미지 컴포넌트(Image)를 제공한다. Image 태그의 기능1) 크기 최적화- 각 기기에 맞는 크기의 이미지를 자동으로 제공하고, WebP 및 AVIF와 같은 최신 이미지 형식을 사용// next.config.js 설정 추가module.exports = { images: { // ... formats: ['image/avif', 'image/webp'], },} 2) 시각적 안정성- 이미지가 로딩도리 때 레이아웃 이동을 자동으로 방지 3) 빠른 페이지 로드- 네이티브 브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됨- 블러업 플레이스 홀더를 옵션으로 사용 가능 4) 자산 유연성- 원격 서버에 저장된 이..