API 호출
const getLatestNews = () => {
let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=sport&page_size=10`) ;
console.log(url)
}
getLatestNews();먼저 우리가 사용하고자하는 url을 검색을 해봅시다. url이라는 변수를 만들어주고 new URL 이라는 클래스를 사용해준다. new URL()은 자바스크립트에서 제공하는 클래스 이다.
사용하고자하는 API를 저기에 넣어서 console로 찍어 보면 어떻게 나오냐 하면
위 사진과 같이 자동으로 url에 대해 분석하여 정보를 제공해준다.
다음으로 해주어야 할것은 api에서 발급받은 개인 토큰번호이다. 우리는 api 사이트에서 개인 토큰을 발급 받고 그것을 저기 데이터를 받아올때 x-api-key를 넣어주어야 한다. 여기서 x-api-key 같은경우는 api를 제공하는 업체마다 이름이 다를수 있으니 참고하자!!
x-api-key 를 어떻게 넣느냐 하면
위에 만들어둔 getLatesNews 라는 함수에
let header = new Headers({'x-api-key' : '발급받은 키'});위의 코드를 넣어주면 되는데 변수의 이름은 자기 재량이고 new Headers() 를 사용해주고 그안에 중괄호를 치고 ‘x-api-key’ : ‘개인토큰’ 을 넣어주면 된다.
그 다음은 우리가 기존에 만든 url 과 header 를 합쳐서 데이터를 부르면 되는데 어떻게 부르느냐!!
getLatestNews 라는 함수에
let response = fetch(url,{headers:header});를 추가 해주면 된다. 여기서 자바스크립트에 대한 기본원리를 먼저 알아보자!
이것을 알아야 자바스크립트에서 어떻게 api를 부르는지 이거에 대해서 이해를 잘 할 수있다.
console.log(1)
setTimeout(()=>{
console.log(2)
},2000)
console.log(3)console.log(2)를 2초뒤에 print하고 싶을때 자바스크립트에서 시간을 딜레이 하는 함수가
setTimeout이 있는데 함수안에는 2가지의 인자가 들어간다 첫번째는 함수가 들어가고 뒤에는 시간이 들어간다. 우리는 여기서 코드를 보면 콘솔에서 1,2,3 이렇게 나올거라고 예상을 하는데, 하지만 결과 값은 1,3,2 이런씩으로 나오게 된다. 자바스크립트에는 드럼통같은 것이 있는데 그것을 stack이라고 한다. 위의 코드를 컴파일을 하면 드럼통에 console.log(1)이 처음에 쌓이고 그다음 console.log(2) console.log(3) 이런씩으로 쌓이게 된다. stack은 하나뿐이며 한가지 일을 처리해야 다음 일을 처리 할 수 있다. 하지만 setTimeout은 순차적으로 실행이 안되게 된다. 그이유를 보면
처음에 console.log(1)을 stack에서 처리하고 그다음으로 console.log(2) 가 오는데 그런데 2초를 기다리라고 하면서 stack에서 잠시 바깥의 대기실로 보내놓는다. 일단 2초 기다려봐 하면서 보내놓고 stack에서 제거가 된다. 그리고 console.log(3)이 들어온다 그리고 stack에서 3이 끝난후 바깥의 대기실에 있는 2로가면 2초가 지나고 바로 stack에 보내는게 아니라 또다른 공간인 que라는 곳에 보낸다.
여기서 que는 stack의 눈치를 엄청보게된다. 그리고 stack의 여유가 있을때 바로 console.log(2)를 넣어준다. 즉 자바스크립트는 하나하나 실행하는 동기적 언어이다.
대기실로 가는 친구들 : setTimeout,ajax(서버에요청하는애들),eventLisner도 백그라운드로 보낸다. 왜냐하면 유저가 클릭할때까지 계속 대기를 하기 때문이다.
자 그럼 흐름을 살펴보자!!
- URL 준비
- 헤더준비
- 백엔드 서버에 요청
- 데이터를 보여줌
자 위의 순서를 보면 1번과 2번은 stack에서 바로 처리가 된다. 하지만 백엔드에 서버에 요청을 하고 3번은 대기실로 가게 되는데, 여기서 바로 4번을 실행을 하면 데이터가 없는데 보여 줄 수가 없다.
그러므로 에러가 발생하게 되는데 여기서 우리는 자바스크립트에서 제공하는
(async,await)비동기 함수를 사용할 수가 있다. 이것을 사용하면 3번이 끝날때 까지 4번은 기다려 라는 것이 된다.
자 코드로 다시가서 아래의 코드를 실행 해보자
그러면 웹 콘솔창에 어떤씩으로 나오냐 하면
이 와 같이 나오게 된다. promise가 나오게 되고 뒤에 pending이라고 나오는데 아직 데이터가 도착하지 않았다 라고 생각 하면 된다. 그러면 우리는 여기서 무엇을 해주어야 하느냐 하면
먼저 요청하는 코드인
let response = await fetch(url,{headers:header});await(기다려)라는 명령어를 붙여주고 그리고 우리가 사용하는 함수에 async라는 것을 붙여 준다.
함수에게 비동기 처리할테니까 준비 단단히 해라 라고 생각해라 async와 await는 세트라는거 명심하자!
자 그럼 위의 코드를 실행을 해보면
와우 응답이 정확히 오게 된다. 하지만 body를 보면
ReadableStream 이라는 것이 있는데 결과는 보이지 않는다. 우리는 여기서 response에서 결과물을
뽑아내는 작업이 필요하다.
let data = await response.json();우리는 response에서 json타입으로 뽑아 오게 되는데 이 친구도 대기시간이 필요하기 때문에 await를 붙여줘야 한다. 자 그런다음 console.log를 찍어서 확인해보자!
와우 데이터가 넘어왔습니다. 자 articles 열어보면
도큐멘테이션에 있던 코드가 쭈욱 나오게 된다.
만약 response에 await를 안해주게 된다면 어떻게 될까?
이런 에러가 나는데 json이라는 function을 찾을수 없다고 나오게 된다. 우리는 response를 불러놓고 아래의 data가 실행 된다.
자그럼 우리는 데이터를 보여주는걸 해보자
코드에 news라는 배열을 만들어서 함수안에 news 라는곳에 data.articles 를 넣어준후 console로 불러보면
articles를 싹 가져올수 있다.
