Prisma ORM 적용 1. VSCode에서 Prisma Extension 설치 더보기 Name: Prisma Id: Prisma.prisma Description: Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files. Version: 5.9.1 Publisher: Prisma VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Prisma.prisma 2. prisma 설치 npm i prisma 😉 공식 문서 : https://www.prisma.io/ 3. prisma 명령어 명령어 목록..

1. Zod 설치 Zod는 유효성 검사 라이브러리이다. npm i zod 😉 공식 문서 : https://zod.dev/ 2. 적용 방법 📌 스키마 작성 // src/app/api/users/schema.ts import { z } from "zod"; const schema = z.object({ name: z.string().min(3), email: z.string().email(), age: z.number(), }); export default schema; 📌 Zod 적용 // src/app/api/users/[id]/route.tsx import { NextRequest, NextResponse } from "next/server"; import schema from "../schema"; ..

📌 API Endpoints Next.js 앱 내부에서 HTTP 요청, 응답 처리 가능 API Folder Convention은 API 엔드포인트의 그룹화와 체계적 관리에 유용 api폴더 원하는 API 경로에 해당하는 폴더(여기에서는 users)를 생성하고 그 폴더 안에 route.tsx 파일 생성(page.tsx와 함께 있을 수 없음) // src/app/api/users/route.tsx import { NextRequest, NextResponse } from "next/server"; // GET 핸들러에 인자값이 없는 경우 응답 결과를 캐싱함 // export function GET() { // 캐싱을 원하지 않는 경우 request 속성을 매개 변수로 추가 export function GET(..

1. Zustand를 적용한 Todo List [그림 1]과 같이 Zustand를 이용해 간단한 Todo List를 구현해 보았다. Zustand를 이용할 경우 Redux보다 훨씬 간편하게 전역 상태를 관리할 수 있었다. 전역 상태를 이용해야 하는 컴포넌트에서 Zustand의 create 메서드를 이용해 작성한 모듈을 로딩하기만 하면 즉시 사용할 수 있었기 때문이다. 2. React.js 프로젝트 생성 "react-zustand-todolist"라는 리액트 프로젝트를 생성한다. npx create-react-app react-zustand-todolist 3. Zustand 라이브러리 설치 npm i zustand 😉 공식 문서 : https://docs.pmnd.rs/zustand/getting-sta..

📌 error.tsx 컴포넌트에서 발생한 예상치 못한 오류 처리한다. error.tsx는 client 컴포넌트로 만들어야 한다. [그림 1]은 error.tsx를 적용하지 않은 경우이다. // src/app/error.tsx "use client"; // "use client"를 반드시 작성해야 한다. import React from "react"; interface Props { error: Error; reset: () => void; } const ErrorPage = ({ error, reset }: Props) => { console.log("Error : ", error); // 실제 애플리케이션에서는 콘솔 찍기 대신 로그를 영구적으로 남기면 된다. return ( 예상치 못한 오류가 발생하였..

📌 not-found.tsx 1. 존재하지 않는 페이지 처리 // src/app/not-found.tsx /* 존재하지 않는 페이지에 접근했을 때 레더링 텍스트 적용한 경우 */ import React from "react"; const NotFound = () => { return 요청하지 않는 페이지는 존재하지 않습니다.; }; export default NotFound; 2. Dynamic Routes와 조합 // src/app/users/[id]/page.tsx import { notFound } from "next/navigation"; // 추가 import React from "react"; interface Props { params: { id: number }; } const UserDe..

📌 Loading UI 1. React Suspense React Suspense 컴포넌트 활용. https://ko.legacy.reactjs.org/docs/react-api.html#reactsuspense // src/app/layout.tsx // (생략) import { Suspense } from "react"; // 추가 // (생략) export default function RootLayout({ children, }: Readonly) { return ( {/* Suspense 컴포넌트 적용 */} {/* fallback에는 텍스트, 아이콘, 애니메이션 컴포넌트 적용 가능 */} {/* 검색 엔진 봇이 보는 페이지는 빈 페이지가 아닌 로딩 컴포넌트가 렌더링 된 문서 */} {/* se..

섹션 2: 라우팅과 내비게이션 📌 다이내믹 라우트(Dynamic Routes) 공식 문서 : https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#convention "src/app/users/[id]/photo/[photoId]" 경로를 작성 대괄호 [] 안에 매개 변수를 지정할 수 있고, 이 매개 변수에 할당되는 인수가 경로가 된다. // src/app/users/[id]/photo/[photoId]/page.tsx import React from "react"; interface Props { params: { id: number; photoId: number }; } // props에 params 속성이 존재하..