홈페이지에 들어오면 그동안 내가 저장한 ToDo 목록이 먼저 나타나야겠죠? 이번 강의에서는 목록 가져오기를 구현합니다.
홈페이지에 들어와서 DOM이 준비되었다는 것은 다음 함수를 통해 알 수 있습니다.
$(document).ready()
위 함수의 인자로 콜백 함수를 주면, 모든 DOM 요소가 준비되었을 때 콜백 함수가 실행됩니다. 이 때, 할 일 목록을 가져옵니다.
라우팅 정의 - todo.js에서 list 핸들러를 만든 것을 기억하시나요? list 요청을 보내면 todo_list.json을 읽어서 저장된 ToDo 목록을 가져옵니다. 요청을 보낸 후, 결과를 받기 위해서는 success 옵션을 설정해주어야 합니다. success 옵션은 요청이 성공적으로 보내졌을 때 불립니다. 이에 함수를 주면 인자로 서버에서 보낸 데이터를 받습니다.
가져온 목록을 tr 태그와 td 태그로 감싸 tbody 태그에 붙여넣으면, 내가 저장한 ToDo 목록이 페이지에 나타나게 됩니다.
여기서 tr 태그는 행을 의미하고, td 태그는 열을 의미합니다. 그리고 tbody 태그는 표의 내용을 의미합니다. 태그 요소는 다른 표시 없이 바로 다음과 같이 잡을 수 있습니다.
$('tag')