[To-Do 앱]Vue.js/Node.js To Do Item 추가 기능 만들기

이번 포스트에서는  RESTful API중 POST 메서드를 이용해 To Do Item을 '추가'하는 기능을 만들도록 한다.

예상독자

• IntelliJ, Webstorm, Atom 등 자바스크립트 IDE중 하나를 설치했다.
• 자바스크립트를 좀 안다.
• 백엔드는 알아서 구현할 수 있거나 아래의 튜토리얼들을 마쳤다.
• [To-Do 앱]스프링부트(SpringBoot) 웹 어플리케이션)
• [To-Do 앱] 스프링 부트(Spring Boot) RESTful API - GET
• [To-Do 앱] 스프링 부트(Spring Boot) RESTful API - POST 
• [To-Do 앱]vue.js와 node.js를 이용해 웹 앱 만들기
• [To-Do 앱]Vue.js/Node.js 앱 에서 API Call 하기 (Axios)
  
• [To-Do 앱]Vue.js/Node.js Bootstrap-vue를 이용한 UI 구현
• 도커에 스프링 앱을 올리고 싶다면: 스프링 부트 도커에 올리기 (Dockerizing Spring Boot App) 참고

목표

• vue.js methods
• initToDoList method
• createToDo method

vue.js methods

vue.js의 컴포넌트는 name, data, methods, created(초기화 메서드)로 구성된다.

export default {
  name: 'name',
  data: () => {},
  methods: {
    method1: function () {},
    method2: function () {}
  },
  created () { /* init function */}
}

name은 이 뷰 컴포넌트를 구별하는 이름이고, 데이터는 이 컴포넌트(this)에 생성될 데이터들이다. 이름과 데이터처럼 이 뷰가 실행 할 수 있는 메서들을 methods라는 이름으로 정의 할 수 있다. 

initToDoList method

import axios from 'axios'

let baseUrl = 'http://127.0.0.1:5000/todo/'
export default {
  name: 'hello',
  data: () => {
    return {
      toDoItems: []
    }
  },
  methods: {
    initToDoList: function () {
      let vm = this
      axios.get(baseUrl)
        .then(response => {
          vm.toDoItems = response.data.map(r => r.data)
        })
        .catch(e => {
          console.log('error : ', e)
        })
    }
  },
  created () {
    this.initToDoList()
  }
}

일단 첫번째 메서드로 initToDoList메서드를 만들고 created초기화 함수가 이 메서드를 바로 콜 하도록 했다. 그리고 baseUrl을 스프링 부트앱의 todo로 설정 해 줬다. 

createToDo method

이제 아래와 같이 createToDo메서드를 만들어 보자.

import axios from 'axios'

