API를 이용해서 뉴스 웹페이지를 만들어보자

 

 안녕하세요. 진득코딩입니다.

 

 프론트엔드의 꽃이라고 할 수 있는 API를 이용하면 백엔드와 소통을 할 수 있습니다.

 

 프론트엔드의 역할을 간단하게 말하면 API를 요청하고 받은 데이터를 보여주는 역할을 합니다.

 

 지금까지 자바스크립트 포스팅들은 이런 API를 잘 활용하기 위한 포스팅이라고 할 수도 있을 정도로 API의 중요도는 높습니다.

 

 이번 시간에는 이 API에 대해 알아보고 이 API를 이용해서 뉴스 웹페이지 개발을 시작해 보도록 하겠습니다.

 

API

 

 API는 Application Programming Interface의 약자로 컴퓨터나 컴퓨터 프로그램 사이의 연결입니다.

 

 한마디로 말해서 서버(백엔드)와 클라이언트(프론트엔드) 사이의 대화라고 이해해 주시면 됩니다.

 

 하지만 현재 자바스크립트를 배우는 입장에서 백엔드가 없기 때문에 다른 사람들이 만들어 놓은 API를 이용하려 합니다.

 

 그 중에서도 뉴스 API를 이용하여 뉴스 웹사이트를 만들어보도록 하겠습니다.

 

API 문서 읽기

 

 API 사용에 앞서 가장 중요한 것은 API 문서 읽어보기입니다.

 

 API는 상호 약속한 룰을 가지고 정보를 주고받는 것이기 때문에 각각 API 별로 다른 룰을 사용하게 됩니다.

 

 이때 API 문서를 읽어볼 때 주의깊게 봐야 할 것들은 다음과 같습니다.

 

 1. API endpoint 별 주는 데이터

 2. API 인증 방법 (api key로 인증하기 or 토큰으로 인증하기 등)

 3. Query로 쓸 수 있는 인자들

 4. API 응답 내용들(어떤 결과를 받을 수 있을지)

 

 위와 같이 글로 적어서 보게 되면 와닿지 않기 때문에 직접 뉴스 API를 가져오는 과정을 살펴보면서 API 문서 읽는 과정을 알아보겠습니다.

 

