[191219] mission002

[eastjun-dev]

🔥 TODOS 시스템에 비동기/온오프라인을 고려하여 업데이트하기

mission001에서 TodoList의 기본적인 CRUD를 복습하였는데요. 이 기능들에 비동기 통신과, 온오프라인을 고려한 기능을 추가하려고 합니다. 요구사항은 아래와 같습니다.

🏴 Missions

fetch를 이용해 데이터 CRUD 하기

fetch를 이용해 Todo 목록 data를 불러오고, 특정 Todo를 삭제하고, 완료처리를 하는 것을 적용합니다.

json data

{
  "_id": 할 일의 고유값. 숫자와 문자가 섞여있는 문자로 되어있음,
  "content": 할 일 text,
  "isCompleted": 할 일의 완료여부
}

1. 불러오기

• API: http://todo-api.roto.codes/:username

api에는 username이 들어갑니다. 본인의 username이 들어가게 넣어주세요

fetch('http://todo-api.roto.codes/eastjun').then()...

2. 추가하기

• API: http://todo-api.roto.codes/:username

api에는 username이 들어갑니다. 본인의 username이 들어가게 넣어주세요

fetch('http://todo-api.roto.codes/eastjun', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    content: 'mission review 하기'
  })
}).then(function(){
  ....
})

3. 삭제하기

• API: http://todo-api.roto.codes/:username/:todo_id

서버에서 불러온 todo 데이터에 있는 _id를 이용해주세요.

fetch('http://todo-api.roto.codes/roto/5d11cf671e050d3f7c583166', {
  method: 'DELETE'
}).then(function(){
  ....
})

4. 토글

• API: http://todo-api.roto.codes/:username/:todo_id

서버에서 불러온 todo 데이터에 있는 _id를 이용해주세요.

fetch('http://todo-api.roto.codes/roto/5d11cf671e050d3f7c583166/toggle', {
  method: 'PUT'
}).then(function(){
  ....
})

5. localStorage에 데이터 넣기

• 하드코딩 된 mock데이터를 사용하는 경우 모두 삭제해주세요.
• localStorage를 활용해 todo data가 변경될 때마다 localStorage에 저장합니다.
• 프로그램에 초기에 접근할 때 localStorage에 저장해둔 데이터가 있다면 todo data를 가져옵니다.

localStorage

👨‍💻 Reviewer Match 👩‍💻

코드리뷰가 막막하다면 아래 가이드를 읽어보시면 도움이 될 거에요~!
코드리뷰 가이드

@eastjun

@s280493 @StellaKim1230 @ganeodolu

@YongHoonJJo

@eastjun @s280493 @ganeodolu

@StellaKim1230

@s280493 @ganeodolu @YongHoonJJo

@ganeodolu

@eastjun @StellaKim1230 @YongHoonJJo

@s280493

@YongHoonJJo @StellaKim1230 @eastjun

@amorfati0310

@eastjun @s280493 @ganeodolu

@HoseokNa

@eastjun @YongHoonJJo @StellaKim1230