let baseUrl = 'http://127.0.0.1:5000/todo/'
export default {
  name: 'hello',
  data: () => {
    return {
      toDoItems: [],
      newToDoItemRequest: {}                     // 새 To Do Item을 저장 할 오브젝트
    }
  },
  methods: {
    initToDoList: function () {
      let vm = this
      axios.get(baseUrl)
        .then(response => {
          vm.toDoItems = response.data.map(r => r.data)
        })
        .catch(e => {
          console.log('error : ', e)
        })
    },
    createToDo: function (event) {             
      event.preventDefault()
      let vm = this
      if (!vm.newToDoItemRequest.title) return    // To Do Item의 제목이 없으면 아무것도 안하고 리턴
      axios.post(baseUrl, vm.newToDoItemRequest)  // 아니면 스프링 부트 RESTful API에 POST 콜
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  created () {
    this.initToDoList()
  }
}

이렇게 하고 Template부분을 다음과 같이 고쳐보자.

<b-col sm="10">
  <b-form-input v-model="newToDoItemRequest.title" type="text"
                placeholder="새 할 일을 적으세요." v-on:keyup.enter="createToDo"/>
</b-col>
<b-col sm="2">
  <b-button variant="outline-primary" v-on:click="createToDo">추가</b-button>
</b-col>

추가된 어트리뷰트는 v-model="newToDoItem.title", v-on:keyup.enter="createToDo",  v-on:click="createToDo"이다. 

newToDoItem.title : 이 input form에 들어오는 값을 newToDoItem.title에 저장하라는 뜻이다.  newToDoItem은 위의 data에 정의되어 있다.

• v-on:keyup.enter : 유저가 엔터키를 누르면 쌍따옴표 안의 메서드를 실행하라는 뜻이다.
• v-on:click : 유저가 이 버튼을 클릭하면 쌍따옴표 안의 메서드를 실행하라는 뜻이다.

따라서 유저가 어떤 값을 input form에 입력하는 순간 그 값은 자동으로 newToDoItem.title로 들어가고, 이후 유저가 엔터를 치거나 추가 버튼을 클릭하는 순간 createToDo가 실행되면서 POST메서드를 실행한다. 이 포스트 메서드는 스프링 부트의 ToDoItemController.java의 create메서드를 실행시킨다.

ToDoItemController::create

@RequestMapping(method = RequestMethod.POST)
public @ResponseBody ToDoItemResponse create(@RequestBody final ToDoItemRequest toDoItemRequest) {
    List<String> errors = new ArrayList<>();
    ToDoItem toDoItem = ToDoItemAdapter.toToDoItem(toDoItemRequest);
    try {
        toDoItem = toDoItemService.create(toDoItem);
    } catch (final Exception e) {
        errors.add(e.getMessage());
        e.printStackTrace();
    }
    return ToDoItemAdapter.toToDoItemResponse(toDoItem, errors);
}

axios의 포스트 부분을 다시 보자.

axios.post(baseUrl, vm.newToDoItemRequest)

첫번째 인자로 baseUrl인 http://localhost:5000/todo/를 넘겨주고 두번째 인자로 vm.newToDoItem을 넘겨준다. url은 그렇다 치지만 두번째 인자는 무엇인가? 그렇다. 눈치 챘겠지만 두번째 인자로 들어가는 오브젝트(vm.newToDoItem)이 바로 ToDoItemController의 create메서드의 인자인 ToDoItemRequest인 것이다. 여기까지 다 수정했으면 이제 테스트를 해보자.

<버그가 존재하는 To Do 앱>

혹시 버그를 발견하지 않았는가? 추가를 눌러도 아무 일도 일어나지 않는다. 디벨로퍼 툴을 켜 console에 에러가 뜨는지 확인 해 보자. 에러가 뜨지 않는다. 무슨일일까? 새로고침을 해 보자. 새로고침을 해야 비로소 우리가 추가했던 할 일들이 한꺼번에 뜬다. 이 현상을 고치려면 어떻게 해야 하는가? 그렇다. createToDo를 마친 후 전체 To Do 리스트를 불러와 디스플레이 해 주어야 한다. 

vm.initToDoList()
vm.newToDoItemRequest = {}

post가 성공적으로 끝나고 response가 돌아오면 initToDoList를 불러 다시 toDoItems을 갱신 해 준다. 마찬가지로 현재 title에 값이 들어있는 newToDoItemRequest를 새 오브젝트로 갱신 해 준다.

createToDo: function (event) {
  event.preventDefault()
  let vm = this
  if (!vm.newToDoItemRequest.title) return
  axios.post(baseUrl, vm.newToDoItemRequest)
    .then(response => {
      console.log(response)
      vm.initToDoList()
      vm.newToDoItemRequest = {}
    })
    .catch(error => {
      console.log(error)
    })
}

이제 다시 실행 해보자.

위처럼 추가를 누르거나 엔터를 칠 때마다 아래에 아이템이 생긴다면 아이템이 하나씩 생성 되는 것을 확인 할 수 있다. 

끝

이번 포스트를 이용해 To Do 아이템을 추가하는 메서드를 작성하고, 이에 맞춰 템플릿을 수정 해 보았다. 다음 포스트에서는 PUT을 이용해 체크박스를 누르면 done값을 true로 변경하는 기능을 만들어 보도록 하겠다. 여기까지 잘 따라왔다면 Vue.js의 구조에 대해서 익숙 해 졌을 것이다. 사실상 여기서 부터는 스스로 검색해가며 기능을 추가해도 상관없다. 하지만 참고를 위해 나머지 수정 및 삭제 기능 구현도 이 블로그에서 다루도록 하겠다.

다음 포스트 : [To-Do 앱]스프링 부트(Spring Boot) RESTful API - PUT & Vue.js/Node.js Update 기능 구현