4. Todo App 구현 - 할 일 저장

freejia·2021년 10월 19일
0

캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex강의를 정리했습니다.
매일 20분 야금야금 Vue.js 중급 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools


TodoInput 컴포넌트의 기능

input 태그에 텍스트를 입력하면, 입력한 값을 로컬 스토리지에 저장한다.

input에 v-model로 데이터 바인딩

1. input에 입력된 값을 동적으로 뷰 인스턴스에 바인딩한다.

입력한대로 newTodoItem에 값이 들어간다. (뷰의 반응성 확인)

뷰 인스턴스에 newTodoItem 을 선언하고,

<script>
export default {
  data: function(){
    return {
      newTodoItem: ""
    }
  }
}
</script>

input태그에 v-model로 바인딩한다.

<template>
  <div>
    <input type="text" v-model="newTodoItem">
  </div>
</template>

2. 버튼 클릭 이벤트에 addTodo메서드 연결하기

버튼에 클릭이벤트를 만들어서 addTodo()메서드를 실행 시키도록 한다

    <input type="text" v-model="newTodoItem">
    <button v-on:click="addTodo">add</button>

3. localStorage 에 저장한다

key, value 형태로 저장할 수 있는데, 둘 다 입력값으로 저장하자.

localStorage
브라우저 탭이나 창 하나에서만 유지되는 작은 저장소.
탭을 닫으면 localStorage도 지워진다.
브라우저 내에 localStorage 는 페이지 프로토콜 별로 구분한다.
참고 localStorage MDN Docu

  methods: {
    addTodo: function(){
      // 저장하는 로직 (key valeu를 통일하게 )
      localStorage.setItem(this.newTodoItem, this.newTodoItem);
      this.newTodoItem = '';
    }
  }

개발자 도구 Application 탭에서 확인할 수 있는 localStorage

프로토콜마다 구분되므로 HTTP 에서 저장한 데이터와 HTTPS에서 저장한 데이터는 따로 구분되어 저장된다.

상단의 '중지'버튼을 누르면 저장소가 초기화된다.

[TodoInput.vue] (리팩토링 전) 전체 코드

<template>
  <div>
    <input type="text" v-model="newTodoItem">
    <button v-on:click="addTodo">add</button>
  </div>
</template>

<script>
export default {
  data: function(){
    return {
      newTodoItem: ""
    }
  },
  methods: {
    addTodo: function(){
      // 저장하는 로직 (key valeu를 통일하게 )
      localStorage.setItem(this.newTodoItem, this.newTodoItem);
      this.newTodoItem = '';
    }
  }
}
</script>

<style>

</style>

TodoInput 리팩토링

addTodo 메서드에는 저장 기능과 input 태그 초기화 기능이 있다.
input을 초기화 하는 코드는 clearInput 메서드로 따로 분리하자.

  methods: {
    addTodo: function(){
      localStorage.setItem(this.newTodoItem, this.newTodoItem);
      this.clearInput();
    },
    clearInput: function(){
      this.newTodoItem = '';
    }

  }

TodoInput 스타일링

style scoped 태그 쪽에 코딩하여 스타일링하자.

plus아이콘 추가해보기

1) 아이콘은 'Font awesome'에서 검색하자.
회원 가입하고 이메일 인증 후, 마이 페이지에 나와있는 CDN을 index.html에 복붙하자.
참고: CDN(Contents Delivary Network)은 정적 리소스에 다운받을 정보의 주소와 종류를 넣은것이다.

[CDN을 추가하는 index.html 파일 경로 유의하기]
프로젝트명/public/index.html

2) font awesome에서 'plus' 검색

3) 아이콘의 html 복사해서 필요한 곳에서 사용

[TodoInput.vue] (리팩토링 및 스타일링 후) 전체 코드

<template>
  <div class="inputBox shadow">
    <input type="text" v-model="newTodoItem">
    <!-- <button v-on:click="addTodo">add</button> -->
    <span class="addContainer" v-on:click="addTodo">
      <i class="fas fa-plus"></i>
    </span>
  </div>
</template>

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

<style scoped>
input:focus {
  outline: none;
}
.inputBox {
  background: white;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
}
.inputBox input {
  border-style: none;
  font-size: 0.9rem;
}
.addContainer {
  float: right;
  background: linear-gradient(to right, #6478fb, #8763fb);
  display: block;
  width: 3rem;
  border-radius: 0 5px 5px 0;
}
.addBtn {
  color: white;
  vertical-align: middle;
}
</style>

다음 시간에는 localStorage에 저장한 할 일들을 '목록에 표시'하는 기능을 구현한다.

profile
코딩 리딩 라이딩💛

0개의 댓글