news api 문서 읽어보기

 

 

 api를 사용하기 위해서는 api를 제공하는 곳에서 만든 문서를 읽어보는 것이 중요합니다.

 

 먼저 사용할 api를 검색해서 적합한 api를 찾습니다.

 

 이번 포스팅에서 사용할 api는 news api라고 검색했을 때 가장 위에 나오는 News API를 사용하도록 하겠습니다.

 

 문서를 읽어보기 위해 해당 웹사이트를 클릭해줍니다.

 

 

 해당 웹사이트를 들어가게 되면 위와 같은 화면을 보실 수 있습니다.

 

 상단 메뉴에 세 가지 메뉴가 있는데 이 중에서 프로그래밍을 개인적으로 하는 개발 꿈나무들에게 가장 중요한 Pricing(가격)을 가장 먼저 살펴보도록 하겠습니다.

 

 

 Pring 메뉴를 클릭하게 되면 위와 같은 화면을 만나보게 됩니다.

 

 API는 데이터를 제공하는 서비스로서 수익 창출이 목적이기 때문에 사용자의 목적에 따라 가격을 지불해야 합니다.

 

 이번 시간에는 API 이용을 통해 학습을 목적으로 하는 개발 꿈나무들을 위한 Developer 메뉴를 사용해 보도록 하겠습니다.

 

 Developer 메뉴는 무료인 대신 여러 제약 사항이 있습니다.

 

 Developer 모드에 대해 자세히 살펴보도록 하겠습니다.

 

 여기에서 가져올 수 있는 데이터는 24시간의 딜레이가 있고 localhost에서만 사용할 수 있기 때문에 배포하기에는 어렵습니다.

 

 또한 하루에 100개의 요청만 할 수 있기 때문에 상업적으로 사용하기 힘듭니다.

 

 100개라는 양이 뭔가 양이 많아 보이지만 웹사이트 입장에서 100개의 요청은 굉장히 작은 양이기 때문에 테스트할 때도 신중하게 사용해야 합니다.

 

 

 다음으로 documentation 페이지를 살펴보도록 하겠습니다.

 

 이 api 서비스 웹사이트는 무조건 documentation 페이지가 존재합니다.

 

 api는 프론트엔드와 백엔드의 의사소통을 도와주는 도구라고 할 수 있는데 이때 적용할 규칙을 서술해 놓은 곳이 바로 이 documentation 메뉴입니다.

 

 따라서 해당 api를 사용할 때 어떤 규칙을 사용하는지 숙지하기 위해 api 문서를 읽는 일은 굉장히 중요한 일입니다.

 

 이 중에서 왼쪽에 메뉴 중 Endpoints라는 메뉴가 중요합니다.

 

 해당 메뉴를 통해 api가 어떤 데이터를 줄 수 있을지 파악할 수 있습니다.

 

 

 EndPoints에서 Everything 파트를 살펴보겠습니다.

 

 헤드라인에 적혀있는 내용을 보면 8만 개 정도 되는 기사를 제공하는 것을 알 수 있습니다.

 

 

 다음으로 EndPoints에서 Top headlines에 대해 살펴보도록 하겠습니다.

 

 해당 파트에서는 탑급 헤드라인 기사를 제공한다는 내용을 확인해 볼 수 있습니다.

 

 

 다음으로 Top headlines에 포함되어 있는 sources에 대해 살펴보도록 하겠습니다.

 

 해당 파트에서는 뉴스를 작성한 작성자에 대한 정보를 준다는 것을 확인해볼 수 있습니다.

 

 해당 Endpoint를 살펴보았을 때 웹페이지에서 다룰 데이터로 Top headlines를 중점적으로 살펴보도록 하겠습니다.

 

 

 Top headlines에서 오른쪽에 있는 화면을 중점적으로 살펴보도록 하겠습니다.

 

 위 자료에서 밑줄 친 GET으로 쓰인 주소를 통해서 데이터를 받아올 수 있습니다.

 

 해당 주소는 도메인/api의 버전 정보/endPoint?쿼리 형식으로 이루어져 있습니다.

 

 쿼리는 요청하는 정보를 자세하게 서술하는 부분입니다.

 

 쿼리에 들어갈 조건들은 api 문서 안에 있는 Request parameters에 담겨 있습니다.

 

 

 request parameters를 살펴보면 가장 위에 있는 apikey라는 항목이 있습니다.

 

 apikey는 서버 입장에서 클라이언트의 신원을 확인하는 키라고 생각하시면 됩니다.

 

 다른 항목들을 살펴보면 어떤 국가인지, 카테고리, 어디에서 만든 뉴스인지, 키워드 등을 조건으로 사용할 수 있습니다.

 

 그중에서 pageSize와 page는 거의 모든 api에 존재하는 항목입니다.

 

 pageSize는 한 번 request 할 때마다 얼마나 많은 데이터를 받을지 조건을 제시하는 부분입니다.

 

 문서를 살펴보면 기본 사이즈는 20개로 설정되어 있고 최대 100개의 데이터를 받을 수 있게 되어 있습니다.

 

 page는 보낼 데이터의 말 그대로 page를 설정하는 조건입니다.

 

 많은 데이터 중 특정 페이지를 설정할 수 있습니다.

 

 

 다음으로는 받는 데이터인 response Object에 대해 살펴보도록 하겠습니다.

 

 가장 먼저 나오는 status는 데이터를 받는 게 잘 받아졌는지 상태를 체크하는 부분입니다.

 

 다음으로 totalResults에서는 가져온 데이터가 아닌 전체 데이터가 얼마나 있는지 알려주는 부분입니다.

 

 articles에서는 request한 기사들이 해당 부분에 배열로 들어오게 됩니다.

 

 그 밑으로는 어떤 기사인지, 기자가 누구인지, 제목이 어떤 건지, 뉴스에 대한 설명은 어떤 것인지, 해당 뉴스를 직접 볼 수 있는 url은 무엇인지 등등 해당 기사에 대한 정보들을 확인할 수 있습니다.

 

 

