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

📌 localStorage 기반 사용자 식별자 자동 발급 및 유지

🎯 학습 목표

• 사용자가 로그인하지 않아도 고유 userId를 부여하고 유지하는 구조를 만든다.
• API 요청 시 항상 해당 userId를 포함시켜 사용자별 데이터 격리를 유지한다.

✅ 1. 왜 userId를 저장해야 하나요?

사용자 A가 할 일을 입력했는데,

페이지를 새로고침하거나 브라우저를 껐다 켜면 userId가 사라져서

새 사용자가 된 것처럼 동작하는 문제가 발생합니다.

→ 이를 방지하려면 브라우저에 userId를 저장해야 합니다.

✅ 2. 해결 방법: localStorage에 userId 저장

1. userId를 localStorage에서 불러오기

2. 없으면 새로 생성하여 저장

function getOrCreateUserId() {
  const KEY = 'todo-user-id'
  let userId = localStorage.getItem(KEY)

  if (!userId) {
    userId = 'user-' + Date.now()
    localStorage.setItem(KEY, userId)
  }

  return userId
}

✅ 3. App.vue에서 적용하기

📄 src/App.vue

<template>
  <div class="todo-container">
    <h2>🧾 할 일 관리 (수정 포함)</h2>
    <div class="form">
      <input v-model="newTodo" placeholder="할 일을 입력하세요" />
      <button @click="addTodo">추가</button>
    </div>
    <ul class="todo-list">
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :content="todo.title"
        :editing="editingId === todo.id"
        @delete="removeTodo(todo.id)"
        @edit="startEdit(todo.id)"
        @update="updateTodo(todo.id, $event)"
      />
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import TodoItem from './components/TodoItem.vue';

const API_URL = '/api/todos';

export default {
  components: { TodoItem },
  data() {
    return {
      newTodo: '',
      todos: [],
      editingId: null,
      userId: null, // userId를 상태로 관리
    };
  },
  mounted() {
    this.userId = this.getOrCreateUserId();
    this.fetchTodos();
  },
  methods: {
    getOrCreateUserId() {
      const KEY = 'todo-user-id';
      let id = localStorage.getItem(KEY);
      if (!id) {
        id = 'user-' + Date.now();
        localStorage.setItem(KEY, id);
      }
      return id;
    },
    async fetchTodos() {
      const res = await axios.get(`${API_URL}?user=${this.userId}`);
      this.todos = res.data;
    },
    async addTodo() {
      const title = this.newTodo.trim();
      if (!title) return;
      const res = await axios.post(API_URL, {
        title,
        completed: false,
        userId: this.userId,
      });
      this.todos.unshift(res.data);
      this.newTodo = '';
    },
    async removeTodo(id) {
      await axios.delete(`${API_URL}/${id}?user=${this.userId}`);
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    startEdit(id) {
      this.editingId = id;
    },
    async updateTodo(id, newTitle) {
      if (newTitle === null) {
        this.editingId = null;
        return;
      }
      const title = newTitle.trim();
      if (!title) return;

      await axios.put(`${API_URL}/${id}`, { title, userId: this.userId });
      this.todos = this.todos.map((todo) =>
        todo.id === id ? { ...todo, title } : todo
      );
      this.editingId = null;
    },
  },
};
</script>

<style scoped>
.todo-container {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 6px;
  font-size: 14px;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #36956d;
}

ul {
  list-style: none;
  padding: 0;
}
</style>

✅ 반영된 핵심 변경점 요약

✅ 4. 작동 흐름 요약

🧠 요약

FE 저장소

GitHub - heroyooi/vue2-app at ch11