오늘한일

오늘은 url주소를 통해서 데이터를 받아 핸들링하는 과제를 진행하였다.
저번에 배운 비동기 처리를 활용하여 과제를 원활히 해결하였고,
서버에서 데이터를 받아오는 연습이 된것같다.

Achievement Goals

(이해한대로 작성하였기에 틀릴수도 있습니다. 계속 공부하며 수정해 나가겠습니다.)

• 비동기 통신을 위한 fetch()함수 사용법에 대해서 이해하고있다.

• fetch()함수를 이용할때, Promise패턴을 적용할 수 있다.

비동기 통신

비동기 통신(네트워크 요청)은 비동기 요청의 가장 대표적인 사례라고 한다.
AJAX(Asynchronous Javascript and XML)은 웹 페이지의 이동없이
필요한 데이터만 전송하는 기술이다.
AJAX는 비동기적으로 실행되는데, 이에 대한 여러가지 방법이 있다.
이에 대해서는 내일 학습하는것 같다.

1. XML HttpRequest 객체
2. fetch API (ES6)
3. Axios 라이브러리
4. jQuery

오늘은 이중에서 fetch API를 이용해 네트워크 요청을 해보았다.

fetch API

fetch API는 자바스크립트 ES6의 비동기 통신 방법으로
자체로 Promise 객체를 반환하기에 함께 사용하기도 편리하다.
fetch() 메서드는 첫번째 인자로 URL,
두번째 인자로 옵션 객체를 받고,
Promise 타입의 객체를 반환한다.
반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고,
실패했을 경우에는 예외(error) 객체를 reject한다.

fetch() 사용법

fetch()는 구식 브라우저에선 지원하진 않지만(폴리필을 쓰면 사용 가능)
대부분의 모던 브라우저가 지원한다.
fetch()는 기본적으로 Promise 객체를 반환하기에 사용법이 비슷하다.

let url = 'https://v1.nocodeapi.com/codestates/google_sheets/YbFMAAgOPgIwEXUU?tabId=최신뉴스';
fetch(url)
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.log(error));

먼저, 서버에서 응답 헤더를 받자마자 fetch 호출 시 반환받은 promise가
내장 클래스 Response의 인스턴스와 함께 Fulfilled(이행) 상태가 된다.

.then()메서드를 통해 값을 받아오고 이를 .json() 메서드를 이용해
JSON 형태로 변환시켜서 다음 Promise로 전달한다.(promise chaining)

실사용 과제

fetch() 메서드를 이용하여 서버에서 최신뉴스와 날씨 데이터를 요청하여
받아온 데이터를 Promise.all()을 이용해 하나의 객체로 합쳐보기

1. 우선 정보를 요청할 URL을 변수에 각각 할당한다.

2. 함수 내부에 리턴문으로 Promise.all() 메서드를 사용한다.

3. 인자를 받는 배열 요소에 각각 fetch()메서드를 이용해 데이터를 요청한다.

4. 받아온 Response 객체를 .json()메서드를 이용해 JSON 형태로 변환시킨다.

5. 이때 .then()을 이용하여 값을 내려받고(promise chining) 마지막에 객체 형태로 합쳐 리턴한다.

async & await을 사용하면 더 가독성이 좋아진다.

참고 사이트

https://ko.javascript.info/promise-chaining
https://yeri-kim.github.io/posts/fetch/
https://webisfree.com/2019-05-15/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-fetch-api-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0
https://wooooooak.github.io/javascript/2018/11/25/fetch&json()/