Section2 Unit3 JS/Node 비동기 - fetchAPI

---

Section2 Unit3 [JS/Node] 비동기 - fetchAPI

 

📌 Chapter4. fetch API

• Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. Fetch API를 사용해 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.

 몇 번 사용해봐도 어렵다고 생각되었던 부분이라 여러 자료들과 수업내용을 바탕으로 Fetch API와 fetch() 메소드를 정말 간단하게 정리해보았다. 

간단하게 알아보는 Fetch API

 

⭐️ 과제. Part 3 - fetch API

• fetch를 이용해 HTTP 요청을 보내고, 응답을 받는 연습

• chaining과 Promise.all 그리고 async/await을 이용해서 구현

 

 

📌 과제 목표: 2개의 요청의 결과를 하나의 객체로 합치기

// latestNews.json

{
  "data": [
    {
      "row_id": 2,
      "title": "2021년 경제 성장률 전망 밝아",
      "source": "A신문",
      "timestamp": "2020/12/30"
    },
    {
      "row_id": 3,
      "title": "코로나19 증가추세 대폭 하락해",
      "source": "BBC",
      "timestamp": "2020/12/29"
    },
    {
      "row_id": 4,
      "title": "코드스테이츠 취업연계 파트너사 xxx건 돌파",
      "source": "스타트업 뉴스",
      "timestamp": "2020/12/31"
    }
  ]
}

// weather.json

{
  "status": "sunny",
  "temperature": "28",
  "fineDust": "good"
}

 

🐱 01_basicChaining.js

// newsURL = latestNews.json
// weatherURL = weather.json

function getNewsAndWeather() {
  // TODO: fetch을 이용해 작성합니다
  // TODO: 여러개의 Promise를 then으로 연결하여 작성합니다
  // TODO: Promise.all 또는 async/await을 사용하지 않고 풀어보세요
  
  const obj = {}; 
  
  return fetch(newsURL) // fetch로 Response 객체 리턴
    .then((res) => res.json()) // Response 객체에서 JSON 형식의 데이터를 추출하고, 이를 JavaScript 객체로 변환
    .then((data) => { // data는 반환된 객체 {data:Array(3)}
      obj.news = data.data; // data.data는 [{..}, {..}, {..}]
      return fetch(weatherURL); // 다시 fetch로 Response 객체 리턴
    })
    .then((res) => res.json()) // 위와 같은 작업 반복
    .then((data) => {
      obj.weather = data;
      return obj;
    })
    .catch((error) => console.log(error))
}

 

🐱 02_promiseAll.js

// newsURL = latestNews.json
// weatherURL = weather.json

function getNewsAndWeatherAll() {
  // TODO: Promise.all을 이용해 작성합니다

  // fetch로 Response 객체를 받아 JSON 형식의 데이터를 추출하고, 이를 JavaScript 객체로 변환
  const news = fetch(newsURL).then((res) => res.json());
  const weather = fetch(weatherURL).then((res) => res.json());

  console.log(news) // Promise {<pending>}
  console.log(weather) // Promise {<pending>}

  return Promise.all([news, weather]) // Promise.all로 한번에 처리
    .then((res) => { // res [{..news..}, {..weather..}]
      return { news: res[0].data, weather: res[1] }
    })
}

 

🐱 03_asyncAwait.js

// newsURL = latestNews.json
// weatherURL = weather.json

async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다

  // fetch로 Response 객체를 받아 JSON 형식의 데이터를 추출하고, 이를 JavaScript 객체로 변환하는데,
  // await를 사용해 Promise가 처리될 때까지 기다림
  const news = await fetch(newsURL).then((res) => res.json());
  const weather = await fetch(weatherURL).then((res) => res.json());

  console.log(news) // {data: Array(3)}
  console.log(weather) // {status: 'sunny', temperature: '28', fineDust: 'good'}

  return { news: news.data, weather: weather }
}

 

처음엔 어려워서 손도 못댔었는데, 이해하고 나니 재미었다고 생각한 문제! (이해하면 뭐든 재밌겠지...)

결국은 정말 간단한 최신 문법인 async/await를 사용하지 않을 이유가 없다는 생각이 들던 과제였다. 

 

---

🌙  오늘의 회고

 오늘도 어제랑 비슷했다… 과제 한다고 정신없었고, fetchAPI를 사용하는 과제도 헤맸다. fetch로 오픈 API도 몇 번 사용해봤는데, 과제로 다시 해보려니 잘 되지 않았다. 생각해보니 그 당시에 공부할 때도 fetch와 promise, then 메서드 등이 제대로 이해가 안되었는데 영상이나 구글링으로 코드를 따라 치고, 필요한 부분만 사용해서 정확한 이해가 되지 않았던 것 같다. 복습을 하면서 확실히 알고 넘어가야겠다는 생각이 들어서 저녁에 다시 한번 찬찬히 문서와 수업자료, 과제로 구현한 코드를 하나씩 뜯어보며 fetch와 promise, async와 익숙해지려고 했다. 한 번 다시 공부하고 나니 이해가 되는듯 했다. 어려운 개념은 아니었는데, 어렵게 생각하고 있었나 보다.

 내일부터는 드디어 리액트에 들어간다..!! 화이팅 🎈