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

api 를 불러오기 전에 api-key 를 받아옵시다!

quick start 메뉴 클릭!

그리고 옆에 나오는 주소로 갑시다요

그리고 계정을 만들고 나면, 이메일 인증을 꼭!!!!!!! 해주셔야해요 ㅎㅎ

이러면 계정만들기는 끝. (계정 안만들면 key 못 받어)

그러고 이제 화면이 바뀌면서

요렇게 api 키가 받아진 모습을 볼 수가 있습니당.

프로젝트를 만드는 동안에 많이 쓸거니까 복사해서 메모장에 붙여넣기 ~

근데 이 api 잘 되는지 안되는지 확인할 수 있는 방법이 머야?

바로 테스트 해볼 수 있는 프로그램이 있땅!

그건 바로 postman browser 이라는 크롬 프로그램입니당

구글에 검색하시고 크롬 다운로드 하면 될듯싶네요 ㅎㅎ

그리고 앱을 실행하시면 로그인 하시면 됩니다 (저는 구글로 로그인!)

그리고 여기다가 냅다 api 주소를 불러오면 테스트가 됩니당.

굳굳

이러고 냅다 send 하면 어떻게 될까? 응 에러나

왜 에러가 났냐면 header에 api-key를 안줬쟈냐 !!!!!

heades 에 key 에는 x-api-key 입력

value 에는 내 api-key 입력해주시고 send 누르면 밑에처럼 초ㅑ랴랴랴 하게 정보가 나온다규!

• HTTP요청에는 header 와 body 로 이루어진 구조로 되어있어용
• header 에는 이 문서의 타입 또는 인증을 위한 api key 나 토큰 값을 넣을 수 있음
• body 에는 실제 내용이 들어갑니다.

그리고 ! api를 호출하는 명령어는 크게 4가지가 있는데

1. GET : 데이터를 얻어온다 (기본값) (우리가 방금 쓴거)
2. PUT: 데이터를 수정한다
3. POST: 데이터를 생성한다
4. DELETE: 데이터를 삭제한다.

남의 서버에서 데이터를 받아올 때는 수정 , 생성, 삭제 못함!

이제 자바스크립트에서 api 를 불러올겨!!!

자바스크립트 켜!

파일 만들어!

먼저 아까 썼던 url 기억나시죠? 그걸 불러올 함수를 만들어줄거에요!

const getLatestNews = () => {
    let url = `https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`
    console.log(url)
}

getLatestNews();

console.log 에 잘 찍히는지 체크도 해주시공 ^^

근데 이렇게 사용하면 허접이랭.. 그래서 자바스크립트에서 제공해주는 툴을 사용해줄거에용

URL 이라는 클래스를 자바스크립트에서 제공해줍니당 그래서 클래스 타입은

new 라는 키워드를 이용해 객체 생성을 해주기 때문에, (사실 잘 모름)

new URL() 을 사용해줄거에용

const getLatestNews = () => {
    let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`)
    console.log(url)
}

getLatestNews();

이렇게 바꿔주고 다시 콘솔 로그를 본다면?

엄청나게 분석을 해준 모습

자바스크립트에서 제공해준 URL을 사용하면 우리의 주소를 분석해줍니다. ㅎㅎ 굳 ! 멋쪄!

근데 headers 에 api-key 줘야하자나?

어떻게 줄까??

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'
    })
}

getLatestNews();

바로 요렇게 줄거지롱 저 Headers 라는 클래스도 자바스크립트에서 제공해주는 아주 이뿐아이라궁!

Headers 안에 넣고 싶은 내용을 객체로 넣어주면 돼!

이제 저 url 과 header를 싹 합쳐서 부르면 됩니당 ㅎㅎ

어떻게 부르니?

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

바로 요렇게 부르면 된다규? 근데 여기서 중요한 점은 자바스크립트 기본 동작 원리가 무엇인지 알아야한대용! 

잠시 여기서 스탑하고.. 이론을 다시 공부하러 가봅시댜.