# [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로 넘어올 때 필요한 것만 골라 다뤘습니다.
고급 패턴 전부를 다룬 시리즈는 아닙니다.
대신 “실제 앱을 한 바퀴 도는 감각”을 목표로 했습니다.

---

1~7편 한눈에 복습

편	핵심 한 줄
1	Next = React 위의 앱 프레임워크, TS = 타입 계약, App Router = 폴더가 URL
2	create-next-app, app/page.tsx가 곧 홈
3	Memo 타입 + MemoCard props
4	/memos, /memos/[id], layout에 공통 내비
5	기본은 Server, hooks/이벤트만 Client
6	async 페이지, loading.tsx, error.tsx
7	Server Action + FormData + revalidatePath

각 편의 연결고리는 이겁니다.

타입(Memo)
  ↓
컴포넌트(MemoCard)
  ↓
라우팅(/memos, /memos/[id])
  ↓
서버/클라이언트 분리(LikeButton)
  ↓
데이터 가져오기(getMemos)
  ↓
데이터 쓰기(createMemo)

한 번에 외우려 하지 말고, URL 하나가 어떤 파일·어떤 데이터·어떤 컴포넌트로 이어지는지만 다시 따라가 보세요.

---

지금 만든 앱 구조

memo-app/
  app/
    layout.tsx          → 공통 내비
    page.tsx            → /
    memos/
      page.tsx          → 목록
      loading.tsx
      error.tsx
      actions.ts        → Server Action
      new/page.tsx      → 작성
      [id]/page.tsx     → 상세
  components/
    MemoCard.tsx
    LikeButton.tsx
  lib/
    memos.ts            → 데이터 함수
  types/
    memo.ts

이 구조가 App Router 앱의 작은 정석에 가깝습니다.

• app/ = 라우트 + 페이지
• components/ = UI 조각
• lib/ = 데이터/비즈니스 로직
• types/ = 타입 정의

---

스스로 점검하는 체크리스트

아래를 설명할 수 있으면 1~7편은 제대로 따라온 겁니다.

Next.js / App Router

• app/page.tsx와 URL /의 관계를 설명할 수 있다
• [id] 폴더가 동적 라우트인 이유를 안다
• layout.tsx와 page.tsx 차이를 안다
• Link를 쓰는 이유를 안다

TypeScript

• Memo 타입이 왜 필요한지 안다
• 컴포넌트 props에 타입을 붙일 수 있다
• Promise<Memo[]> 같은 async 반환 타입의 의미를 안다

Server / Client

• Server Component가 기본값인 이유를 안다
• 'use client'가 필요한 경우를 2가지 이상 말할 수 있다
• 페이지 전체가 아니라 버튼만 Client로 분리할 수 있다

데이터

• useEffect fetch 대신 서버에서 await하는 이유를 안다
• loading.tsx가 언제 보이는지 안다
• error.tsx가 왜 "use client"인지 대략 안다

Server Action

• "use server"의 역할을 안다
• FormData와 input name의 관계를 안다
• revalidatePath와 redirect가 각각 뭘 하는지 안다

하나라도 막히면 해당 편만 다시 보면 됩니다.
처음부터 다시 읽을 필요는 없습니다.

---

지금 앱에 아직 없는 것 (정상)

이 시리즈 앱은 학습용입니다.
실서비스와 비교하면 아래가 비어 있습니다.

없는 것	왜 아직 안 했나	다음에
DB	메모리 배열로 흐름만 연습	Prisma, Drizzle, Supabase 등
인증	범위 밖	NextAuth, Clerk, Supabase Auth
수정/삭제	추가만 다룸	Server Action 확장
폼 에러 UI	throw만 소개	useActionState, zod
스타일링	최소	Tailwind, CSS Module
배포	로컬만	Vercel 등
테스트	범위 밖	Vitest, Playwright

“이게 없어서 실패”가 아니라, 의도적으로 빼 둔 것입니다.
한 번에 다 넣으면 Next의 핵심이 묻힙니다.

---

React만 쓸 때와 비교 (최종 정리)

주제	React만	Next App Router
라우팅	react-router 설정	폴더 = URL
첫 데이터	클라이언트 fetch 흔함	서버 await
인터랙션	전부 클라이언트	필요한 조각만 Client
폼 전송	API 라우트 + fetch	Server Action
공통 UI	Layout 컴포넌트 직접 구성	layout.tsx

