다음은 새로운 ToDo를 목록에 추가하는 작업입니다.
새로운 ToDo 입력창이 form 으로 구성되어 있기 때문에 여러 속성을 주어 HTML Form 자체를 이용할 수도 있지만, 본 예제에서는 jQuery를 다양하게 이용해보기 위해 jQuery 함수를 이용합니다.
추가 기능의 의도하는 동작 시나리오는 다음과 같습니다.
- 입력창에 새로운 할 일을 입력합니다.
- 추가 버튼을 누릅니다.
- 목록에 새로운 할 일이 추가됩니다.
2번을 구현하기 위해서 $(element).click() 함수를 이용합니다. 이것은 선택한 요소를 클릭했을 때 어떤 행동을 할 것인지 정의합니다. 이 곳에서 add 요청을 보내면 추가 버튼을 클릭했을 때 입력한 새로운 할 일을 추가하도록 서버에 요청할 수 있습니다.
추가 버튼 DOM 요소를 잡기 위해 다음과 같은 셀렉터를 이용합니다.
$('.form-inline button')
.은 클래스를 의미하고, 두 규칙 간에 띄어쓰기가 있다면 왼쪽 규칙의 자식 중에 오른쪽 규칙이라는 의미입니다.
지난 강의에서 만들었던 list 요청은 GET 요청이었으나 add 요청은 정보를 서버에 보내서 저장하기 때문에 POST 요청을 보내야 합니다. 그리고 jQuery.ajax 함수는 기본 요청의 종류가 GET이므로 따로 POST 요청임을 설정해주어야 합니다. 이는 설정에서 method 값으로 줄 수 있습니다.
또한 어떤 할 일이 추가되었는지 정보를 보내야 하기 때문에 객체 형태로 contents를 보냅니다. 정보에 해당하는 설정 키는 data입니다. 입력한 할 일을 가져오기 위해서 $(element).val() 함수를 이용합니다. 이 함수는 선택한 요소의 value 속성을 가져옵니다. 요소가 input 일 경우, 입력한 내용을 가져옵니다.
3번을 구현하기 위해서 목록 가져오기 - todo.js에서 만들었던 list 요청을 다시 사용합니다. 같은 코드를 2번 쓸 경우, 유지 및 보수에 어려움이 있으므로 함수화합니다. list 요청을 get_list 함수로 정의한 후, DOM이 모두 준비되었을 때 호출합니다. 그리고 add 요청의 콜백 함수(success)로 get_list 함수를 전달합니다.