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
      정리
      도전 문제
    도전 문제
    02 간단한 ToDo 리스트 만들기
    도전 문제

    ToDo 목록 만들기 예제에 다양한 기능을 넣어보세요.

    1. 새로운 할 일을 추가할 때, 엔터 키를 입력하여 추가하기
    2. 완료된 할 일은 아래로 정렬하기
    3. 여러 할 일을 한 번에 처리하기
    4. 표와 관련된 다른 라이브러리 적용하기 (예시: jQuery DataTables)
    5. UI를 더 예쁘게 꾸며보기
    6. 할 일 목록을 데이터베이스에 저장하기 (예시: MongoDB)


    [참고] 구름IDE에서 바로 실습하실 수 있습니다.

    1. 구름IDE에 컨테이너 생성시 GitHub 저장소에서 본 과목의 예제 프로젝트를 클론받으세요. [도움말 보기]
    2. 생성한 컨테이너를 실행하고 필요한 노드 모듈을 설치하세요.
      1. 터미널에 npm install 을 입력하여 설치합니다.
    3. 어플리케이션에 접속할 URL을 생성하세요. [도움말 보기]
      1. 예제 프로젝트는 기본 포트가 3000입니다.
    4. 빌드/실행 설정에서 실행 형태를 서버로 변경하고 실행 파일을 app.js 로 지정하세요. [도움말 보기]
    5. 툴바에서 실행 버튼을 눌러 어플리케이션을 실행하세요.
    6. URL에 접속하여 어플리케이션의 실행을 확인합니다.
    7. 좌측 프로젝트 탐색기에서 파일을 열어 도전 문제를 풀어보세요!


    [참고] 구름IDE에 MongoDB 설치하기

    1. 터미널에 다음 명령어를 차례대로 입력하세요. [도움말 보기]
      1. sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
        echo "deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
        sudo apt-get update
        sudo apt-get install -y mongodb-org
        mkdir -p /data/db
    2. 새 창 터미널을 열고 mongod 를 입력하여 DB 서버를 켭니다. [도움말 보기]
    3. 새 창 터미널을 열거나 하단 터미널에 mongo 를 입력하면 mongo shell 을 이용할 수 있습니다. 
    질문하기