카카오 Open API로 API의 기본을 알아보자! | 코드스테이츠 PMB 13기

W7D3 
오픈 API의 기능과 구조 살펴보기

 

오늘은 API가 무엇인지 알아보는 시간을 가졌습니다. 예전에 관련 영상을 보면서 아..그렇구나 하고 넘어갔었는데 사실은 제대로 이해하지 못했었습니다. 하지만 이번에 다시 공부를 하면서 API가 무엇인지 전보다 분명하게 알게 되었습니다. 어후 속이 뻥 뚫리네요! 🪂자세한 개념 설명은 전문가들이 수많은 좋은 글과 영상을 인터넷에 업로드 해두었기에 그걸 보는 게 더 좋을 거고.. 제가 이해한 걸 간단하게 정리해보면 아래의 내용과 같습니다.

 

1. 클라이언트와 서버는 인터넷을 통해서 요청을 주고받는다.
2. 클라이언트와 서버의 소통 방식이 API다. 클라이언트는 API를 통해 서버에게 요청을 전송한다.
3. RESTful API는 구체적인 요청들을 URI를 통해서 분류에 따라 깔끔하게 정돈한 모습을 말한다. 
4. 오픈 API는 허가를 받을 경우 자유롭게 API를 사용할 수 있도록 기업 또는 단체가 배포한 것을 말한다.
5. 오픈 API를 사용하면 자체 서버 없이 오픈 API를 가져온 회사 서버를 통해서 데이터를 개인 웹페이지에 가져올 수 있다.

 

---

 

  Kakao Developers 에서 오픈 API 선택하기  

 

카카오의 오픈 API를 살펴봅시다. 카카오는 카카오계정만 있으면 자유롭게 소스를 얻을 수 있어서 학습용으로도 훌륭한 것 같습니다. 저는 이 중에서도 검색 기능 API를 사용해볼 것입니다. 개발 유튜버 조코딩의 API 강의를 따라서 검색 API 실습을 해봤기 때문입니다.ㅋㅋ 아래에는 API 실습 과정을 간단하게 기록해보았습니다.

 

 

Kakao developers 홈페이지

 

 

먼저 카카오계정 로그인 후 애플리케이션을 생성한 뒤

 

 

생성된 애플리케이션

 

 

사용할 API 관련 문서의 내용을 확인해보았습니다. 검색 기능은 다음Daum에서 데이터를 가져옵니다. 조코딩 영상에서는 '책 검색'을 예시로 실습이 진행됐지만, 저는 블로그 검색으로 실습해보았습니다. 사실 코드가 달라지는 부분은 거의 없다고 봐도 무방합니다. 😂

 

 

카카오의 검색 API가 지원하는 기능들

 

 

블로그 검색 API 상세 정보를 확인해봅시다. 요청시 입력해야 할 파라미터 정보를 확인할 수 있습니다. GET 방식으로 호출하며, 카카오에서 받은 REST API 인증키를 입력해야 합니다.

 

 

맨 아래 삽입해둔 스크립트 이미지에서 $.ajax({ }) 안에 들어있는 자주색 박스의 내용과 대응됩니다.

 

 

아래 표에서는 클라이언트의 요청에 따른 서버 응답에 대한 정보를 확인할 수 있습니다. 메타데이터로는 요청에 의해 불러진 데이터의 기본 정보와 환경설정을 확인할 수 있습니다. documents를 통해서는 실제 호출된 데이터의 상세 정보를 확인할 수 있습니다. 블로그 글을 예시로 들자면 블로그 글의 제목, 본문 내용, 작성 일자, 블로그 이름 등을 documents를 통해 알 수 있습니다.

 

 

 

---

 

  블로그 검색 API로 '레몬딜 스콘'이 언급된 블로그 글 가져오기  

 

유튜브 영상을 참고해(베껴서) 다음 블로그 데이터를 가져와보는 실습을 진행해보았습니다. 제가 서버에 요청한 데이터는 "레몬딜 스콘"이 들어간 블로그 글입니다. 제가 과제를 할 당시에 레몬딜 스콘을 먹고 있었기에..🤤 요청한 데이터 중에서 콘솔에 불러올 데이터를 지정하고(ex. '레몬딜 스콘이 언급된 글 리스트 중 첫 번째 글' 데이터를 콘솔에 저장) 콘솔에 저장된 데이터를 사용자가 웹 상에서 볼 수 있도록 해야 합니다. 데이터를 요청하면 자동으로 리스트에 포함된 모든 내용이 순차적으로 보이는 줄 알았는데 (10개의 글이 전부 웹페이지에 노출되는) 그게 아니라 별도로 저장한 데이터를 웹페이지에 노출되도록 설정해야 한다는 것을 알게 되었습니다. 

 

API 코드의 구조를 줄글로 설명하기 좀 그래서 이미지 위에 설명을 덧붙여보았습니다. 웹으로 이 글을 읽으시는 분들은 이미지를 클릭하면 고화질로 세부 내용을 확인하실 수 있습니다. 자바스크립트 지식이 없었기에 jQuery에 대한 정보도 조사해서 같이 적어두었습니다.

 

 

png는 2MB가 넘으면 튕겨내더니 jpg는 넘어도 업로드 되네요. 이 무슨,,😈

api2.jpg

2.38MB

 

 

위의 스크립트를 실행하면 아래와 같은 웹페이지 화면을 볼 수 있습니다. documents의 첫 번째 데이터(블로그 글)의 제목(title)과 본문 내용(contents)과 주소(url)가 '블로그 글 가져오기 연습' (<h1> 태그) 아래에 보여지는 것을 확인할 수 있습니다. <br> 태그를 활용해 콘텐츠 간 단락 구분을 해주었습니다.

 

 

사용자가 보게되는 웹페이지 화면

 

---

 

  정리하며  

 

그동안 미지의 영역으로 여겼던 웹의 세계를 알아가니 너무너무 재미있었습니다.  아..이게 그래서 그런 거구나,,! 라는 걸 느끼는 순간의 쾌감이 너무 좋네요 허허 서버와 클라이언트 간의 소통방식도 이제는 조금 익숙해진 것 같습니다. 코스 이수 후에 풀스택 개발 공부를 하고 싶어졌습니다!! 👩🏻‍💻🔥