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

🎯 학습 목표

• 할 일을 완료하거나 다시 미완료 상태로 전환할 수 있도록 UI와 로직을 추가합니다.
• 체크박스를 통해 상태를 토글하고, 서버에 PUT 요청으로 반영합니다.

✅ 1. 서버(PUT) 라우터 먼저 준비

이미 구현된 PUT /api/todos/:id 라우터에 completed 필드를 함께 처리하도록 확장해 둡니다:

// routes/todos.js (변경 사항)
router.put('/:id', async (req, res) => {
  const userId = req.body.userId;
  const id = Number(req.params.id);
  const { title, completed } = req.body;

  if (!userId || !todosByUser[userId]) {
    return res.status(400).json({ message: '잘못된 요청' });
  }

  todosByUser[userId] = todosByUser[userId].map((todo) => {
    if (todo.id !== id) return todo;
    return {
      ...todo,
      ...(title !== undefined && { title }),
      ...(completed !== undefined && { completed }),
    };
  });

  await saveTodos(); // ✅ 변경 후 파일 저장
  res.sendStatus(200);
});

✅ 2. TodoItem.vue 수정 – 체크박스 UI 추가

<template>
  <li class="todo-item">
    <template v-if="isEditing">
      <input v-model="editText" @keyup.enter="submitEdit" />
      <button @click="submitEdit">확인</button>
      <button @click="cancelEdit">취소</button>
    </template>
    <template v-else>
      <label class="label">
        <input type="checkbox" :checked="completed" @change="$emit('toggle')" />
        <span :class="{ done: completed }">{{ content }}</span>
      </label>
      <div class="actions">
        <button @click="$emit('edit')">✏️</button>
        <button @click="$emit('delete')">🗑️</button>
      </div>
    </template>
  </li>
</template>

<script>
export default {
  props: {
    content: String,
    editing: Boolean,
    completed: Boolean,
  },
  data() {
    return {
      editText: this.content,
    };
  },
  computed: {
    isEditing() {
      return this.editing;
    },
  },
  methods: {
    submitEdit() {
      this.$emit('update', this.editText.trim());
    },
    cancelEdit() {
      this.editText = this.content;
      this.$emit('update', null); // null은 취소 의미
    },
  },
};
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #ddd;
}

.label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.done {
  text-decoration: line-through;
  color: gray;
}

.todo-item input[type='text'] {
  flex: 1;
  margin-right: 8px;
}
.todo-item button {
  margin-left: 4px;
}
.actions {
  display: flex;
  gap: 4px;
}
</style>

✅ 3. App.vue에서 완료 상태 토글 기능 추가

<TodoItem
  v-for="todo in todos"
  :key="todo.id"
  :content="todo.title"
  :completed="todo.completed"
  :editing="editingId === todo.id"
  @delete="removeTodo(todo.id)"
  @edit="startEdit(todo.id)"
  @update="updateTodo(todo.id, $event)"
  @toggle="toggleComplete(todo.id)"
/>

methods: {
  // ...기존 코드 유지
  async toggleComplete(id) {
    const target = this.todos.find((todo) => todo.id === id);
    const updated = { ...target, completed: !target.completed };

    await axios.put(`${API_URL}/${id}`, {
      completed: updated.completed,
      userId: this.userId,
    });

    this.todos = this.todos.map((todo) => (todo.id === id ? updated : todo));
  },
}

🧪 확인 사항

1. 체크박스를 클릭하면 할 일이 완료/미완료로 토글됨
2. 서버에도 저장됨 → 새로고침 후에도 상태 유지됨
3. 텍스트는 완료 시 회색 + 취소선 표시됨

🚀 팁: 변경마다 서버 자동 재시작하고 싶다면?

현재는 api 서버의 소스를 수정하면 재시작 하기 전에는 기능이 되지 않습니다. 항상 매번 express 서버를 수정할 때마다 서버를 재시작하는 것은 번거로우므로 소스를 수정할 때마다 자동으로 서버를 재시작해주는 라이브러리를 설치하여 적용해보겠습니다.

👉 nodemon 설치

npm install -D nodemon

👉 package.json 수정

"scripts": {
  "dev": "nodemon server.js"
}

npm run dev

🧠 요약

FE 저장소

GitHub - heroyooi/vue2-app at ch12

BE 저장소

GitHub - heroyooi/vue2-api at ch12