🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• RESTful API의 기본 원칙을 이해한다.
• Express 서버를 라우터/핸들러 파일로 분리하여 구조화한다.

✅ 1. RESTful 구조란?

RESTful API는 URL과 HTTP 메서드를 조합하여 자원을 의미 있게 설계하는 방식입니다.

✅ "동사"가 아닌 "자원 중심(명사)"의 URL 설계가 핵심입니다.

✅ 2. 폴더 구조 리팩토링

vue2-api/
├── server.js           # 서버 실행 엔트리
├── routes/
│   └── todos.js        # 라우터 정의
├── data/
│   └── todos.json      # 저장되는 JSON 파일

✅ 3. 라우터 분리 – routes/todos.js

// routes/todos.js
const express = require('express')
const fs = require('fs').promises
const path = require('path')
const router = express.Router()

const DATA_FILE = path.join(__dirname, '../data/todos.json')
let todos = []

// 📦 데이터 로딩 및 저장 함수
const loadTodos = async () => {
  try {
    const data = await fs.readFile(DATA_FILE, 'utf-8')
    todos = JSON.parse(data)
  } catch {
    todos = []
  }
}

const saveTodos = async () => {
  await fs.writeFile(DATA_FILE, JSON.stringify(todos, null, 2))
}

// ✅ GET /todos
router.get('/', async (req, res) => {
  res.json(todos)
})

// ✅ POST /todos
router.post('/', async (req, res) => {
  const newTodo = {
    id: Date.now(),
    title: req.body.title,
    completed: false
  }
  todos.unshift(newTodo)
  await saveTodos()
  res.status(201).json(newTodo)
})

// ✅ DELETE /todos/:id
router.delete('/:id', async (req, res) => {
  const id = Number(req.params.id)
  todos = todos.filter(todo => todo.id !== id)
  await saveTodos()
  res.sendStatus(204)
})

// ✅ PUT /todos/:id
router.put('/:id', async (req, res) => {
  const id = Number(req.params.id)
  const { title } = req.body
  todos = todos.map(todo =>
    todo.id === id ? { ...todo, title } : todo
  )
  await saveTodos()
  res.sendStatus(200)
})

// 최초 1회 로드
loadTodos()

module.exports = router

✅ 4. 서버 진입점 – server.js

const express = require('express')
const cors = require('cors')
const todosRouter = require('./routes/todos')
const app = express()
const PORT = 3000

app.use(cors())
app.use(express.json())

// ✅ RESTful router 등록
app.use('/todos', todosRouter)

app.listen(PORT, () => {
  console.log(`🚀 서버 실행 중: http://localhost:${PORT}`)
})

✅ 5. 실행 방법

실행하기 전 프로젝트 루트에 data 폴더를 만듭니다. data 폴더가 없으면 데이터는 저장되지만 서버에서 에러가 납니다.

node server.js

🧠 핵심 요약

BE 저장소

GitHub - heroyooi/vue2-api at ch8