60분 완주 - Hono 백엔드

1프로젝트 생성

프론트엔드 폴더(my-todo) 옆에 백엔드 폴더를 만듭니다.

터미널

# 상위 폴더로 이동 (my-todo 폴더가 있는 곳)
cd ..

# 백엔드 폴더 생성
mkdir my-todo-api
cd my-todo-api

# 프로젝트 초기화
npm init -y

# Hono 설치
npm install hono @hono/node-server

# TypeScript 설치 (선택)
npm install -D typescript @types/node tsx

중간 용어 팁: npm init / package.json

npm init: Node 프로젝트 기본 설정 파일을 생성하는 명령입니다.
package.json: 프로젝트 이름, 스크립트, 의존성을 기록하는 메타 파일입니다.
Script: 자주 쓰는 명령을 이름으로 저장해 실행하는 기능입니다.
심화 학습: 도구 설치/터미널 기초

2첫 API 작성

src/index.ts 파일을 만들고 아래 코드를 입력하세요.

src/index.ts

import { Hono } from 'hono';
import { serve } from '@hono/node-server';
import { cors } from 'hono/cors';

const app = new Hono();

// CORS 설정 (프론트엔드 연결용)
app.use('*', cors({
  origin: ['http://localhost:5173'],
  credentials: true,
}));

// Health check
app.get('/health', (c) => {
  return c.json({ status: 'ok' });
});

// Hello API
app.get('/api/hello', (c) => {
  const name = c.req.query('name') || 'World';
  return c.json({ message: `Hello, ${name}!` });
});

// 서버 시작
serve({ fetch: app.fetch, port: 8000 });
console.log('🚀 Server running on http://localhost:8000');

서버 실행

터미널

# 서버 실행
npx tsx src/index.ts

# 테스트 (새 터미널에서)
curl http://localhost:8000/health
curl http://localhost:8000/api/hello?name=Choorai

중간 용어 팁: CORS / Endpoint

Endpoint: API 요청을 받는 URL 경로입니다.
CORS: 프론트엔드와 백엔드 출처가 다를 때 필요한 브라우저 허용 설정입니다.
심화 학습: CORS 트러블슈팅

성공!

{"status": "ok"}가 보이면 서버가 정상 실행 중입니다.

3할 일 CRUD API

이제 할 일 관리 API를 추가합니다. AI에게 아래 프롬프트로 요청하세요.

AI 프롬프트

복사해서 사용하세요

"Hono로 Todo CRUD API를 만들어줘. 요구사항: 1. 인메모리 저장소 (Map 사용) 2. Todo 타입: id, title, is_completed, created_at 3. API 엔드포인트: - GET /api/v1/todos - 목록 (page, page_size 쿼리) - POST /api/v1/todos - 생성 (title 필수) - GET /api/v1/todos/:id - 단건 조회 - PATCH /api/v1/todos/:id - 수정 (is_completed 토글) - DELETE /api/v1/todos/:id - 삭제 4. 입력 검증 (빈 제목 거부) 5. 에러 응답 처리 기존 코드에 추가해줘."

Antigravity나 ChatGPT에 요청하세요.

예상 결과 API

터미널

# 할 일 생성
curl -X POST http://localhost:8000/api/v1/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Hono 배우기"}'

# 할 일 목록
curl http://localhost:8000/api/v1/todos

# 완료 처리
curl -X PATCH http://localhost:8000/api/v1/todos/1 \
  -H "Content-Type: application/json" \
  -d '{"is_completed": true}'

# 삭제
curl -X DELETE http://localhost:8000/api/v1/todos/1

4최종 폴더 구조

폴더 구조

my-todo-api/
├── src/
│   ├── index.ts      # 진입점 + 라우터
│   ├── types/
│   │   └── index.ts  # Todo 타입 정의
│   └── storage/
│       └── index.ts  # 인메모리 저장소
├── package.json
└── tsconfig.json     # (선택)

완성된 예제 코드는 GitHub 저장소 에서 확인할 수 있습니다.

FastAPI vs Hono

항목	Hono	FastAPI
언어	JavaScript/TypeScript	Python
프론트엔드와 통일	✅ 같은 언어	❌ 다른 언어
자동 문서화	❌	✅ /docs
추천 상황	JS만 알 때, 빠른 시작	Python 선호, ML 연동

Hono 백엔드 완료 체크리스트

0/4 완료

프로젝트 초기화npm init -y

Hono 설치npm install hono @hono/node-server

서버 실행npx tsx src/index.ts

API 엔드포인트 생성CRUD 구현

백엔드: Hono