📘 Next.js 기초 강좌

0) 개념 한 줄 요약

• app/api/**/route.ts 파일을 만들면 서버 라우트가 됩니다.
• HTTP 메서드별로 export async function GET/POST/DELETE를 구현합니다.
• 클라이언트에서는 fetch('/api/...')로 호출합니다.

1) 서버: Todo API 만들기

(1) 간단한 메모리 저장소 (학습용)

서버리스 환경에서는 호출마다 초기화될 수 있으니 학습/개념 확인용입니다.

app/api/todos/store.ts

export type Todo = { id: string; text: string; createdAt: number };

let todos: Todo[] = [];

export const store = {
  findAll: () => todos.slice().sort((a, b) => b.createdAt - a.createdAt),
  add: (text: string) => {
    const t = { id: crypto.randomUUID(), text, createdAt: Date.now() };
    todos.push(t);
    return t;
  },
  remove: (id: string) => {
    const before = todos.length;
    todos = todos.filter((t) => t.id !== id);
    return todos.length !== before;
  },
};

(2) 목록 조회 / 생성 (GET, POST)

app/api/todos/route.ts

import { NextResponse } from "next/server";
import { store } from "./store";

export async function GET() {
  // 캐시 비활성화 (항상 최신 데이터)
  return NextResponse.json(store.findAll(), {
    headers: { "Cache-Control": "no-store" },
  });
}

export async function POST(req: Request) {
  try {
    const body = await req.json();
    const text = String(body?.text ?? "").trim();
    if (!text) {
      return NextResponse.json({ error: "text is required" }, { status: 400 });
    }
    const created = store.add(text);
    return NextResponse.json(created, { status: 201 });
  } catch {
    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
  }
}

(3) 개별 삭제 (DELETE)

app/api/todos/[id]/route.ts

import { NextResponse } from "next/server";
import { store } from "../store";

type Params = { params: { id: string } };

export async function DELETE(_: Request, { params }: Params) {
  const ok = store.remove(params.id);
  if (!ok) return NextResponse.json({ error: "Not Found" }, { status: 404 });
  return NextResponse.json({ ok: true });
}

✅ 여기까지로 /api/todos (GET/POST), /api/todos/:id (DELETE) 준비 완료!

2) 클라이언트: API 연동 Todo 페이지

5강의 로컬 상태만 쓰던 예제를 API 호출 기반으로 바꿉니다.

(스타일은 5강에서 만든 card.module.scss, todo.module.scss를 재사용)

app/todo-api/page.tsx

"use client";

import { useEffect, useState } from "react";
import card from "../../styles/card.module.scss";
import styles from "../../styles/todo.module.scss";

type Todo = { id: string; text: string; createdAt: number };

export default function TodoApiPage() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);

  const load = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/todos", { cache: "no-store" });
      const data = await res.json();
      setTodos(data);
    } finally {
      setLoading(false);
    }
  };

  const add = async (e: React.FormEvent) => {
    e.preventDefault();
    const text = input.trim();
    if (!text) return;
    setSubmitting(true);
    try {
      const res = await fetch("/api/todos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        alert(err?.error || "추가 실패");
        return;
      }
      setInput("");
      await load();
    } finally {
      setSubmitting(false);
    }
  };

  const remove = async (id: string) => {
    const res = await fetch(`/api/todos/${id}`, { method: "DELETE" });
    if (!res.ok) {
      alert("삭제 실패");
      return;
    }
    // 낙관적 업데이트 (리스트에서 즉시 제거)
    setTodos((prev) => prev.filter((t) => t.id !== id));
  };

  useEffect(() => {
    load();
  }, []);

  return (
    <section className={card.card}>
      <h1 className={card.title}>Todo 앱 (API 연동)</h1>
      <p className={card.desc}>API Routes로 생성/조회/삭제를 구현했습니다.</p>

      <form className={styles.form} onSubmit={add}>
        <inputplaceholder="할 일을 입력하세요"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          aria-label="할 일 입력"
          disabled={submitting}
        />
        <button className={styles.add} type="submit" disabled={submitting}>
          {submitting ? "추가 중..." : "추가"}
        </button>
      </form>

      {loading ? (
        <p style={{ marginTop: "1rem" }}>불러오는 중...</p>
      ) : (
        <div className={card.list}>
          {todos.length === 0 && <p>할 일이 없습니다.</p>}
          {todos.map((todo) => (
            <div key={todo.id} className={styles.item}>
              <span className={styles.text}>{todo.text}</span>
              <button className={styles.remove} onClick={() => remove(todo.id)}>
                삭제
              </button>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

3) 캐시 전략 간단 가이드

• API 응답 최신화가 중요하면
  • 서버: Cache-Control: no-store 헤더(위 예시)
  • 클라이언트: fetch(..., { cache: "no-store" })
• 정적/주기적 재검증이 좋다면
  • fetch(url, { next: { revalidate: 60 } }) 사용(ISR 느낌)

4) 오류/엣지 케이스 팁

• 서버에서 JSON 파싱 오류: try/catch로 400 응답
• 필수 필드 검증: 빈 문자열 등 방지
• 서버리스 주의: 메모리 저장소는 호출마다 초기화 가능 → DB로 교체 필요

5) 오늘의 정리

• app/api/**/route.ts로 서버 엔드포인트 정의
• GET/POST/DELETE 구현으로 Todo API 완성
• 클라이언트 페이지에서 fetch로 생성/조회/삭제 연동
• 캐시 전략과 서버리스 특성 이해

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_6