junwork123 / modern-js-todo-list

Modern JS Todo List

🔥 Projects!

🖥️ 데모 링크

🎯 요구사항

• 1. User 추가하기
• 2. User의 투두리스트 불러오기
• 3. User 삭제하기
• 3. todoItem 추가하기
• 4. todoItem 불러오기
• 5. todoItem complete하기
• 6. todoItem 삭제하기
• 7. todoItem contents 내용 수정하기

🎯🎯 심화 요구사항

• 1. fetch api 사용하는 부분을 async await을 사용하여 리팩토링하기.
• 2. github issue에서 라벨을 붙이는 것처럼, 우선순위에 따라서 label를 추가하기.
• 3. ES6 impot & export를 이용해 자바스크립트 파일을 리팩토링하기.

🕵️‍♂️ 제약사항

• 1. User의 이름은 최소 2글자 이상이어야 한다.
• 2. TodoItem Contents는 최소 2글자 이상이어야 한다.

📝 API

User list 불러오기

method	uri
GET	/api/users

{
 response: [...]
}

User 추가하기

method	uri
POST	/api/users

{
 requestBody: {
   "name": "string"
 },
 response: {
   "_id": "string",
   "name": "string",
   "todoList": []
  }
}

User 불러오기

method	uri
GET	/api/users/:userId

{
 response: {
   "_id": "string",
   "name": "string",
   "todoList": [...]
  }
}

User 삭제하기

method	uri
DELETE	/api/users/:userId

{
  response: {
  }
}

User의 Todo Item 불러오기

method	uri
GET	/api/users/:userId/items/

{
 response: [...]
}

User의 Todo Item 추가하기

method	uri
POST	/api/users/:userId/items/

{
 requestBody: {
   "contents": "string"
 },
 response: {
   "_id": "string",
   "name": "string",
   "todoList": [...]
  }
}

User의 Todo Item 전부 삭제하기

method	uri
DELETE	/api/users/:userId/items/

{
 response: {
   "_id": "string",
   "name": "string",
   "todoList": []
  }
}

User의 Todo Item 1개 삭제하기

method	uri
DELETE	/api/users/:userId/items/:itemId

{
 response: {
   "_id": "string",
   "name": "string",
   "todoList": [...]
  }
}

User의 Todo Item 내용 수정하기

method	uri
PUT	/api/users/:userId/items/:itemId

{
 requestBody: {
   "contents": "string"
 },
 response: {
  "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean"
  }
}

User의 Todo Item 우선순위 수정하기

method	uri
PUT	/api/users/:userId/items/:itemId/priority

{
 requestBody: {
   "priority": "string" // 'NONE', 'FIRST', 'SECOND'
 },
 response: {
   "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean"
  }
}

User의 Todo Item complete toggle

method	uri
PUT	/api/users/:userId/items/:itemId/toggle

{
 response: {
   "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean"
  }
}

⚙️ Before Started

로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법

로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 npm install 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.

npm install -g live-server

실행은 아래의 커맨드로 할 수 있습니다.

live-server .

윈도우에서 실행 시 보안 오류가 발생하는 경우

# Powershell 관리자 모드에서
Set-ExecutionPolicy Unrestricted

📝 License

This project is MIT licensed.

modern-js-todo-list's Issues

User 추가하기

todoItem 불러오기

todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

todoItem 삭제하기

User의 투두리스트 불러오기

github issue에서 라벨을 붙이는 것처럼, 우선순위에 따라서 label를 추가하기.

todo list의 체크박스를 클릭하여 complete 상태로 변경

(li tag 에 completed class 추가, input 태그에 checked 속성 추가)

localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기

새로고침하여도 저장된 데이터를 확인할 수 있어야 함

todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제

새로운 아이템 추가시 필터기능이 유지되지 않음

ES6 impot & export를 이용해 자바스크립트 파일을 리팩토링하기.

todo list에 todoItem을 키보드로 입력하여 추가하기

todoItem contents 내용 수정하기

fetch api 사용하는 부분을 async await을 사용하여 리팩토링하기.

todo list를 더블클릭했을 때 input 모드로 변경

(li tag 에 editing class 추가)
단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀

User 삭제하기

todoItem complete하기

User마다 Todo List를 소유할 수 있어야 한다

todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기

todoItem 추가하기