API가 **란** 무엇인가요? 🤷🏼‍♀️ Pt I

7344 단어 codenewbiebeginners
소개

또 다른 약어!



만세, 나는 약어를 좋아합니다!



무슨 뜻인가요.....?

API는 '응용 프로그래밍 인터페이스'의 약자입니다.

신비한...



네 확실합니다.
기술은 신비한 것을 좋아합니다. 거의 모든 애플리케이션에는 API가 있으며 본질적으로 시스템으로 무엇을 할 수 있고 필요한 데이터를 얻는 방법을 알려주는 계약입니다.

룰북처럼?



좀 그렇지만 그렇게 구체적이지 않습니다.

Newbie Dictionary 에서 API는 다음과 같이 정의되었습니다.

"Stands for Application Programming Interface, is a software intermediary that allows two applications to talk to each other, is a contract between you and the software that you want to use, telling you what you can and can't do with it. It's a bridge allowing you to use the software and integrate it with your code, so that it becomes easier to integrate. Example- The google maps API allows you to integrate their maps to your apps through their API."



그것은 꽤 좋은 정의입니다. 그러나 그것이 실제로 의미하는 바는 무엇입니까?

Google 지도의 예를 더 살펴보겠습니다. 귀하의 사이트에 표시되는 사업장 위치의 지도를 원한다고 가정하십시오(일반적인 사용 사례).

코드, 특히 지도용 JavaScript, HTML 및 CSS에 액세스하고 다음을 포함합니다.
HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

JavaScript:
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

CSS:
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


지금 바로 이 작업을 수행하고(Google 클라우드에 대한 결제 계정을 설정했다고 가정) 지도와 함께 로컬에서 실행되는 작은 페이지를 가질 수 있습니다.

시원한



위의 예에서는 Google Maps API에 액세스했습니다.

하지만 모든 일이 너무 빨리 일어났습니다!



그게했다. 분해해 봅시다.
HTML 블록을 다시 살펴보십시오. 맨 아래에 있는 <script> 태그(이 페이지에서 JavaScript가 있는 곳)에는 약간의 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"가 있습니다. 이 src는 끝점이라고 하며 일반 URL처럼 보이는 것을 가리키고 있습니다. 하지만 실제로는 Google Maps API에 대한 요청입니다. '이봐, 나에게 보내진 weekly 지도가 필요해, 봐봐 - 난 권한이 있어, 난 'API 키를 가지고 있어!'

API 키는 API에 대한 액세스를 제공합니다. Google의 경우 결제 계정과 이메일을 설정할 때 받을 수 있습니다. 다음과 같이 보일 것입니다.
b07fa21a-8863-4953-8aae-22027540a782
codepen의 random API key generator에서 이 키를 받았습니다.

앞서 살펴본 YOUR_API_KEYsrc에 입력합니다. 이 작업을 잊어버리거나 잘못 복사/붙여넣기하는 것은 일반적인 실수이며 가장 먼저 확인해야 할 것 중 하나입니다. 모든 문자가 거기에 있습니까? 아니면 실수로 한 문자를 잘라냈습니까?

그렇다면 API는 항상 지도나 사이트에 추가하는 것입니까?



불행히도 당신과 API 이해에 대해 설명하려는 모든 사람에게 API는 말 그대로 무엇이든 될 수 있습니다.

콘텐츠 관리 시스템?

이를 위한 API가 있습니다.



공학용 계산기?

이를 위한 API가 있습니다.



무작위로 생성된 강아지 사진?

이를 위한 API가 있습니다(여기 , 원하는 것을 알고 있습니다)



당신은 사진을 얻을. API는 데이터에 대한 액세스 권한을 제공하고 액세스 방법을 알려주는 브리지와 같습니다. 항상 데이터를 다시 전송하지는 않지만 매직 키가 있는 한 액세스할 수 있습니다.

그들이 모두 다르게 작동하고 다른 일을한다면 어떻게 사용하는지 알 수 있습니까?



문서 친구, 문서. 모든 API에는 일종의 문서가 있으며 여기에는 사용 방법에 대한 단계가 포함됩니다.

랜덤으로 생성된 강아지 사진 보다 여기까지 계속 읽고 계신다면, 먼저 안녕하세요👋🏻, 그리고 두 번째로 강아지 사진은 왜 안 보고 계시나요?!

거기에 있는 동안 문서를 살펴보세요. 프로젝트에서 사용할 수 있는 엔드포인트가 여러 개 있습니다. 그것도 무료!

우리가 일상에서 사용하는 API의 더 많은 예시를 보고 싶다면 추천합니다this site

This weather API 다른 끝점이 어떻게 다른 것을 줄 수 있는지에 대한 아이디어를 제공합니다.

REST, HTTP, GET, POST, AUTHENTICATION 및 기타 모든 것에 대해 들어본 적이 있습니까?



잠시만요. 이것은 이 기사의 범위를 조금 벗어나지만 파트 II와 파트 III에 대한 리소스와 지식을 수집하고 있습니다.



'API'는 큰 주제인데, 예전에 써봤지만 **가 무엇인지, 그 내용이 무엇인지 완전히 이해하지 못했습니다.

우리는 모두 여기에 코드 뉴비입니다 ...

좋은 웹페이지 즐겨찾기