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(..

📌 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 ( 예상치 못한 오류가 발생하였..

섹션 0: 기초 📌 VSCode에서 컴포넌트 코드 스니펫 사용 익스텐션 설치 : ES7+ React/Redux/React-Native/JS snippets rafce + tab : 화살표 함수 형태 리액트 컴포넌트 코드 생성 📌 내비게이션 a태그 : 서버 측 내비게이션을 수행, 링크 클릭 시 전체 페이지 로딩 Link 컴포넌트 : 클라이언트 측 라우팅을 활용한 페이지 간 전환. 페이지가 새로 렌더링 되지 않고 필요한 부분만 업데이트 📌 CSR/SSR CSR SSR 큰 사이즈 번들 크기 작은 번들 사이즈 리소스 집약적 리소스 최소화 검색 엔진 최적화 어려움(SEO) 검색엔진 최적화(SEO) 낮은 보안성 높은 보안성 📌 Hybrid Rendering 서버 측에서 페이지를 미리 생성하는 정적 생성(SSG: S..

섹션 1 📌 타입 무시 아래 코드를 추가하면 타입스크립트에서 타입을 무시한다. // @ts-ignore 📌 모듈 CSS 모듈 CSS의 경우 page.module.css라는 파일이 있다면 module이라는 키워드 때문에 클래스명이 다른 모듈과 동일하다 하더라도 겹치지 않는다. CSS의 dvw, dvh는 모바일의 경우 페이지에서 주소창이 생기기도 사라지기도 하는데 거기에 맞게 페이지의 사이즈를 맞춰주는 역할을 한다. width: 100dvw; height: 100dvh; 📌 children의 타입 layout.tsx에서 children의 타입은 ReactNode이다. // layout.tsx import { ReactNode } from "react"; type Props = { children: React..

1. 업로드한 이미지 로드 안 되는 문제사용자가 업로드한 이미지를 public 폴더에 저장되도록 했고, DB에는 해당 파일명이 누적되도록 했다. 이 기능들은 순조롭게 잘 동작했다. 하지만 업로드한 이미지를 브라우저에서 보려고 리스트를 열었을 때는 엑박만 보였다. 2. public 폴더의 내용은 빌드 시점에 결정Next.js의 public 폴더의 내용은 빌드 시점에 결정된다. 즉, 빌드 이후에 추가된 내용은 사용하 수 없다. 개발 모드에서는 이런 현상이 발생하지 않았는데, 그 이유는 프로젝트의 코드가 변경되면 프로젝트를 다시 실행하기 때문이다. 서버에 빌드하여 배포한 경우에도 이미지 업로드 후 해당 서버를 죽이고(나의 경우 pm2 delete 명령) 다시 구동하면 업로드한 이미지가 정상적으로 로드되는 것을..

1. 왜 prisma에서 DB 테이블 연동이 안 되는 걸까? Next.js 프로젝트에 prisma ORM을 적용하여 작업 중이다. 새로운 모델(CouponSetting)을 만들었다. // prisma/migrations/schema.prisma // (생략) model CouponSetting { id Int @id @default(autoincrement()) //(생략) } 변경된 내용을 적용하기 위해 마이그레이션 명령어를 실행하였다( 에 로그를 위한 마이그레이션 명을 임의로 작성). npx prisma migrate dev --name // 마이그레이션 생성 (npx prisma migrate dev 명령 입력, 엔터 후 이름을 작성해도 된다.) 변경된 모델에 맞게 Prisma Client를 재생성..