문서에서 설명한 response에 대한 코드를 살펴보도록 하겠습니다.

 

 처음으로 나오는 status에서는 요청한 데이터가 잘 response 됐다는 것을 알려주고 있습니다.

 

 또한 totalResults에서는 요청한 데이터의 총량에 대해 알려주고 있습니다.

 

 그 밑에 articles에서는 해당 기사에 대한 많은 정보들이 담겨있는 것을 알 수 있습니다.

 

 자바스크립트를 이용하여 프론트엔드를 수행하는 개발자의 입장에서는 이렇게 response 받은 데이터를 잘 화면에 출력해주기만 하면 됩니다.

 

 이때 받는 데이터의 타입은 객체로 받아오는 것을 알 수 있습니다.

 

 

 다음으로 살펴볼 메뉴는 error 메뉴입니다.

 

 api를 이용해서 정보를 주고받다 보면 정상적으로 데이터를 주고받지 못해서 에러가 나는 경우가 생기게 됩니다.

 

 위 문서에서 살펴보게 되면 에러 상황이 생기게 되면 status로 error라는 상태를 보여주고 code를 통해 어떤 에러인지 코드로 알려주게 됩니다.

 

 또한 message를 통해서 해당 에러 상황에 대한 설명을 같이 보내준다는 내용을 확인할 수 있습니다.

 

 

 문서에서 제공하는 apikey가 없는 에러 코드를 살펴보도록 하겠습니다.

 

 apikey가 없어서 생기는 에러가 생기면 일단 에러이기 때문에 error라는 status를 확인할 수 있습니다.

 

 또한 apiKeyMissing이라는 코드와 함께 message를 통해서 해당 코드에 대한 설명을 확인해 볼 수 있습니다.

 

 

 에러를 좀 더 자세히 살펴보도록 하겠습니다.

 

 처음으로 기술해 놓은 에러는 HTTP 에러입니다.

 

 api로 정보를 주고받을 때 http를 사용해서 정보를 주고받는데 이때 http 상에서 생기는 에러들에 대한 정보를 모아놓은 부분입니다.

 

 

 그다음으로 나오는 error codes는 해당 http 에러 코드에 대한 해당 api에서 제공하는 error codes들을 설명해 놓은 부분입니다.

 

 http 에러 코드로만은 모든 정보를 파악하기 힘들기 때문에 news api 자체적으로 만든 메세지를 제공해 줍니다.

 

api 키 받기

 

 

 api 문서를 살펴보았다면 본격적으로 api를 사용해 보도록 하겠습니다.

 

 api를 사용하기 위해서 첫 번째로 해야 할 일은 api key를 받아오는 것입니다.

 

 api key를 받아오기 위해서는 NewsAPI에서 Get API Key 버튼을 눌러줍니다.

 

 

 Get API Key를 누르게 되면 위와 같이 회원가입 창이 나오게 됩니다.

 

 위에서 요구하는 정보들을 입력해서 회원가입을 해줍니다.

 

 

 회원 가입을 완료하게 되면 위와 같이 API Key를 부여받게 됩니다.

 

 해당 APIKey를 저장해 주시고 APIKey는 노출되지 않도록 주의해 주시기 바랍니다.

 

 

 이렇게 API Key를 부여받았다면 documetation으로 가서 해당 API Key를 테스트해 보도록 하겠습니다.

 

 

 가장 좋은 것은 JavaScript를 이용해서 APIKey를 테스트하는 것이지만 그러기에는 번거롭습니다.

 

 이때 APIKey가 잘 작동되는지 확인하기 위해서 사용하는 서비스가 바로 POSTMAN입니다.

 

