<div id="readability-page-1" class="page"><div>
<p>개발자와 회의하다 보면 <code>API</code>라는 단어를 종종 듣게 됩니다. 공부 겸 <code>API</code>란 무엇인지 쉽게 풀어 정리해 보겠습니다.</p>

<h2 id="api란">API란?</h2>

<p><strong>위키백과</strong>에 설명하고 있는 <code>API</code>의 사전적 정의는 아래와 같습니다.</p>

<blockquote>
  <p>API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.</p>
</blockquote>

<p>무슨 내용인지 전문가가 아닌 이상 이해하기 쉽지 않습니다. 레스토랑을 예로 들어보겠습니다.</p>

<h3 id="레스토랑에서">레스토랑에서…</h3>

<p><img src="https://media.giphy.com/media/3o6ZsYRW7iRixVPeRq/giphy.gif" alt="animation"></p>

<ol>
  <li><code>손님</code>은 <code>웨이터</code>를 불러 <u>음식을 주문</u>합니다.</li>
  <li><code>웨이터</code>는 <code>셰프</code>에게 <u>음식을 요청</u>합니다.</li>
  <li><code>셰프</code>는 요리가 끝난 후 <code>웨이터</code>에게 <u>음식을 전달</u>합니다.</li>
  <li><code>웨이터</code>는 <code>손님</code>에게 주문한 음식을 제공합니다.</li>
</ol>

<p><img src="https://i.imgur.com/GjZMfdJ.png" alt="Imgur"></p>

<p>위 상황에서 <code>손님</code>은 메뉴에 있는 음식을 요청하는 <strong>응용 프로그램</strong>이라면 <code>셰프</code>는 요리를 만들어 전달하는 <strong>운영 체제</strong>라고 할 수 있습니다. 이 둘을 연결해주는 <code>웨이터</code>가 바로 <strong>API</strong>입니다. 조금 더 생각해보면 <code>메뉴</code>는 API의 <strong>인터페이스</strong>라고 할 수 있습니다.</p>

<h2 id="api-어떻게-사용할까">API 어떻게 사용할까</h2>

<p>API를 어떻게 쓰는지 예를 들어 작성해 보겠습니다.<br>
먼저 무료로 사용할 수 있는 오픈 API 사이트 몇 곳을 소개합니다.</p>

<blockquote>
  <p>API를 무료로 이용할 수 있다고 해도 본인 인증할 수 있는 키가 필요하며, 몇 번까지 <strong>무료</strong> 초과 이용 시 <strong>유료</strong>인 API도 있습니다.</p>
</blockquote>

<ul>
  <li>공공데이터포털 : <a href="https://www.data.go.kr/">https://www.data.go.kr/</a></li>
  <li>Kakao Developers : <a href="https://developers.kakao.com/">https://developers.kakao.com/</a></li>
  <li>Naver Developers : <a href="https://developers.naver.com/">https://developers.naver.com/</a></li>
  <li>OpenWeatherMap : <a href="http://openweathermap.org/">http://openweathermap.org/</a></li>
</ul>

<p>날씨 정보를 제공하는 <strong>OpenWeatherMap</strong>의 <code>API</code>를 이용해 런던의 날씨 정보를 알아보겠습니다.</p>

<h2 id="api-사용하기">API 사용하기</h2>

<p>레스토랑의 이야기를 토대로 설명해보자면, 런던의 현재 날씨를 보여주는 <strong>응용 프로그램</strong>을 만들기 위해 OpenWeatherMap 이라는 <strong>운용 체제</strong>의 <code>API</code>를 통해 정보를 제공 받게 됩니다.</p>

<h3 id="jquery-예제">jQuery 예제</h3>

<p>현재 날씨 정보를 받아오기 위한 API 주소는 아래와 같은 형식으로 구성됩니다. <a href="http://openweathermap.org/api">🔗</a></p>

