To Do List 앱

실습하기

/**
 * 할 일 목록 렌더링 함수
 * REST API - GET 설정
 */
// 실제로 데이터를 화면에 뿌리는 중요한 역할을 한다.
// init() 함수에서 실행된다.
function renderTodoItems() {
  // $todo_list 내부 HTML 제거
  $todo_list.html('')
  // 로딩 스피너 보임
  // 사용자에게 로딩되고 있다는 것을 알려주어야 한다.
  $spinner.show()
  // REST API :: GET
  // 로딩 스피너를 감추거나 내부에 template를 삽입하는 것은 비동기 통신이 끝난 다음에 실행 해야한다.
  $.get(rest_api).done(function (data) {
    var template = ''

    data.forEach((todo) => {
      var id = todo.id
      var time = todo.time
      var content = todo.content

      template += `\
      <li class="app-todo__item" data-index="${id}">\
      <time class="app-todo__item-time">${time}</time>\
      <strong class="app-todo__item-todo">${content}</strong>\
      <button type="button" class="app-todo__item-remove-button" aria-label="Remove To do"></button>\
    </li>\
    `
    })
    // 로딩 스피너 감춤
    $spinner.hide()
    // $todo_list 내부에 template 삽입
    $todo_list.html(template)
  })
}

문자열 접합 다시 실습 할 때, 놓쳤던 부분

• var template =''빈 문자열을 먼저 선언해 주지 않아서 계속해서 template를 찾을 수 없다는 오류 메세지가 떴다. 먼저 선언하고 빈문자열 만들어주기

• += 복합 대입 연산자를 사용하지 않아서 배열의 마지막 객체만 화면에 레더링 되었다. 잊지 말기!

REST API 메서드 단축 함수

  /**
   * REST API 메서드 단축 함수
   */
  function restApiGet(url, cb) {
    $.get(url).done(cb)
  }
  // o => 전달할 데이터 객체
  function restApiPost(url, o, cb) {
    $.post(url, o).done(cb)
  }
  function restApiPut(o, cb) {
    $.ajax({
      method: 'PUT',
      data: o,
    }).done(cb)
  }
  function restApiDelete(id, cb) {
    $.ajax({
      url: rest_api + '/' + id,
      method: 'DELETE',
    }).done(cb)
  }

참고

• jQuery 라이브러리 (DOM + Ajax)

• To Do List - MVC

실습 자료

할 일 목록 앱 UI / 인터랙션 디자인