POSTMAN

 

 

 검색창에 Postman이라고 검색하게 되면 위와 같이 웹페이지가 나오게 됩니다.

 

 우측 상단에 있는 Sign In을 통해 회원가입을 해주시고 로그인을 해주시면 됩니다.

 

 

 성공적으로 로그인을 하셨다면 위와 같은 화면을 보실 수 있습니다.

 

 해당 화면에서 좌측에 있는 메뉴 중 workspace 버튼을 눌러줍니다.

 

 

 위 화면에서 오른쪽 상단에 있는 create workspaces를 눌러서 새로운 workspace를 만들어줍니다.

 

 

 위와 같은 화면이 나오게 된다면 기본값인 blank workspace를 선택하고 Next 버튼을 눌러줍니다.

 

 

 원하시는 workspace 이름을 적어주시고 혼자 쓰기 때문에 only me를 선택해 줍니다.

 

 이름은 아무거나 상관없고 필자의 경우 javaScript로 설정해 주었습니다.

 

 입력과 선택이 완료되었다면 하단에 있는 create 버튼을 눌러줍니다.

 

 

 workspace를 성공적으로 생성했다면 위와 같은 workspace를 확인할 수 있습니다.

 

 workspace를 이용하기 위해 상단에 있는 + 버튼을 눌러줍니다.

 

 

 + 버튼을 누르게 되면 위와 같은 화면이 나오게 됩니다.

 

 send 버튼 왼쪽에 있는 input 창에 원하는 주소를 입력하여 사용하시면 됩니다.

 

 

 postman workspace가 준비되었다면 News API 사이트에서 제공하는 문서에 있는 headline 예시를 이용해서 테스트를 진행해 보도록 하겠습니다.

 

 GET 방식으로 선택되어 있기 때문에 해당 방식은 건드릴 것이 없고 예시를 그대로 복사해서 apiKey= 뒤에 본인의 APIKey를 입력하여 테스트해 봅니다.

 

 

 해당 주소를 입력하고 send 버튼을 누르시게 되면 NewsAPI에서 제공하는 데이터를 받아온 것을 확인할 수 있습니다.

 

 해당 데이터를 웹페이지에 보여주기만 하면 News 웹페이지를 만들 수 있습니다.

 

JavaScript로 api를 받기 위한 파일 세팅

 

 

 본격적으로 자바스크립트로 API를 이용해 데이터를 받기 위해 파일들을 세팅해 보도록 하겠습니다.

 

 HTML은 위와 같이 세팅해 주었습니다.

 

 기본적인 세팅들과 CSS, JS를 연결해 준 것을 확인할 수 있습니다.

 

 

 다음으로는 JS 코드를 살펴보도록 하겠습니다.

 

 JS 코드에는 news 데이터를 가져오는 함수만 만들어놓은 상태입니다.

 

 API Key는 중요하고 바뀌면 안 되는 함수이기 때문에 const로 따로 미리 선언해 주었습니다.

 

 해당 url은 new로 url 인스턴스를 생성해서 API 문서에서 제공하는 예시 주소를 이용하여 선언해 주었습니다.

 

 console을 출력하여 해당 url이 잘 나왔는지 확인해 주었습니다.

 

 해당 API를 이용해서 데이터를 가져오기 위해서는 url을 fetch 해주면 됩니다.

 

 이때 fetch를 사용하기 위해 자바스크립트의 동작 원리에 대해 숙지하는 것이 좋다고 생각합니다.

 

 자바스크립트 동작 원리에 대해 잘 모르는 분들은 아래 링크를 통해 숙지하시고 포스팅을 계속해서 확인하는 것을 추천합니다.

 

https://jinco.tistory.com/110

자바스크립트 동작 원리에 대해 알아보자

 

 

 자바스크립트 동작 원리 포스팅을 확인하고 오셨다면 위 코드를 이해하기 편할 거라고 생각합니다.

 

 fetch 함수는 네트워크 상 언제 올지 모르는 작업을 실행하기 때문에 await를 붙여주었습니다.

 

 또한 response.json() 함수는 response로 받아온 파일을 json 파일로 파싱하는 함수입니다.

 

 해당 함수도 await를 사용해줘야 합니다.

 

 이렇게 json으로 정리된 data에서 articles 부분만 가져오기 위해 data.articles만 news라는 변수에 넣어주고 이를 출력해 보았습니다.

 

 

 news 변수를 출력하면 위와 같이 articles에 있는 내용들만 잘 정리되어 출력되는 것을 확인할 수 있습니다.

 

---

 

 이번 시간에는 API에 대해 알아보고 자바스크립트에서 API를 통해 데이터를 요청하고 받아오는 작업을 진행해 보았습니다.

 

 이제는 이 데이터들을 잘 출력만 해주면 뉴스 웹페이지가 완성되게 됩니다.

 

 데이터를 받아오는 문제는 해결되었으니 다음 시간부터는 본격적인 뉴스 웹페이지를 만들어보는 시간을 가져보도록 하겠습니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다. 😊