> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/april/20210415.md).

# 20210415(목)

## 20210415(목)

### 1. 학습 날짜

* 2021-04-15

### 2. 학습 시간

* 10:00 \~ 14:00

### 3. 학습 범위 및 주제

* todo 앱 리팩토링
* fetch 학습

### 4. 학습 목표

* todo 리팩토링
* fetch 학습

### 5. 학습 정리

* x

### 6. 상세 학습 내용

* todo 앱을 리팩토링했다. PR 리뷰를 토대로 수정을 했는데, 리뷰의 내용을 보니 내 코드에는 문제가 생각보다 많았었다.
* 일단 내가 생각할 때 가장 문제가 되는 부분은 코드의 중복이다.
* 코드의 중복이 나오게 된 원은은 간단하다. 만약 `update` 라는 함수가 있다면 이 `update` 로 `status`, `complete` 등의 값을 업데이트 한다고 할떄 인자등을 주는 방식으로 하면 오류가 날 수 있고 알아보기가 힘드니 이걸 `updateStatus`, `updateComplete` 와 같은 함수로 만들어서 사용할 때 보다 명확히 하게 만들었었다.
* 여기까지는 좋다. 다만, 방금 만든 2개의 update 메서드는 한줄을 제외하고는 완전 동일한 코드기 때문에 엄청난 중복이 발생해버린다.
* 따라서 중복되는 부분을 메서드로 빼서 관리하게 만들면 너무나 좋을텐데, 난 그렇게 하지 않았다.
* 즉 리팩토링이 전혀 되지 않은 코드였다.
* 이건 나의 과정보다는 결과가 중요하다는 신념이 조금 많이 작용한거 같다. 또한 이 프로젝트가 팀프로젝트가 아닌 혼자서 진행하는 프로젝트라서 그런면도 있는거같다.
* 아무튼 이런 문제를 발견했다.
* fetch 로 데이터 가져오기
  * fetch의 리턴값은 promise 객체다. 그리고 이 promise 객체가 resolve 되면 response 객체가 나온다.
  * response 객체를 출력한다고 해서 모든 정보가 다 나오지 않는다. 지금 현재 이 response 객체로 할 수 있는건 status의 확인이 전부라고 봐도 무방하다.
  * 그러면 body 등의 정보는 어떻게 들거오냐? 간단하다. `response.json()` 등으 메서드를 사용하면된다.
  * 자 여기서 또 문제가 발생한다. `response.json()` 메서드는 프로미스를 기반으로 동작한다. 즉 리턴값이 프로미스 라는 것이다.
  * 다시 한번 여기서 then 등을 사용해서 `promise` 가 resolve 가 되기를 기다려야 한다. 
  * 그렇게 기다린 다음 사용하면 된다.
  * 방금 promise 가 resolve가 되기를 then 을 사용해서 기다린다고 했는데, 이보다 더 멋진? 그런 방법이 존재한다.
  * 바로 async 와 await 를 사용하는 것이다.
  * 간단하게 async를 사용하면 그 함수가 비동기 처리가 되는 것이다.
  * 이제 async 함수에서 비동기관련 메서드들을 실행시키자.
  * 그러면 await는 무엇이냐. 이름 그대로 무언가를 기다리는 키워드다. 그러면 무엇을 기다려? 바로 promise 가 리졸브 되기를 기다린다!
  * 즉 이전에는 then 을 사용해서 인자로 들어간 프로미스가 리졸브 되기를 기다렸지만 이제는 async 함수 안에서 await 만들 사용하면 resolve 가 된 데이터가 나온다!

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 오늘도 변명이지만.... 윗집과 전쟁을 하느라 하.... 답답하다...

### 8. 다음 학습 계획

* vue 를 이용한 todo 앱 만들어보기
* 블랙커피스터디 2차 과제하기