[뉴스 타임즈] 뉴스 API 불러오기 2

자바스크립트 동작 원리에 대해 알았으면 ! 이제 다시 불러오쟈구요?

이제 데이터를 보내야겠지??

나 헤더에 내 api-key 쓸거궁~ 무슨 api url 인지도 보낼꼬야~~

하려면 어떻게 해야할까?

데이터를 보내는 방법은 다양합니더!

• Ajax
• axios
• fetch (가장 심플하고 좋다고 합니다 정확하지 않고, 사람마다 다를 수 있다는 점.)

자 fetch 를 사용해서 보내볼까요?

const getLatestNews = () => {
    let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`)
    let header = new Headers({
        'x-api-key' : 'Q28hCAatSyFErugKAwYMhuNF788h_jSDQ5Vfc9I0NBg'
    })
    let response = fetch(url, {headers:header})
}

getLatestNews();

요로케 ! fetch 를 사용해서 미리 만들어놓은 url, headers에 보낼 header 을 보내줄겁니당!

근데!!! 이렇게 보내면 앙대!! 왜??

서버와 통신하는 아이라.. 데이터를 기다려야해요......

한번 콘솔 로그에 response 를 찍으면..

promise 가 나오죠?? 아직 데이터가 도착하지 않았다는 걸 의미해용

promise 에 대해 간단히 설명하자면 ,

데이터를 받았으면 받은 데이터를 return 해주거나 , 받지 못하면 에러 상황을 전달해주거나 하는 아이라고 합니당!

자 그럼 데이터를 받지 못했어! 그럼 어떻게 해야할까?

fetch 앞에 await 을 붙여줍니다.

await ?? 그게 머야??

잠시 기다리라고 명령해주는 아이라고 합니다.

근데 이 await 그냥 쓰면 에러가 나요. 그래서 이 함수를 async 로 만들어줘야해요 ( 이 함수에서 비동기처리할꺼니까 준비하라는 뜻 )

그래서 결론은 await 과 async 는 세트 짱친 베프 라고 할 수 있겠다.

다시 코드로 돌아와서 고쳐줍시다.

const getLatestNews = async() => {
    let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`)
    let header = new Headers({
        'x-api-key' : 'Q28hCAatSyFErugKAwYMhuNF788h_jSDQ5Vfc9I0NBg'
    })
    let response = await fetch(url, {headers:header})
    console.log(response)
}

getLatestNews();

쨔란 이렇게 고쳐주면 됩니다!

이제 요기 응답받은 response 에서 결과물을 뽑아내는 작업을 해야합니당!

여기서 또 뽑아내는 작업을 할때 많이 쓰이는 코드가 있어용

바로바로 json() 이라는 친구입니당

이 친구는 말이죵 서버통신에서 많이 쓰이는 데이터 타입입니다.

이 친구는 또 객체랑 똑같은데, text 타입이라고 합니댜.

그래서 이 json() 을 사용해서 결과물을 뽑아오면 , 그 결과물을 객체로 사용할 수 있다고 합니당 예를 들어서

api 문서에서 봤던 그 객체 형식으로 된 텍스트 보셨나요?

요 애들같이 원래는 객체형식의 text 타입인 애들을 자바스크립트에서 사용할 수 있도록 객체로 불러와주는거죠!

근데 이 친구도 머냐? 서버로부터 데이터를 받아오기때문에 await 해줘야한다.. 너 기다려줄게...

자 코드에서 한번 json() 을 사용해보쟈구요

const getLatestNews = async() => {
    let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`)
    let header = new Headers({
        'x-api-key' : 'Q28hCAatSyFErugKAwYMhuNF788h_jSDQ5Vfc9I0NBg'
    })
    let response = await fetch(url, {headers:header})
    let data = await response.json()
    console.log(data)
}

getLatestNews();

오케이 굳~~ 이렇게 해서 콘솔로그에 data를 보면? wow

response에 받아온 정보들을 객체로 사용할 수 있다궁!

만약에 오류가 나올 경우 잠시 기다린 뒤, 새로고침을 눌러보쟈!

만약에 await 를 안쓰면 , 데이터를 받는 시간을 기다리지 못하공.. 다음 코드를 그냥 실행해버려서 오류가 나올 수 있어요

그래서 서버에서 데이터를 받아올 때!!!!  꼭꼭 기다려줘야합니다 !!

이제 이 받은 데이터를 하나씩 쑉쑉 저장을 해야겠죠?? 써야하니까?!?!?

그럼 articles 를 가져오기 위해 전역 변수를 만들어주고, 거기다가 저 articles 를 넣어줘보자규?

let news = []; // articles 를 담아줄 변수

const getLatestNews = async() => {
    let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`)
    let header = new Headers({
        'x-api-key' : 'Q28hCAatSyFErugKAwYMhuNF788h_jSDQ5Vfc9I0NBg'
    })
    let response = await fetch(url, {headers:header})
    let data = await response.json()
    news = data.articles // news 변수에 data 안에 있는 articles 넣어주기.
    console.log(news);
}

getLatestNews();

이러면 결과는?!

와우~~ 어메이징 아주 잘넣어졌어요!! 이제 뭘 해줘야해?? 냅다 유저에게 보여주면 끝!