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

[ganeodolu]

7 미션002

구현

• [x] 비동기로 데이터 불러오기
• [x] 비동기로 데이터 추가하기
• [x] 비동기로 데이터 삭제하기
• [x] 비동기로 데이터 토글하기
• [x] on/offline을 고려하여 localStorage 활용하기

로토님의 미션4 boilerplate를 참고하여 작성하였습니다. 수업들을 때는 PR 올리지도 못했었는데 흉내라도 내었더니 뿌듯하면서도 갈 길이 구만리라 잘 갈 수 있을까?라는 걱정도 들었습니다. 아직 this, fetch 활용이 미숙한 상태로 기능구현만 하다보니 버그가 많이 있습니다.

질문 1. App.js에서 import, export를 기능을 추가하기 위해 아래 코드와 같이 바꾸고,

export default async function app(){
 const data = await fetchData()
 this.data = data
......
}

아래와 같이 index.js에서 app을 import 후에 new app()을 사용하려고 하니, import app from './App.js' new app() ..... app이 생성자가 아니라고 하여 실행이 되지 않았습니다. 그래서 app함수안에 (async function(){} 을 넣어서 해결하고자 하였으나 해결되지 않아서 index.js에서 new app()대신에 app()을 사용 후 App.js에서 this.data를 data로 모두 바꿨습니다. 결국 import 기능은 썼으나 생성자 기능은 버린 코드가 되었습니다. 둘 다 가능하게 만들 수 있을까요??

질문 2. 해결 할일 추가후 바로 토글이나 삭제를 누르면 id를 못 찾아서 실행이 안되는데, index는 맞으나 id가 맨 뒷자리만 이상한 녀석이 들어가 있었습니다. api 목록에는 있지도 않은 id인데 어떻게 불러오게 된 것인지 잘 이해가 되지 않았습니다.

TodoList.js에서 토글이나 삭제버튼을 눌렀을 때 this를 사용하지 않아서 발생한 문제였습니다. ㅎㅎ const id = this.data[index]._id

질문 3. 해결 미션 1때 remote repository에 setting.json와 같이 필요없는 파일을 업로드시 제외하면 좋겠다라는 코멘트가 있어서 gitignore를 바꾸었더니 gitignore가 새로 업로드 되었습니다. 이게 맞는 건가요?? :sweat_smile:

[YongHoonJJo]

방금 테스트 해봤는데, async function 으로는 new 키워드를 통한 호출이 안되는 것 같습니다..

[ganeodolu]

방금 테스트 해봤는데, async function 으로는 new 키워드를 통한 호출이 안되는 것 같습니다..

@YongHoonJJo 네 그래서 요런식으로 해보려고 했는데 아직 성공하지 못했어요. export default function app(){ ;(async function(){

[ganeodolu]

new app() 에서 생성자가 아니라 실행 안 된 이유는, App.js 가 async~await 구문을 사용하면서 return하는 값이 Promise여서 그런 것 같습니다. 전, gitignore 사용할 때 아래 링크를 참고하는 편입니다. 참고

@StellaKim1230 생성자는 function을 Object로 변환하고, async는 function을 Promise generator로 바꾸기 때문에 생성자는 async와 같이 사용될 수 없다고 이해하면 되겠죠?? 덕분에 Promise에 대해서 공부하게 되었습니다. gitignore.io 도 잘 참고하겠습니다.