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 리스트 홈페이지 구성
    02 간단한 ToDo 리스트 만들기
    ToDo 리스트 홈페이지 구성

    백엔드 구현이 어느 정도 마무리되었으므로, 이제 프론트엔드를 구현합니다.

    먼저 이 예제에서는 간단한 ToDo 리스트 홈페이지 화면을 다음과 같이 구성할 것입니다.

    default
    상단에 소갯말이 들어가고, 차례로 할 일 추가 인터페이스와 할 일 목록이 표 형식으로 나타납니다.
    버튼과 표 등은 모두 Bootstrap 템플릿을 이용하여 꾸밉니다.

    Twitter Bootstrap은 예쁜 디자인은 물론, 크로스 브라우징, 반응형 디자인 등을 위한 UI/UX를 이미 만들어 놓은 CSS, 자바스크립트 프레임워크입니다. 이를 이용하면, 웹 페이지 프로토타입은 굉장히 빠르고 쉽게 만들 수 있습니다.
    질문하기