코딩이야기/Next.js 공부3 [React] useFormStatus를 사용한 pending 상태 추적 useFormStatus란?React 18에서 도입된 서버 컴포넌트에서 비동기 폼 처리 상태를 관리하는 데 사용폼 제출 중, 폼 제출이 완료되었을 때 등의 상태를 추적useFormStatus 훅은 자신이 위치한 컴포넌트가 폼의 자식이 되어야 하며, 부모 폼의 상태를 감지할 수 있어야 합니다. Button 컴포넌트에 적용export default function Button({ large = false, //기본값 onClick, type, text, ...rest}: ButtonProps) { const { pending } = useFormStatus(); //useFormStatus를 이용하여 부모 form의 pending상태를 알아냄 //useFormStatus는 form의 자식만 쓸.. 2024. 9. 9. [Next.js] AWS S3 업로드 이미지 최적화를 해보자! (feat. sharp) 이미지 최적화란?이미지 최적화는 웹사이트의 성능과 속도를 향상시키기 위해 품질을 손상시키지 않으면서 이미지의 파일 크기를 줄이는 프로세스입니다. 이 프로세스에는 크기를 최소화하면서 최상의 형식, 크기, 해상도 및 품질로 이미지를 제공하는 것을 목표로 하는 여러 기술과 도구가 포함됩니다.즉, 품질을 손상시키지 않으면서 크기를 최소화하여 최적화한다는 것이죠. 이미지 최적화를 해야되는 이유?1. 로딩 속도 개선 최적화된 이미지는 더 빠르게 로드되어 더 원활한 탐색 환경을 제공합니다.2. SEO 우선순위 향상 검색 엔진은 빠르게 로딩되는 웹사이트를 우선시합니다. 최적화된 이미지는 로드 시간을 단축하여 검색 엔진 순위를 향상시킵니다.3. 향상된 사용자 경험빠른 로딩 시간과 반응형 이미지는 연결 속도가 느린 모바일.. 2024. 9. 5. [Next.js] Prisma 개념 및 사용법 프리즈마는 대중적인 타입스크립트 지원 ORM 중 하나입니다. 프리즈마 설치 전에 기본적인 DB 개발 환경은 갖춰두어야 합니다. 설치 명령은 아래와 같습니다.npm i prisma 사용법설치 후 프로젝트에 프리즈마 적용을 위해 아래 명령을 실행합니다. 그러면, 루트에 prisma 폴더와 함께 그 아래 schema.prisma 파일이 새로 생성됩니다. 덤으로 데이터베이스 스키마 정보 연동을 위한 환경변수 설정에 필요한 .env 파일도 알아서 생성해줍니다.npx prisma init✔ Your Prisma schema was created at prisma/schema.prismaYou can now open it in your favorite editor.warn You already have a .giti.. 2024. 6. 11. 이전 1 다음
