React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 4 ( 오픈API )

axios를 통한 오픈 API 사용방법에 관한 정보는 다음 글을 참고해주세요

https://mwangmoong.tistory.com/8

React로 요리를 찾아주는 기능 구현 (a.k.a 냉장고 털기) - 5 ( axios 통신)

 

오픈 API를 사용해보자

오늘은 API 사용기에 대해 적어보려 한다.

현재 내가 만들고 있는 프로젝트는 유튜브, 네이버 검색 API를 이용한 레시피 찾아주기 기능이다.

그전에 우선 API가 무엇인지 간단히 집고 넘어가 보자

 

내가 이해한 API

API는 Application Programing Interface의 약자로 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. - 위키백과-

위의 문구는 API를 구글에 검색해보면 가장 위에 보여주는 결과이다. 

정말 솔직하게 말하면 처음 봤을 때 진짜 이해가 되지 않았다. 

구글에 존재하는 많은 프로젝트를 보면 API를 이용해서 어쩌구 저쩌구 뚝딱 만들던데 도대체 인터페이스가 뭐 어쩌구 저걸로 뭘 어떻게 했다는 것이냐... 라는 생각이 머리를 굉장히 아프게 하던 때가 있었다.

API를 이해하기 위해 많은 자료들을 찾아보고 결국 깨달은 것을 한 문장으로 요약해 보겠다.

API란 '내가 통신하고자 하는 서버와의 통신 방법' 이다.

아마 위의 문장으로도 이해가 안 될 분들이 있을 것 같다. 나도 위의 문장을 사용한 여러 블로거나 강의를 봤지만 한 번에 이해는 되지 않았다. 그렇기에 쉬운 예를 한번 들어보겠다.

 

ex> 인터넷 쇼핑몰에서 옷을 산다고 생각해보자.

그 옷을 주문할 때는 우선 색깔, 사이즈, 재질들을 선택하고 결제창으로 이동하여 주소와 결제방법을 선택하면 주문이 완료된다.

여기서 서버를 쇼핑몰이라 볼 수 있겠고, API는 일련의 선택사항들을 입력하여 옷을 주문하는 방법이라고 할 수 있다.

서버와 통신하기 위해서는 서버가 요구하는 방법에 맞게 정보를 전송하여야 원하는 결과를 얻어 낼 수 있다.

 

오픈 API는 뭐지?

앞서 API가 서버와 통신하는 방법이라고 설명하였는데 그럼 오픈 API는 뭘까?

많은 기업, 개발자들 덕분에 수많은 API가 존재하는데 이를 이용하고자 하는 사람들을 위해 공개적으로 사용할 수 있도록 배포해 놓은 API들을 오픈 API라고 한다.

우리가 흔히 사용하는 네이버, 카카오, 유튜브 등에서 오픈 API를 제공하고 있으며 개발 사이트에 들어가면 사용법에 관해서도 상세히 적어 놓았다.

 

이번 프로젝트에 사용한 API는 오픈 API 중 네이버와 유튜브의 검색 API인데 위에 설명한 대로 이 문장을 풀어써보자면

'네이버와 유튜브의 검색 기능을 사용하기 위해 서버와 통신하는 방법을 사용하였다' 라고 한 줄로 요약할 수 있겠다.

 

네이버의 검색 API를 사용했음   ===   네이버 검색 기능 쓰려고 서버와 통신하는 방법 사용했음

그러면 간단히 네이버 API 설명서를 읽어보자.

 

네이버 API 문서 읽어보기

구글에 '네이버 API' 를 검색하면 가장 상단에 '네이버 개발자 센터' 페이지로 이동할 수 있다.

내비게이션 바의 Documents 탭의 우측에 서비스 API를 보면 네이버에서 제공하고 있는 여러 가지 API에 관해 설명을 해놓은 것을 열람할 수 있다.

NAVER Developers

 

우선 API를 이용하기 위해선 가입과 API 신청을 해야 하니 참고하길 바란다. API 신청을 통해 key까지 받았다면 API를 사용할 준비가 완료되었다.

 

나는 블로그의 검색 API를 사용하려 하니 검색 탭을 눌러 들여다보자.

여러 API 호출 예시를 통해 대략적인 코드 작성방법을 확인할 수 있도록 해놓았고 요청변수, 출력결과 등을 확인할 수 있다.

여기서 내가 구현하고자 하는 기능을 위해 주의 깊게 살펴보아야 할 것은 요청변수와 출력결과이다.

 

