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차 과제하기