Open API 활용

RIMIIT 2021. 5. 2. 05:03

2021. 5. 2. 05:03

Front-end : 우리가 보는 화면

Back-end : 화면에 보여줄 정보를 처리하는 곳

Front-end가 Back-end에 요청을 할 때 특정 규칙에 맞게 요청을 해야함

API(Application Programming Interface) = 사용 규칙을 제공하는 것

Open API : 누군가 Back-end를 만들어놓고 주소와 사용 규칙을 공개한 것을 의미

= "Back-end의 주소와 사용 규칙을 알고 있다면 Front-end만 만들어도 얼마든지 요청하고 데이터를 가져와서 쓸 수 있다는 것"

+) Front-end만 만들어 쓰는 것을 'serverless' 라고 부르기도 함

Front-end 의 요청(Request)과 Back-end의 응답(Response)은 API 마다 정해진 형식에 맞춰서 전달되고 이런 형식이 적혀진 문서를 API 가이드라고 한다.

공통적으로 요청과 응답에 대한 정보가 나와 있다.

<요청>

1. 주소 : 어디로 전달해야 할지

2. 전송방식 : GET/POST

3. 보낼 데이터 (API 요청에서 필요한 정보들)

<응답>

1. 형식 : JSON // 어떤 형식으로 날아오는지(요즘은 거의 대부분이 JSON 형태)

2. 응답 의미 설명 : JSON으로 날아온 응답에 어떤 것들이 포함되어 있는지

1. jQuery CDN 이용

jQuery CDN 사이트에서 가져온다.

CDN (Content Delivery Network)

::특정 서버에 트래픽이 집중되지 않고 컨텐츠를 자동으로 가장 가까운 서버에서 다운받도록 하는 기술

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

2. jQuery AJAX 이용

Examples에서 예시 하나를 복사해온다. (나중에 사용할 API 가이드에 맞춰서 수정할 예정)

Ajax

:: JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 (기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있음)

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

<카카오 API 사용>

홈페이지(developers.kakao.com/)에 들어가서 로그인 -> 내 애플리케이션 만들기 -> 키 확인 가능

[도구] - [REST API 테스트] - 자신이 사용하고자 하는 API의 [개발 가이드 보러가기]

<전체 코드>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 연습</title>
</head>

<body>
    <h1>내 사이트임</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script>
        $.ajax({ //코드 상단 : 요청에 대한 정보
            method: "GET", // 전송 방식
            url: "https://dapi.kakao.com/v3/search/book?target=title", // 전송 URL
            data: { query: "미움받을 용기" }, //전송 정보 JSON 형식
            headers : { Authorization: "KakaoAK 'REST API 키'"}
        })
            .done(function (msg) {//요청에 대한 응답이 올 때 처리하는 코드
                console.log(msg);
            });
    </script>
</body>

</html>

요청에 대한 응답(Response) 정보 - [F12] 키를 이용해 확인(console.log 사용했으므로)

=> API 가이드를 참고해 비교해보면 필수 정보들이 잘 담겨져 있는 것을 확인할 수 있다

<JSON 데이터 JavaScript 접근 방법>

dog = {
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14,
    "specialty" : ["솜사탕","부리부리"],
    "friend" : {"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
}

"식빵"을 가져오려면? dog.name 혹은 .name

"솜사탕"을 가져오려면? dog.specialty[0]

"젤리"를 가져오려면? dog.friend.name

<실습>

아까 봐뒀던 개발자 도구 탭을 활용한다.

※ 'Object' -[마우스 오른쪽] - [Store object as global variable]

(응답 받은 JSON을 console 창에서 다루기 위해 따로 저장해두는 것)

그러면 temp1이라는 곳에 Object가 잘 저장이 된 것이 확인가능하다.

"미움받을 용기"라는 책 제목과 썸네일을 불러올 것이기 때문에

temp1.documents[0].title

temp1.documents[0].thumbnail

를 사용할 것이다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 연습</title>
</head>

<body>
    <h1>내 사이트임</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script>
        $.ajax({ //코드 상단 : 요청에 대한 정보
            method: "GET", // 전송 방식
            url: "https://dapi.kakao.com/v3/search/book?target=title", // 전송 URL
            data: { query: "미움받을 용기" }, //전송 정보 JSON 형식
            headers : { Authorization: "KakaoAK 'REST API 키'"}
        })
            .done(function (msg) {//요청에 대한 응답이 올 때 처리하는 코드
                console.log(msg.documents[0].title);
                console.log(msg.documents[0].thumbnail);
            });
    </script>
</body>

</html>

위의 코드와 똑같지만, console.log 함수를 통해서 console 창을 통해 데이터 확인이 가능하다.

console 창에서 올바르게 값을 불러왔다는 것을 확인할 수 있다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 연습</title>
</head>

<body>
    <h1>내 사이트임</h1>
    <p></p>
    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script>
        $.ajax({ //코드 상단 : 요청에 대한 정보
            method: "GET", // 전송 방식
            url: "https://dapi.kakao.com/v3/search/book?target=title", // 전송 URL
            data: { query: "미움받을 용기" }, //전송 정보 JSON 형식
            headers: { Authorization: "KakaoAK 'REST API 키'" }
        })
            .done(function (msg) {//요청에 대한 응답이 올 때 처리하는 코드
                console.log(msg.documents[0].title);
                console.log(msg.documents[0].thumbnail);
                $("p").append("<strong>" + msg.documents[0].title + "</strong><br>");
                $("p").append("<img src='"+ msg.documents[0].thumbnail + "'/>");
            });
    </script>
    </script>
</body>

</html>

<p>태그를 추가한 후

append를 통해 (jQuery add html 검색하면 쉽게 방법을 알 수 있음)

<p>태그에 들어갈 내용을 추가해주었다.

www.youtube.com/watch?v=QPEUU89AOg8

'WEB > JavaScript' 카테고리의 다른 글

JSON (0)	2021.05.02
라이브러리 & 프레임워크 (0)	2021.01.27
웹 브라우저 제어 (0)	2020.11.08
콘솔 (0)	2020.11.05
이벤트 (0)	2020.11.05

TRACE

Open API 활용

'WEB > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바