네이버 검색 API DOC중 요청변수

요청변수는 말 그대로 내가 통신을 할 시 서버에 요청할 변수이다.

query는 사용자가 어떤 검색어를 입력하였는지, display는 몇 개의 결과물을 출력할 것인지 등을 입력받은 후 서버에 전송하면 그에 맞는 결과물을 나에게 다시 보내준다.

예를 들어

돼지고기'라는 키워드로 검색을 하게 되면 query = 돼지고기 가 되겠고

5개의 결과물을 받고 싶으면 display = 5가 되겠다.

기본값이 있다면 입력하지 않아도 무관하다.

 

마찬가지로 출력결과 또한 자세히 설명이 되어있으니 참고하시기 바란다. 표가 너무 커서 첨부하지 못하였다..

출력결과에서 내 프로젝트에 필요한 정보는 title, description, link, bloggername정도가 되겠다. 요청에 의한 결과가 들어오면 위의 변수들을 통해 정보에 접근하여 DOM요소에 출력을 하면 되겠다고 계획을 세우면 될 것이다.

 

오픈 API는 굉장히 유용하다!

작년 초기, 국내 코로나 첫 발병자를 시발점으로 전국 여러 곳에서 동시다발적으로 발병자가 잇따랐었다. 이에 국민들의 코로나 환자 현황과 동선에 관하여 많은 관심이 쏠렸었다. 그리고 한 대학생이 지도 API를 통해 환자 현황과 동선을 정리해 공유하였고 많은 국민들이 이 사이트를 이용하였었다. 이처럼 오픈 API는 접근성, 활용성을 주변에서도 생각보다 쉽게 찾아볼 수 있으며 많은 초보 개발자들이 이를 활용하여 학습하고 자신만의 웹 애플리케이션을 만들고 있다.

 

오픈 API는 네이버, 카카오, 유튜브뿐만 아니라 정말 다양한 곳에서 제공하고 있다.

대표적으로 우리나라의 '공공데이터포털'은 공적으로 사용되고 있는 여러 자료들과 통신할 수 있고 자료의 양 또한 굉장히 방대하기 때문에 한 번씩 들어가 어떤 정보들을 내가 활용할 수 있는지 들여다보는 것도 굉장히 유익하다고 생각한다. 그리고 실제로 이러한 자료들을 통해 많은 기능들이 이미 개발되어 있으니 활용사례로는 어떤 것들이 있는지도 더불어 찾아보면 좋을 것이다.

공공데이터 포털

 

마무리...

오늘은 오픈 API의 존재에 대해 적어보았다. 

사실 위의 설명만으로는 초보 개발자분들이 오픈 API의 존재를 알게 되었다 뿐이지 API를 사용하는 것에 대해 아직 많이 어려워할 것 같다. 

'그래. 요청변수랑 출력결과를 활용하겠다는 건 알겠는데... 그래서 어떻게 코드 짜라는 말임..?'

이런 반응이 예상된다.

나도 공부할 당시, 실제로 비동기 통신을 하기 위해서는 위의 정보만으로는 설명이 굉장히 부족하여 한참 헤매었던 기억이 있다. 내가 사용하려 했던 axios 통신에 관한 예시는 전혀 없었기에 한참을 구글링 했다는...

추후에 다뤄볼 비동기 통신에 대한 글에서 부족한 설명을 정리해 보려 한다.

유튜브 조코딩님이 책 검색 API 활용에 대해 쉽게 설명해 좋은 영상이 있다. 어려움이 있다면 꼭 영상을 한번 보시길 추천드린다.

https://www.youtube.com/watch?v=QPEUU89AOg8&t=589s

조코딩 - [JavaScript 기초와 활용 #2] API의 개념과 활용! 카카오 책 검색 기능 구현하기

 

이번에 API에 대해 공부해보면서 나 또한 굉장히 많은 API들의 존재들을 확인할 수 있었다. 추후에 새로운 프로젝트에 대해 고민할 때 꽤나 큰 도움이 될 것 같은 느낌이 강하게 든다!!!

 

혼자 공부하면서 적는 글이다 보니 내가 잘못 알고 있는 부분도 충분히 있을 것이라 생각하고 그러한 부분이 있다면 그냥 지나가지 마시고 꼭 댓글을 남겨주시길 바란다. 개발자를 꿈꾸는 청년에게 큰 도움이 될 것입니다. ㅎㅎ