비동기 7 - Fetch API 2 : 실습 문제 풀기

실습 문제만 풀면 이 단원 학습도 마치게 된다. 오늘 저녁도 안 먹고 잠을 잤더니 배가 무척 고프기는 하지만 그래도 공부를 해볼 것이다.

---

 

 

 

 

 

실습 4 - 유저 정보 요청하여 변환하기

 

---

 

 

 

App.js

 

 

 

index.html

 

 

 

index.js

 

 

 

User.js

---

 

 

 

 

 

문제 풀기

 

1. 유저 정보를 변환하는 함수 작성하기

 

또는 이렇게 작성해도 된다. 유저를 거르는 필터 함수를 받는다.

 

 

---

 

 

 

 

2. transformUser 함수 작성하기

유저 이메일 정보 등을 변환하는 정보를 작성한다.

 

 

실행해보니 앱이 작동되지 않아 코드를 수정해보았다. 변수 이름과 함수 이름을 잘못 쓴 부분이 있었다.

---

 

 

 

 

3. 코드 수정하기

---

 

 

 

4. 코드 실행하기

 

 

 

 

 

데이터가 이렇게 요청되었다. 모두 40세 이상의 유저를 받을 수 있었다.

 

 

 

 

---

 

 

 

 

 

 

실습 5 - Posts 정보 조합하기

 

---

 

 

 

App.js

 

 

 

 

 

api.js

 

 

 

index.html

 

 

 

Posts.js

---

 

 

 

 

문제 풀기

 

1. 앱 실행하기

 

 

이제 코드를 작성하며 결과 정보를 확인해볼 것이다.

---

 

 

 

 

2. 유저 정보 만들기

Posts와 Users 정보를 가져온 후 합쳐서 그대로 리턴한다. 유저 맵을 만들어 유저 id를 작성한다.

 

---

 

 

 

3. createUserMap 만들기

 

이제 comment 정보를 받아와야 한다.

---

 

 

 

4. 커멘트 정보 받아오기

커멘트 정보를 flatMap을 이용해서 평평하게 펴는 작업을 한다.

---

 

 

 

 

5. 그 외에 전체 수정한 코드

앞에서 작성한 부분을 커멘트를 받았을 때의 코드로 수정한다. 모든 posts에 해당하는 정보를 찾는다. 여기서부터는 무슨 말인지 모르겠고 수정한 것이 너무 많아서 일일이 설명하기가 어렵다. 그냥 전체 코드를 붙여 본다.

 

---

 

 

 

6. 코드 실행하기

 

 

이런 식으로 엄청 많은 포스트 목록이 보인다.

 

 

 

 

 

제출도 잘 되었다.

---

 

 

 

 

학습을 마치고

실습 문제는 정말 많이 어려웠지만 이번 주차의 실습 문제는 모두 잘 완수했다. 정말 뿌듯하고 기쁘다. 이제 Ajax 수업만 들으면 비동기 공부도 거의 끝난다.

마지막 4주차 학습도 오늘 새벽까지 해서 모두 완료할 생각이다.