React 지식은 버리는 게 아니라 그대로 씁니다.
바뀐 건 “어디서 실행되고, 어떤 파일이 페이지인지” 규칙입니다.

---

다음 학습 로드맵 (추천 순서)

1단계: 지금 앱을 조금 더 완성하기

가장 가까운 다음 단계입니다.

1. 메모 수정/삭제 Server Action 추가
2. 폼 검증 — 빈 값 말고 필드별 에러 메시지
3. Tailwind로 목록·카드 UI 정리 (이미 템플릿에 있으면 활용)

→ “읽기 + 쓰기”가 있는 CRUD 입문

2단계: 데이터 영속화

4. SQLite + Prisma 또는 Supabase로 DB 연결
5. lib/memos.ts의 메모리 배열을 DB 쿼리로 교체
6. 서버 재시작해도 데이터가 남게 만들기

→ “장난감 앱”에서 “저장되는 앱”으로

3단계: 인증과 권한

7. 로그인 붙이기
8. “내 메모만 보기” 같은 간단한 권한

→ 혼자 쓰는 앱 → 사용자별 앱

4단계: 배포와 운영

9. Vercel에 배포
10. 환경 변수 (.env) 다루기
11. 빌드/프리뷰/프로덕션 차이 이해

→ 로컬에서 끝나는 프로젝트 → 다른 사람도 접속 가능

5단계: 깊게 파고들 주제 (필요할 때)

• Middleware, Route Handlers (app/api/...)
• 캐싱 전략 (revalidate, fetch 옵션)
• Parallel Routes, Intercepting Routes
• React Query와 Server Component 조합
• E2E 테스트

한꺼번에 X. 2단계 DB 붙이기까지 가면 실무 감각이 확 올라갑니다.

---

자주 묻는 “다음에 뭐 보면 돼요?”

Q. 공식 문서부터 볼까요?
→ 네. Next.js Docs의 App Router 섹션을 이 시리즈와 병행하면 좋습니다.
이미 만든 앱 파일 이름과 문서 용어가 1:1로 맞을 겁니다.

Q. TypeScript를 더 깊게?
→ 지금은 type, props, Promise<T>면 충분합니다.
필요해질 때 Pick, Omit, zod 스키마를 보면 됩니다.

Q. Pages Router도 배워야 해요?
→ 새 프로젝트면 App Router만으로 충분합니다.
레거시 코드를 읽을 일이 생기면 그때 비교하면 됩니다.

Q. 포트폴리오로 써도 돼요?
→ DB + 배포 + 수정/삭제까지 붙이면 “Next 입문” 이상으로 보입니다.
지금 상태는 “학습 완주” 증거로는 좋고, 포트폴리오는 1~2단계 더 가면 좋습니다.

---

이 시리즈에서 가져갈 것 (마지막)

• Next.js는 React를 대체하지 않는다. 앱 규칙을 더한다.
• TypeScript는 데이터·props·함수의 계약이다.
• App Router는 폴더·page·layout으로 URL과 화면을 만든다.
• Server Component가 기본이고, Client는 꼭 필요할 때만 쓴다.
• 데이터는 서버에서 await하고, 폼은 Server Action으로 처리할 수 있다.
• 작은 앱 하나를 끝까지 밀어보는 게, 예제 조각 10개보다 낫다.

---

시리즈 전체 목차

1. 왜 Next.js + TypeScript인가
2. 프로젝트 만들고 폴더 구조 이해하기
3. TypeScript로 컴포넌트 타입 잡기
4. 라우팅과 레이아웃
5. Server Component vs Client Component
6. 데이터 가져오기
7. 폼과 서버 액션 입문
8. 정리 + 다음 학습 로드맵 ← 지금

---

마치며

8편까지 오면 “Next.js가 뭔지 들어 본” 수준이 아니라,
직접 만든 앱 하나가 있습니다.

다음은 새 글을 읽기보다,
메모 수정·DB·배포 중 하나를 골라 손으로 붙여 보는 게 가장 빠릅니다.

시리즈가 도움이 됐다면 댓글로

• 어떤 편이 제일 헷갈렸는지
• 다음에 다뤄 줬으면 하는 주제

남겨 주세요.
같은 메모 앱을 이어서 확장하는 후속 시리즈도 이어갈 수 있습니다.