예제 번역: /examples/todomvc

Author: niceplugin

ko-KR/src/examples/src/todomvc/App/composition.js

@@ -10,20 +10,20 @@ const filters = {
 
 export default {
   setup() {
-    // state
+    // 상태
     const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
     const visibility = ref('all')
     const editedTodo = ref()
 
-    // derived state
+    // 파생된 상태(계산된 속성)
     const filteredTodos = computed(() => filters[visibility.value](todos.value))
     const remaining = computed(() => filters.active(todos.value).length)
 
-    // handle routing
+    // 라우팅 핸들링
     window.addEventListener('hashchange', onHashChange)
     onHashChange()
 
-    // persist state
+    // 상태 저장
     watchEffect(() => {
       localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value))
     })

ko-KR/src/examples/src/todomvc/App/options.js

@@ -7,14 +7,14 @@ const filters = {
 }
 
 export default {
-  // app initial state
+  // 상태 초기화
   data: () => ({
     todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),
     editedTodo: null,
     visibility: 'all'
   }),
 
-  // watch todos change for localStorage persistence
+  // todos의 변경사항을 감지하여 localStorage에 저장
   watch: {
     todos: {
       handler(todos) {
@@ -38,8 +38,8 @@ export default {
     }
   },
 
-  // methods that implement data logic.
-  // note there's no DOM manipulation here at all.
+  // 데이터 로직을 구현하는 메소드.
+  // 여기에는 DOM 조작이 전혀 없습니다.
   methods: {
     toggleAll(e) {
       this.todos.forEach((todo) => (todo.completed = e.target.checked))

ko-KR/src/examples/src/todomvc/App/template.html

@@ -1,10 +1,10 @@
 <section class="todoapp">
   <header class="header">
-    <h1>todos</h1>
+    <h1>해야 할 일</h1>
     <input
       class="new-todo"
       autofocus
-      placeholder="What needs to be done?"
+      placeholder="무엇을 해야 하나요?"
       @keyup.enter="addTodo"
     >
   </header>
@@ -16,7 +16,7 @@ <h1>todos</h1>
       :checked="remaining === 0"
       @change="toggleAll"
     >
-    <label for="toggle-all">Mark all as complete</label>
+    <label for="toggle-all">모두 완료로 표시</label>
     <ul class="todo-list">
       <li
         v-for="todo in filteredTodos"
@@ -45,21 +45,21 @@ <h1>todos</h1>
   <footer class="footer" v-show="todos.length">
     <span class="todo-count">
       <strong>{{ remaining }}</strong>
-      <span>{{ remaining === 1 ? 'item' : 'items' }} left</span>
+      <span>개 남음</span>
     </span>
     <ul class="filters">
       <li>
-        <a href="#/all" :class="{ selected: visibility === 'all' }">All</a>
+        <a href="#/all" :class="{ selected: visibility === 'all' }">전체</a>
       </li>
       <li>
-        <a href="#/active" :class="{ selected: visibility === 'active' }">Active</a>
+        <a href="#/active" :class="{ selected: visibility === 'active' }">해야할 일</a>
       </li>
       <li>
-        <a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a>
+        <a href="#/completed" :class="{ selected: visibility === 'completed' }">완료된 일</a>
       </li>
     </ul>
     <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
-      Clear completed
+      완료된 것 삭제
     </button>
   </footer>
 </section>

ko-KR/src/examples/src/todomvc/description.txt

@@ -1,2 +1,2 @@
-A fully spec-compliant TodoMVC implementation
+완벽히 구현된 TodoMVC
 https://todomvc.com/