2021년 5월 18일 코드스테이츠 DAY-44 fetch API 예습 및 응용 예제(랜덤 고양이 생성하기) 만들어보기(feat. vanilla javascript)

동기 비동기 스프린트가 끝나고 다음 일정을 확인해보니 fetch API가 있었다. 

 

UR클래스 상의 fetch API를 활자로만 보니 너무너무 재미없었다. 

 

사실 API라는 것을 활용하면 참 많은 것을 할 수 있을 텐데...라는 생각이 들었고

 

진짜배기 fetch API를 온몸으로 느끼기 위하여 API를 받아오는 것부터 시작하여 

 

API를 받아서 바로 웹브라우저에 넣는 실험 그리고 유튜브에 재밌어 보이는 예제가 있어서 

 

그 예제를 구현해보는 것 까지 공부를 진행하게 되었다.

 

일단 fetch API가 뭔지 알아보기 위해 UR클래스에서 시키는 대로 진행을 했다. 

 

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));

이 코드를 개발자 콘솔에 입력해보라고 해서 입력을 했고 그 결과 아래와 같은 화면을 확인할 수 있었다.

예상한 결과였지만 그래도 신기했고 API에서 뽑은 데이터를

 

바로 화면에 나타내 볼 수 있을까라는 생각에 실험을 시작하게 되었다. 

데이터 중 title만 담은 배열을 뽑아서 출력할 수 있는 상태가 되었고

 

그러면 이것들을 어떻게 웹브라우저에 넣을까? 라는 생각을 하게 되었다.

 

그리고 title만 추려낸 배열을 하나의 변수에 담아 이를 바탕으로 웹브라우저에 나타내는 것에 성공!

 

근데 이것을 이렇게 쓰는게 맞는지는 확신은 못하겠다.

더 재밌고 다양한 활용방안을 찾다가 fetch API를 응용 가능한 귀여운 예제를 발견했고

 

이를 직접 해보기로 결정하였고 

 

결과물은 아래와 같다.

 

 

 

개발자로 하여금 API는 많은 것을 가능하게 해준다.

 

랜덤고양이 API가 있는 줄은 처음 알았다.....물론 랜덤멍멍이 API도 있다.

 

예상을 뛰어넘는 API들이 많이 있으니 앞으로 종종 찾아보아야 겠다. 

 

API의 종류를 많이 알수록 프로젝트의 범위는 넓어질 것이다.