# 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차 과제하기 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://simian114.gitbook.io/blog/undefined-1/diary/2021/april/20210415.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.