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

🎯 학습 목표

• 사용자별 할 일 데이터를 분리하여 저장/조회하는 구조를 만든다.
• 추후 로그인 연동을 대비하여 기본 인증 설계를 갖춘다.
• 사용자 데이터를 todos.json 파일에 영구 저장한다.

✅ 1. 왜 사용자 구분이 필요한가?

현재 서버는 **모든 사용자가 같은 할 일 목록(todos)**을 공유하고 있습니다.

하지만 실제 서비스에서는 아래와 같은 구조가 필요합니다:

✅ 2. 사용자 식별자(userId) 기반 구조 설계

✔️ 사용자 구분 방식

• Vue 프론트엔드에서 Axios 요청 시마다 userId를 함께 전달
• 서버에서는 userId별로 데이터를 나눠 저장 (todosByUser[userId])

✔️ 저장 구조 예시 (todos.json)

{
  "abc123": [
    { "id": 1, "title": "사용자 A의 할 일" }
  ],
  "def456": [
    { "id": 2, "title": "사용자 B의 할 일" }
  ]
}

✅ 3. 서버 코드: 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 todosByUser = {}

// 📂 데이터 불러오기
const loadTodos = async () => {
  try {
    const data = await fs.readFile(DATA_FILE, 'utf-8')
    todosByUser = JSON.parse(data)
    console.log('✅ todos.json 로드 완료')
  } catch {
    todosByUser = {}
    console.log('📁 새 todos.json 시작')
  }
}

// 💾 데이터 저장
const saveTodos = async () => {
  await fs.writeFile(DATA_FILE, JSON.stringify(todosByUser, null, 2))
}

// GET /todos?user=abc123
router.get('/', async (req, res) => {
  const userId = req.query.user
  if (!userId) return res.status(400).json({ message: 'userId가 필요합니다' })

  const todos = todosByUser[userId] || []
  res.json(todos)
})

// POST /todos
router.post('/', async (req, res) => {
  const { title, userId } = req.body
  if (!title || !userId) {
    return res.status(400).json({ message: 'title과 userId가 필요합니다' })
  }

  const newTodo = {
    id: Date.now(),
    title,
    completed: false
  }

  if (!todosByUser[userId]) todosByUser[userId] = []
  todosByUser[userId].unshift(newTodo)
  await saveTodos()
  res.status(201).json(newTodo)
})

// DELETE /todos/:id?user=abc123
router.delete('/:id', async (req, res) => {
  const userId = req.query.user
  const id = Number(req.params.id)

  if (!userId || !todosByUser[userId]) return res.sendStatus(204)

  todosByUser[userId] = todosByUser[userId].filter(todo => todo.id !== id)
  await saveTodos()
  res.sendStatus(204)
})

// PUT /todos/:id
router.put('/:id', async (req, res) => {
  const userId = req.body.userId
  const id = Number(req.params.id)
  const { title } = req.body

  if (!userId || !title || !todosByUser[userId]) {
    return res.status(400).json({ message: '유효하지 않은 요청입니다' })
  }

  todosByUser[userId] = todosByUser[userId].map(todo =>
    todo.id === id ? { ...todo, title } : todo
  )

  await saveTodos()
  res.sendStatus(200)
})

// 서버 시작 시 데이터 불러오기
loadTodos()

module.exports = router

✅ 4. 클라이언트(Vue)에서 요청 방식

const userId = 'abc123' // 추후 localStorage에서 관리 가능

// GET
axios.get(`/api/todos?user=${userId}`)

// POST
axios.post('/api/todos', { title: this.newTodo, userId })

// DELETE
axios.delete(`/api/todos/${id}?user=${userId}`)

// PUT
axios.put(`/api/todos/${id}`, { title: newTitle, userId })

✅ 5. 유지되는 파일 예시 (data/todos.json)

{
  "abc123": [
    { "id": 1721383512188, "title": "Vue 학습", "completed": false },
    { "id": 1721383469384, "title": "Express 연동", "completed": false }
  ],
  "def456": []
}

🧠 요약

FE 저장소

GitHub - heroyooi/vue2-app at ch10

BE 저장소

GitHub - heroyooi/vue2-api at ch10