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.js는 ToDo 목록과 관련된 기능을 처리하기 위한 것입니다.
    todo.js에서는 다음 4가지의 요청을 처리합니다.
    1. list: 저장한 ToDo 목록을 불러옵니다.
    2. add: 새로운 ToDo 항목을 추가합니다.
    3. complete: 선택한 ToDo 항목을 완료합니다.
    4. del: 선택한 ToDo 항목을 삭제합니다.

    Node.js에서 파일 시스템을 다루기 위해서는 fs 모듈을 가져와야 합니다. fs 모듈은 파일의 존재 여부 확인, 파일 읽기 그리고 쓰기를 하도록 도와줍니다.

    list 핸들러에서는 먼저 저장된 목록이 있는지 확인합니다. 저장된 목록이 있으면 JSON 파일을 읽어서 보내고, 없다면 새로 todo_list.json 파일을 생성한 뒤 기본 ToDo 목록 형식을 보냅니다.

    여기서 파일을 읽을 때, 반드시 encoding 설정을 해주어야 합니다. 만약 encoding 을 utf8로 설정하지 않는다면, Buffer 데이터를 반환합니다.

    add 핸들러에서는 ToDo 항목의 내용을 받아서 추가합니다. 기본 ToDo 항목 형식의 contents 값을 변경하고, complete 값은 기본으로 둡니다. 이 새로운 ToDo 항목을 todo_list.json에서 읽어온 ToDo 목록에 추가하고, 다시 todo_list.json에 저장합니다.

    complete 핸들러에서는 완료한 ToDo 항목의 index를 받아서 완료 상태로 변경합니다. todo_list.json에서 읽어온 ToDo 목록에서 index에 해당하는 ToDo 항목의 complete 값을 true로 변경한 후, 다시 todo_list.json에 저장합니다.

    del 핸들러에서는 선택한 ToDo 항목의 index를 받아서 목록에서 제거합니다. todo_list.json에서 읽어온 ToDo 목록에서 index에 해당하는 ToDo 항목을 null로 만든 후, 목록을 유효한 것만 남도록 필터링합니다.

    Array.filter(Boolean)은 배열에서 유효한 값(1, true)만을 추려냅니다.

    유효한 값을 추려낸 목록을 다시 ToDo 목록에 저장하고, 그것을 다시 todo_list.json에 저장합니다.

    실습 내용
    실제 ToDo 목록 기능을 처리하는 todo.js 라우팅 핸들러를 살펴봅니다.
    질문하기