[JavaScript 기초와 활용 #2] API의 개념과 활용 (feat. 연예인 닮은꼴 찾기, 유튜브 댓글 추첨, 카카오 지도 & 책 검색 API, jQuery AJAX)

 

이번 강의는 JavaScript 2번째 시간으로 API란 무엇인지 기초 개념을 배우고 jQuery AJAX를 이용해 직접 HTML에서 카카오 책 검색 API를 활용해보는 실습 영상입니다. 
SDK를 활용하여 별도의 AJAX 요청 없이도 API를 쓸 수 있는 카카오 지도 예제도 잠시 살펴봅니다.
지금까지 라이브 및 커뮤니티를 통해 공개한 유튜브 댓글 추첨 기능, 얼굴 인식으로 연예인 닮은꼴 찾기 사이트 등 API를 활용한 서비스도 이와 똑같은 원리를 이용하였습니다.

https://celebface.site
연예인 닮은꼴 찾기 서비스는 열어두었으니 궁금하신 분들은 직접 나와 닮은 연예인 찾기를 해보세요!ㅎㅎ

카카오 API 홈페이지 : https://developers.kakao.com
네이버 API 홈페이지 : https://developers.naver.com/
구글 API 홈페이지 : https://console.developers.google.com
페이스북 API 홈페이지 : https://developers.facebook.com/
공공데이터 포털 : https://www.data.go.kr/
등등 정말 많은 API 기능이 공개되어있으니 여러가지로 실습해보세요!

 

안녕하세요! 누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다.
이번시간에는 지난 javascript 1강에 이어 2번째 시간으로 javascript를 이용해 프론트앤드와 백앤드를 통신하는 API의 개념과 활용 방법에 대해서 알아보겠습니다.
먼저 프론트엔드, 백엔드 그리고 API가 각각 어떤 것인지 간단히 정리해보겠습니다.
프론트엔드는 여러분이 보는 화면을 말하고 백엔드는 이 화면에 보여줄 정보들을 처리하는 곳을 말합니다.
게시판을 예로들면 프론트엔드에서는 게시판의 틀, 제목은 어디에 내용은 어디있고 게시판의 색이나 모양등을 표시하며 백엔드는 그 프론트엔드에 표시할 실제 데이터 내용을 가져오는 역할을 수행합니다.
예를들어 프론트엔드에서 1번 글을 조회하면 1번글의 데이터를 달라고 백엔드에 요청합니다. 그러면 백엔드는 DB를 조회하여 1번 글에 해당하는 제목, 내용 등의 데이터를 가져오고 프론트엔드에 전달하여 그 데이터를 표시해주는 역할을 합니다.
이때 프론트엔드가 백엔드에 요청을 할 때 어떤 규칙에 맞게 요청을 해야하는데요
그러한 요청을 API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)라고 부릅니다.
여기서 오픈 API라고하면 백엔드를 우리가 직접 만들지 않아도 누군가 이미 만들어 놓고 규칙을 공개한 것을 말합니다.
우리는 이 백엔드의 주소와 사용 규칙만 알면 우리가 만든 것이 아니라도 마음대로 사용할 수 있게 되는 것입니다.
이러한 API는 지도, 검색, 결제, 채팅 심지어 AI 관련 API도 공개되어 우리는 그냥 규칙에 맞게 API를 요청하기만 하면 엄청 복잡한 기능을 수행하고 결과를 돌려주어 우리는 그냥 이를 활용하면됩니다.
그러면 직접 우리가 javascript를 이용해 이 API를 다루는 것을 연습해보겠습니다.
그럼 화면을 통해 함께 보시죠!

먼저 카카오에서 제공하는 책 검색 API를 이용하는 예제를 통해 API의 개념을 좀 더 알아보겠습니다.
내 사이트에서 API 서버에 정보를 줄 수 있습니다.
이때 아무렇게나 요청하면 안되고 정해진 형식에 맞춰야 하는데요

서버에 정보를 달라고 하는 것을 요청(request)라고 부르고,
찾은 정보를 내 사이트가 받는 것을 응답(response)라고 합니다.
이러한 요청과 응답은 API마다 정해진 형식에 맞추어 전달 되는데요.
이러한 형식이 작성된 문서를 API 가이드 라고 부릅니다

API 가이드는 API 마다 조금씩 다르지만 공통적으로 요청과 응답에 대한 정보가 나와있습니다.
하나씩 살펴보겠습니다.

전송방식은 CSS 강좌에 Form 태그를 설명하면서 언급드렸는데요. 간단히 다시 말씀드리자면 크게 GET과 POST로 나눌 수 있습니다. GET 방식은 쉽게 말해서 주소창에 모든 정보를 담아 정보를 전달하는 방식이고 POST 방식은 주소창이 아니라 내부적으로 정보를 전송하는 방식이라고 생각하시면 됩니다.
이렇게 형식에 맞추어 전송하게되면 서버에서 응답이 오게 되는데요.
그 응답에 대한 설명도 매뉴얼에 나와있습니다. 
형식은 응답이 오는 형태로 보통 대부분 JSON 형식으로 날아오게됩니다.
JSON이란 특정한 자료의 형태인데요. 실제 사례를 보여드리면
요런게 JSON 형식입니다. 중괄호와 중괄호 사이에 뭐는 뭐 뭐는 뭐 형태로 나와있는 것을 JSON 형식이라고 부릅니다.
가끔 XML같은 형식도 쓰이긴 하지만 웬만한 경우에는 데이터를 다루면 보통 JSON을 쓰게 됩니다.
여기서 이렇게 응답온 결과가 어떤 의미인지 모르기 때문에 매뉴얼에 각각의 항목이 무슨 의미인지를 설명하는 내용이 나와있습니다.
이렇게 매뉴얼까지 보았으니 직접 한번 API 요청을 해보겠습니다.

그러면 콘솔창이 아니라 내 사이트에 정보를 가져오려면 어떻게 해야할까요?
데이터를 주고 받을 수 있는 다양한 방법이 있지만 우리는 간단히 할 수 있는 AJAX라는 기술을 이용하겠습니다. AJAX를 깊게 이해하고 사용하려면 상당히 복잡하지만 지난시간에 배운 javascript 라이브러리인 jQuery를 이용해 간단하게 코드를 짤 수 있습니다.
그럼 실습하러 가볼까요?

영상 잘 보셨나요? 유익하셨다면 좋아요 구독 한번씩 꼭 부탁드립니다. 컨텐츠 제작에 정말 큰 힘이 됩니다. 앞으로 더 유익한 영상으로 찾아뵙겠습니다. 감사합니다.