API 프로트엔드가 백엔드에 요청시 특정규칙에 맞게요청해야하는데 이런 규칙에 맞는 요청을 API라고 한다
open API : 주소와 사용규칙을 공개한것
서버리스: 공개된 백엔드를 이용하고 프론트엔드만 만들어서 사용하는것
JSON: 자바스크립트의 오브젝트 다른 언어에서도 표준으로 사용되기때문에 정보전달에 이용됨
예제 실행화면
소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>API Practice</title> </head> <body> <h1>It's my Site</h1> <p></p> <!-- jquery CDN 가져옴 --> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous" ></script> <!-- jquery Ajax --> <script> $.ajax({ // 사용할 API에따라 request가 다르기때문에 개발가이드를 보고 method,url등을 변경해주어야함 method: "GET", url: "https://dapi.kakao.com/v3/search/book?target=titlehttps://dapi.kakao.com/v3/search/book?target=title", data: { query: "자바스크립트" }, headers: { Authorization: "KakaoAK e1c643a1bd03ad51ecb4cf87e29ab583" } //API 키를 헤더에 포함하라고했으니 가이드따라 넣어줌 }).done(function(msg) { alert("Data Saved: " + msg); console.log(msg.documents[0].title); console.log(msg.documents[0].thumbnail); // 썸네일이미지주소 $("p").append("<strong>" + msg.documents[0].title + "</strong>"); $("p").append("<img src =' " + msg.documents[0].thumbnail + " '/>"); }); </script> </body> </html> | cs |
'IT > WEB' 카테고리의 다른 글
| Ruby를 활용한 Lotto 번호 예제 (0) | 2020.03.01 |
|---|---|
| 부스트코스 학습후기: 웹 프로그래밍 01.웹의 동작 (0) | 2020.01.19 |
| Javascript 웹 다루어 보기 기초 (0) | 2019.12.30 |
| CSS 간단사용예제 (0) | 2019.12.29 |
| 등록한 웹페이지가 포털사이트에서 검색되게 만들기 (0) | 2019.12.29 |
