next-step / js-todo-list-step2 Goto Github PK

View Code? Open in Web Editor NEW

25.0 7.0 119.0 1.09 MB

License: MIT License

CSS 65.14% HTML 32.97% JavaScript 1.89%

js-todo-list-step2's Introduction

JS 투두리스트 스텝2

자바스크립트와 AJAX를 이용하여 구현 하는 투두리스트

🔥 Projects!

🖥️ 데모 링크

🎯 요구사항

🎯🎯 심화 요구사항

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을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.