Route Handlers — API Routes 만들기 (GET·POST·PUT·DELETE)
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. App Router에서 Route Handler 파일의 올바른 이름과 위치는?
💡 App Router의 Route Handler는 반드시 route.ts (또는 route.js) 파일명을 사용해야 합니다. pages/api/는 Pages Router 방식이며, App Router에서는 app/ 디렉토리 어디에나 route.ts를 배치할 수 있습니다.
Q2. Route Handler에서 HTTP 메서드를 처리하는 올바른 방식은?
💡 App Router Route Handler는 HTTP 메서드명과 동일한 named export 함수를 정의합니다. export async function GET(...), export async function POST(...) 형태로 각 메서드를 독립적으로 처리합니다.
Q3. Route Handler에서 동적 경로 파라미터(`/api/posts/[id]`)에 접근하는 방법은?
💡 Route Handler 함수의 두 번째 인수로 context 객체가 전달되며, context.params에 동적 파라미터가 담겨 있습니다. 예: export async function GET(request, { params }) { const id = params.id; }
Q4. 성공적인 리소스 삭제 후 반환해야 하는 HTTP 상태 코드는?
💡 DELETE 요청이 성공하면 204 No Content를 반환하는 것이 REST API 컨벤션입니다. 응답 본문 없이 성공을 알립니다. return new Response(null, { status: 204 }) 형태로 사용합니다.
Q5. Route Handler에서 CORS preflight 요청을 처리하려면 어떤 HTTP 메서드 핸들러가 필요한가?
💡 브라우저는 CORS 요청 전 OPTIONS 메서드로 preflight 요청을 보냅니다. export async function OPTIONS() { return new Response(null, { headers: corsHeaders }); } 형태로 처리합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.