[코딩 알려주는 누나] api통신, 뉴스타임즈 만들기 - 1

* API : application programming Interface

- 백엔드와 프론트엔드 사이에 정보를 주고 받을 때 사용하는 것

- 약속된 룰에 맞춰서 요청하고 보여주는데 그것을 api라고 한다 즉 데이터를 잘 주고 받기 위한 것

 

* 우리가 할건 뉴스 api

 

* api불러오기 : newscatcher api - documentation

- api documentation : 룰에 대해 설명해놓은 것(3가지)

1. Search News : 뉴스를 찾는 api

2. Latest Headlines : 최신뉴스 제공 api

3. Sources : 뉴스제공자

 

* search news의 get에서 copy한 것

https://api.newscatcherapi.com/v2/search?q=Apple&from='2021/12/15'

 : url주소에 정보를 달라고 요청

 

 

* api문서 읽는 법

https://api.newscatcherapi.com/    : 웹 주소

v2 : 버전2

search : end point - 무엇을 요청하는가. 웹 주소의 마지막에 붙여서 보냄

q(쿼리) : ?뒤에 나오는 것으로 정확한 조건을 붙일 수 있다. 조건과 조건사이는 &로 연결

 

* request를 보낼때도 header와 body로 구분되는데,

header : 요청 관련 정보

- x-api-key : 유일한 토큰값, api 유저 하나하나에 유니크한 키값을 붙여줌,  api키값이 없으면 요청을 못한다.

body : 요청내용

 

* responses : 다양한 상태에 따른 응답 코드가 있다.

- 상태별 에러 핸들링

 

*성공했을때 받을 데이터

articles : 각각의 정보가 객체로 되어있다. (객체인 이유 : 정보가 많아서)

 

 

* API를 부르기 전에 키(x-api-key)를 받아와야 호출이 된다.

Quick Start - 가입하기 - api key 복사

 

* postman : api 테스트 할때 유용한 프로그램

가입 후 설치하고 로그인 - workspaces

-latest headlines 에서 주소 복사하고 postman에 붙여넣기(get) - send

-에러뜸 : api키 안줬다

{

    "status": "error",

    "error_code": "HeadersWithoutKey",

    "message": "No API key was given. Please provide an API key and put it into headers, like 'x-api-key': 'YOUR_API_KEY'"

}

 

* get 바로 밑에 Headers에 api키 저장

key : x-api-key,     value : api key 복붙

key : Content-Type,      value : application/json      ->다른 request할때 필요하므로 추가해주기

저장하고 send누르면 바로 데이터 가져옴.

쿼리를 바꿔서 데이터 호출할 수 있다.

 

 

*자바스크립트에서 API 부르기

 

 

자바스크립트 동작원리(어떻게 api를 부르는가)

* setTimeout(함수, 시간(ms)) : 시간 딜레이

setTimeout(()=>{console.log(2)}, 2000) : 2초뒤에 콘솔에 2 프린트 해라

 

*stack : 순차적으로 한번에 한가지 일을 한다(싱글쓰레드)

 

보통 코드는 위에서 아래로 실행한다.

settimeout을 사용하면 web api(background)에 보내놓고(대기시켜놓고) 다음 실행을 먼저 수행한다.

2초뒤에 queue에 console.log(2)를 보내고, stack에 할 일이 없으면 실행된다.

 

그런데

1. url준비

2. 헤더준비

3. 백엔드 서버 요청

4. 데이터 보여줌

의 과정에서 3번이 오래걸린다고 4번을 먼저 할 수 없다.

3번 기다려야하는데 어떻게? async, await 를 이용한다.