# [Next.js + TS 실전] 5. 로그인 붙이기 (Clerk)

[Next.js + TS 실전] 5. 로그인 붙이기 (Clerk)지금까지 메모 앱은 누구나 같은 목록을 보고 고칠 수 있습니다.이번 편은 로그인을 붙이고, 내 메모만 보이게 만듭니다.도구: Clerk (Next.js App Router와 연동이 단순함)이 편에서 할 일왜 직접 인증을 안 짜는지 짧게 이해하기Clerk 프로젝트·키·패키지 준비ClerkProvider + 미들웨어로 보호내비에 로그인/유저 버튼 넣기Prisma Memo에 userId 추가 → 내 메모만 CRUDUI 클릭 경로는 Clerk 대시보드가 자주 바뀝니다.키 발급 → env → 코드 연결 흐름만 정확히 따라가면 됩니다.왜 Clerk인가직접 만들면 대략 이만큼입니다.회원가입 / 로그인 / 세션 / 쿠키비밀번호 해시, 이메일 인증로그아웃,..

  • format_list_bulleted frontend/NextJs
  • · 2026. 7. 30.
  • textsms

# [Next.js + TS 실전] 4. 폼 검증하기 (zod)

[Next.js + TS 실전] 4. 폼 검증하기 (zod)지금까지 검증은 if (!title) + throw new Error 수준이었습니다.이번 편은 필드별 메시지를 폼 아래에 보여 줍니다.목표: zod 스키마 · Server Action 반환값 · useActionState.이 편에서 할 일왜 throw만으로는 UX가 약한지 이해하기zod로 메모 입력 규칙 정하기createMemo가 성공/실패 결과를 반환하게 바꾸기클라이언트 폼에서 useActionState로 에러 표시하기수정 폼에도 같은 패턴 적용하기DB·배포는 건드리지 않습니다.이미 있는 작성/수정 폼의 품질만 올립니다.지금 방식의 한계현재 Action 대략:if (!title || !content) { throw new Error("제목과 ..

  • format_list_bulleted frontend/NextJs
  • · 2026. 7. 30.
  • textsms

# [Next.js + TS 실전] 3. Vercel에 배포하기

[Next.js + TS 실전] 3. Vercel에 배포하기실전 2편까지 로컬에서 Prisma + SQLite로 메모가 저장됩니다.이번 편은 다른 사람이 URL로 접속할 수 있게 배포합니다.목표: GitHub → Vercel 배포 · 환경 변수 · SQLite 한계와 대안.이 편에서 할 일배포 전 로컬 빌드 확인GitHub에 올리고 Vercel 연결환경 변수 설정 이해왜 Vercel에서 SQLite가 힘든지 알기현실적인 DB 선택지 정리 (Postgres 등)“버튼 몇 번이면 끝”만 말하지 않습니다.로컬 SQLite 앱을 그대로 Vercel에 올리면 어디서 막히는지까지 같이 봅니다.배포가 되면 뭐가 바뀌나 로컬배포 후접속localhost:3000https://something.vercel.app서버내 P..

  • format_list_bulleted frontend/NextJs
  • · 2026. 7. 30.
  • textsms

# [Next.js + TS 실전] 2. Prisma + SQLite로 DB 붙이기

[Next.js + TS 실전] 2. Prisma + SQLite로 DB 붙이기실전 1편까지 CRUD는 완성됐습니다.문제는 서버를 재시작하면 메모가 사라진다는 것입니다.이번 편은 Prisma + SQLite로 진짜 저장을 붙입니다.이 편에서 할 일Prisma + SQLite 설치·초기화Memo 테이블(스키마) 정의lib/prisma.ts 클라이언트 만들기lib/memos.ts를 배열 → DB 쿼리로 교체시드(초기 데이터) 넣고 재시작해도 남는지 확인페이지·Server Action 코드는 거의 안 건드립니다.바뀌는 건 주로 lib/memos.ts입니다. 이게 이번 편의 핵심입니다.왜 Prisma + SQLite인가선택이유SQLite파일 하나로 동작. 로컬 학습에 제일 단순Prisma스키마 → 타입 생성. ..

  • format_list_bulleted frontend/NextJs
  • · 2026. 7. 30.
  • textsms

# [Next.js + TS 실전] 1. 메모 수정과 삭제

[Next.js + TS 실전] 1. 메모 수정과 삭제입문 시리즈(1~8편)에서 추가까지 했다면, 이번 편은 수정·삭제로 CRUD를 마칩니다.목표: updateMemo / deleteMemo · Server Action 확장 · 수정 페이지.이 편에서 할 일lib/memos.ts에 수정·삭제 함수 추가actions.ts에 Server Action 2개 추가/memos/[id]/edit 수정 페이지 만들기상세 페이지에 수정 링크 · 삭제 버튼 붙이기7편에서 만든 추가(create) 흐름을 그대로 확장합니다.새 개념보다 같은 패턴 반복이 목표입니다.CRUD 중 지금 어디까지? 상태이번 편Create✅ 7편—Read✅ 4~6편—Update❌✅Delete❌✅Create를 이미 Server Action으로 했으니..

  • format_list_bulleted frontend/NextJs
  • · 2026. 7. 30.
  • textsms

# [Next.js + TS] 8. 정리 + 다음 학습 로드맵

[Next.js + TS] 8. 정리 + 다음 학습 로드맵1~7편에서 작은 메모 앱을 만들며 Next.js + TypeScript의 핵심 흐름을 따라 왔습니다.마지막 편은 복습, 지금 앱의 한계, 다음에 공부할 순서를 정리합니다.시리즈를 마치면서처음에는 React만으로도 화면은 만들 수 있다는 이야기에서 시작했습니다.끝날 즈음에는 이런 흐름을 직접 만들었을 겁니다./ → 소개/memos → 목록 (async fetch + loading/error)/memos/new → 작성 (Server Action)/memos/[id] → 상세React 경험이 있는 사람이 Next.js App Router + TypeScript로 넘어올 때 필요한 것만 골라 다뤘습니다..

  • format_list_bulleted frontend/NextJs
  • · 2026. 7. 29.
  • textsms