To Do List

프로젝트 버전

ver 1 업데이트 내용 (2023/12/13)

서버 구현 없이 동작하도록 프로토타입을 만들었습니다. 자세한 내용은 바닐라 자바스크립트로 To do list 만들기 ! 를 확인하세요 !

ver 2 업데이트 내용 (2024/01/11)

express 를 이용해 서버를 만들고 fetch 를 이용해 GET , POST , PUT , DELETE 메소드를 사용 할 수 있도록 만들었습니다.
달성한 목표는 달성하지 않은 목표 밑으로 내려가도록 업데이트 되었습니다. 자세한 내용은 fetch , express 이용하여 ToDoList 버전 업그레이드 하기 (CRUD) 를 확인하세요 !

프로젝트 설명

자바스크립트 단골 토이프로젝트인 TO DO LIST 를 구현해봤습니다.

목표 설정

자바스크립트의 이벤트 핸들러를 이용하여 input 에 적힌 목표를 동적으로 태그를 조작하여 게시판에 저장 할 수 있습니다.

로컬 호스팅 서버

터미널에서 sever 폴더에 들어가 node sever.js 로 http://localhost3000/todo 에 개인 서버를 호스팅 할 수 있습니다.

호스팅 한 서버에서 설정한 목표를 관리해보세요

`API` 관련 기능

`GET`

개인 서버를 호스팅하면 기본적으로 투두리스트는 서버에 GET 메소드를 이용해 개인 호스팅 서버에 저장된 데이터베이스와 연동됩니다.

`POST`

input 란에 목표를 설정한 후 Enter 키를 누르거나 버튼을 누르면 게시판에 목표가 게시 됩니다. 이후 게시된 목표는 서버에 POST 메소드를 이용해 JSON 파일 형태로 저장합니다.

// JSON 파일 형태 예시
{
    "uncompleted": [
        {
            "id": 1,
            "text": "치킨500개먹기"
        }
    ],
    "completed": [
        {
            "id": 1,
            "text": "피자 500개 먹기"
        }
    ]
}

`PUT`

목표를 달성하였다면 달성한 목표를 ⭕ 버튼을 눌러 다음 목표를 달성하세요. 달성된 목표는 하단으로 내려갑니다.

달성한 목표는 개인 호스팅 서버에서 uncompleted 배열에서 completed 배열 내 객체로 변경되며 객체의 id 는 자동으로 순서를 유지합니다.

`DELETE`

오늘 안으로 해결하기 힘든 목표는 ❌️ 키룰 눌러 삭제하세요 . 삭제한 목표는 개인 호스팅 서버 내에서 제거되며 객체의 id 는 자동으로 순서를 유지합니다.

프로젝트 설치 및 실행 방법

1. 프로젝트 다운로드

프로젝트를 로컬 환경으로 다운로드 합니다. 다운로드 방법은 다음과 같습니다.

터미널을 이용해 다운로드 할 수 있습니다.

git clone https://github.com/yonghyeun/ToDoList.git

또는 프로젝트를 zip 파일로 다운로드하여 압축을 해제합니다.

2. 필수 의존성 설치

프로젝트의 필수 의존성을 설치합니다.

터미널에서 프로젝트 루트 디렉토리 (프로젝트폴더가 존재하는 루트 폴더)로 이동한 후 아래 명령어를 실행합니다.

cd ToDoList
npm install

3. 서버 실행

서버를 실행하기 위해 server 폴더로 이동합니다.

cd sever

그 다음 명령어로 서버를 실행합니다.

node sever.js

서버가 성공적으로 실행되면 콘솔에 메시지가 표현됩니다.

Server is running on http://localhost:3000

4. 웹 애플리케이션 실행

docs 폴더 내에 존재하는 index.html 을 실행시켜주시고 사용하시면 됩니다.

5. 서버 종료

server 폴더에서 crtl + c 를 눌러 서버를 종료 할 수 있습니다.

현재 ver 2 에서는 서버가 종료되면 이전 게시글들은 모두 저장되지 않고 초기화 됩니다.

추후 업데이트 계획

ToDoList 에 뽀모도로 타이머 추가 예정
날짜별 ToDoList 를 저장 하고 조회 가능한 캘린더 기능 추가

yonghyeun/ToDoList