TIL_210725

1. Facts(사실, 객관)

- 캡틴판교 vue 중급강의 TodoList 만들기, 리팩토링

2. Feelings(느낌, 주관)

- 기존에 간단히 만들었던 form과 컴포넌트에서 이제 실제로 vue의 구조를 이용해서 만들었습니다. 처음 느낀 것은, 정말 컴포넌트가 잘 나누어져있다는 것입니다. <template>, <script>, <style>에 따라서 각각 파일들은 명확히 자신의 일을 구분할 수 있습니다. 단지, 상위 컴포넌트에서 하위 컴포넌트에 props 를 내려주거나, 하위컴포넌트에서 이벤트를 발생시켰을 때, 어느 파일에서 전달하는지는 규모가 클수록 알기 어렵다고 생각을 들었습니다.

 

3. Findings (배운 점)

*Notion에 정리한 내용

- 프로젝트 구현

https://www.notion.so/c46b71e9420a4dd482413a505a692635

 

[[TodoInput.vue]]
<template>
 <input type="text" v-model="newTodoItem">
 <button v-on:click="addTodo">add</button>
</template>

<script>
 export default {
  data: function() {
   return {
    newTodoItem : ""
   }
  },
  components: {
   addTodo: function() {
    localStorage.setItem(this.newTodoItem, this.newTodoItem);
   }
  }
 }
</script>

v-model을 사용하면 동적으로 input에 입력하는 값과 vue의 data의 값이 동기화가 된다.

 

또하 이제 export default{} 안에 data를 담는다. 그런데, 각 컴포넌트의 값이 중복되거나 겹치는 것을 예방하기 위해서, data:function( { return {] })의 형식을 사용한다.

 

* v-model은 어떻게 작동할까?

https://joshua1988.github.io/web-development/vuejs/v-model-usage/

 

[[TodoList.vue]]
<template>
 <div>
  <ul>
   <li v-for:"todoItem in todoItems" v-bind:key="todoItem">
   {{ todoItem }}
   </li>
  </ul>
 </div>
</template>

v-for를 이용해서 리스트를 렌더링 할 수 있다.