TODO 앱을 직접 만들면서 배우는 node.js / express / bootstrap / jquery
    • 01
      서문
    • 누구를 위한 실습인가
      활용하는 법
      실습을 위해 필요한 것
    • 02
      간단한 ToDo 리스트 만들기
    • 실습 목표
      프로젝트 시작하기
      웹 서버 만들기 - app.js
      라우팅 정의 - index.js
      ToDo 목록 구조
      라우팅 정의 - todo.js
      ToDo 리스트 홈페이지 구성
      템플릿 - index.ejs
      서버로 요청 보내기
      목록 가져오기 - todo.js
      새 ToDo 추가하기 - todo.js
      ToDo 완료/삭제하기 - todo.js
      정리
      도전 문제
    목록 가져오기 - todo.js
    배우기
    02 간단한 ToDo 리스트 만들기
    목록 가져오기 - todo.js

    홈페이지에 들어오면 그동안 내가 저장한 ToDo 목록이 먼저 나타나야겠죠? 이번 강의에서는 목록 가져오기를 구현합니다.

    홈페이지에 들어와서 DOM이 준비되었다는 것은 다음 함수를 통해 알 수 있습니다.

    $(document).ready()

    위 함수의 인자로 콜백 함수를 주면, 모든 DOM 요소가 준비되었을 때 콜백 함수가 실행됩니다. 이 때, 할 일 목록을 가져옵니다.

    라우팅 정의 - todo.js에서 list 핸들러를 만든 것을 기억하시나요? list 요청을 보내면 todo_list.json을 읽어서 저장된 ToDo 목록을 가져옵니다. 요청을 보낸 후, 결과를 받기 위해서는 success 옵션을 설정해주어야 합니다. success 옵션은 요청이 성공적으로 보내졌을 때 불립니다. 이에 함수를 주면 인자로 서버에서 보낸 데이터를 받습니다.

    가져온 목록을 tr 태그와 td 태그로 감싸 tbody 태그에 붙여넣으면, 내가 저장한 ToDo 목록이 페이지에 나타나게 됩니다.

    여기서 tr 태그는 행을 의미하고, td 태그는 열을 의미합니다. 그리고 tbody 태그는 표의 내용을 의미합니다. 태그 요소는 다른 표시 없이 바로 다음과 같이 잡을 수 있습니다.

    $('tag') 

    실습 내용
    홈페이지 접속시 할 일 목록을 가져옵니다.
    질문하기