<div><pre><code><span>var</span> <span>api</span> <span>=</span> <span>"</span><span>//api.openweathermap.org/data/2.5/weather?q=지역&amp;appid=인증키</span><span>"</span><span>;</span>
</code></pre></div>

<p><code>jQuery.getJSON()</code>를 이용하여 요청한 API 정보를 HTML 내 출력하는 예시를 작성해 보았습니다.</p>

<p data-height="300" data-theme-id="0" data-slug-hash="baLVxM" data-default-tab="js,result" data-user="moonspam" data-embed-version="2" data-pen-title="OpenWeatherMap API Sample">See the Pen <a href="https://codepen.io/moonspam/pen/baLVxM/">OpenWeatherMap API Sample</a> by moonspam (<a href="https://codepen.io/moonspam">@moonspam</a>) on <a href="https://codepen.io/">CodePen</a>.</p>


<h2 id="정리">정리</h2>

<p><code>API</code>는 어렵고 복잡한 과정을 쉽게 전달받을 수 있도록 만들어주는 다리 역할을 해줌으로써 작업을 빠르고 간결하게 진행할 수 있습니다. 👍👍👍</p>

<p><img src="https://media.giphy.com/media/ZgzrLrlGf5ENW/giphy.gif" alt="easy"></p>

</div></div>

코딩 공부방

개발자와 회의하다 보면 API라는 단어를 종종 듣게 됩니다. 공부 겸 API란 무엇인지 쉽게 풀어 정리해 보겠습니다.
API란?
위키백과에 설명하고 있는 API의 사전적 정의는 아래와 같습니다.
API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.
무슨 내용인지 전문가가 아닌 이상 이해하기 쉽지 않습니다. 레스토랑을 예로 들어보겠습니다.
레스토랑에서…
손님은 웨이터를 불러 음식을 주문합니다.
웨이터는 셰프에게 음식을 요청합니다.
셰프는 요리가 끝난 후 웨이터에게 음식을 전달합니다.
웨이터는 손님에게 주문한 음식을 제공합니다.
위 상황에서 손님은 메뉴에 있는 음식을 요청하는 응용 프로그램이라면 셰프는 요리를 만들어 전달하는 운영 체제라고 할 수 있습니다. 이 둘을 연결해주는 웨이터가 바로 API입니다. 조금 더 생각해보면 메뉴는 API의 인터페이스라고 할 수 있습니다.
API 어떻게 사용할까
API를 어떻게 쓰는지 예를 들어 작성해 보겠습니다.
API를 무료로 이용할 수 있다고 해도 본인 인증할 수 있는 키가 필요하며, 몇 번까지 무료 초과 이용 시 유료인 API도 있습니다.
공공데이터포털 : https://www.data.go.kr/
Kakao Developers : https://developers.kakao.com/
Naver Developers : https://developers.naver.com/
OpenWeatherMap : http://openweathermap.org/
날씨 정보를 제공하는 OpenWeatherMap의 API를 이용해 런던의 날씨 정보를 알아보겠습니다.
API 사용하기
레스토랑의 이야기를 토대로 설명해보자면, 런던의 현재 날씨를 보여주는 응용 프로그램을 만들기 위해 OpenWeatherMap 이라는 운용 체제의 API를 통해 정보를 제공 받게 됩니다.
jQuery 예제
현재 날씨 정보를 받아오기 위한 API 주소는 아래와 같은 형식으로 구성됩니다. 🔗
var api = "//api.openweathermap.org/data/2.5/weather?q=지역&appid=인증키";
jQuery.getJSON()를 이용하여 요청한 API 정보를 HTML 내 출력하는 예시를 작성해 보았습니다.
See the Pen OpenWeatherMap API Sample by moonspam (@moonspam) on CodePen.
정리
API는 어렵고 복잡한 과정을 쉽게 전달받을 수 있도록 만들어주는 다리 역할을 해줌으로써 작업을 빠르고 간결하게 진행할 수 있습니다. 👍👍👍

API 쉽게 이해하기

댓글