[JavaScript] 비동기 AJAX
[JavaScript] 이벤트 핸들러 ( DOM ) [JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Fle
hong-study.tistory.com
API
API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘이다.
예를 들어 카카오 소프트웨어 시스템에는 지도나 메신저 등의 데이터가 들어있고 이를 활용해 어려가지 기능을 구현 및 데이터를 받아서 사용할 수 있다.
API는 Application Programming Interface 의 줄임말로, 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타낸다. Interface 는 두 애플리케이션 간의 서비스 계약이라고 할 수 있다.
▶ 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의한다.
API의 종류
API는 크게 4가지로 분류되는데, SOAP API, RPC API, Websocket API, REST API 로 분류된다.
- SOAP API
단순 객체 접근 프로토콜을 사용한다. 클라이언트와 서버는 XML을 사용하여 메세지를 교환한다. - RPC API
원격 프로시저 호출이라고 하고, 클라이언트가 서버에서 함수나 프로시저를 완료하면 서버가 출력을 클라이언스로 다시 전송한다. - Websocket API :
JSON 객체를 사용하여 데이터를 전달하는 또 다른 최신 웹 API이다.
클라이언트와 서버 간의 양방향 통신을 지원하고 서버가 연결된 클라이언트에 콜백 메세지를 전송할 수 있어
REST API보다 효율적으로 사용한다. - REST API
웹에서 볼 수 있고 가장 많이 사용하는 유연한 API이다. 클라이언트가 서버에 요청을 데이터로 보낸다.
서버가 이 클라이언트 입력을 사용하여 내부 함수를 시작하고 출력 데이터를 다시 클라이언트에 반환한다.
카카오 API 이용하기
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
카카오 API는 카카오에서 만든 API로 메신저, 지도등 많은 API를 무료로 사용할 수 있다 ( 단, 이용 횟 수 초과시 결제 )
위 주소 Kakao Developer 로 접속하여 로그인을 한 뒤 내 애플리케이션으로 접속한 이후,
내 애플리케이션 항목에 접속 후 내 애플리케이션을 만든다.
그렇게 내 애플리케이션을 만들면 위와 같이 api 키를 발급받을 수 있는데, 이는 항상 비공개로 사용에 유의해야한다.
kakao Map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 api key 입력"></script>
</head>
<body>
<a href="https://map.kakao.com/link/map/37.402056,127.108212">지도보기</a>
<div id="map" style="width:300px;height:300px;"></div>
<script>
// var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
// var options = { //지도를 생성할 때 필요한 기본 옵션
// center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
// level: 3 //지도의 레벨(확대, 축소 정도)
// };
// var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
var iwContent = '<div style="padding:5px;">엄...! <br><a href="https://map.kakao.com/link/map/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">큰지도보기</a> <a href="https://map.kakao.com/link/to/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
</script>
</body>
</html>위 처럼 테스트 코드를 가져와 내 api 키를 입력하면 쉽게 지도를 가져올 수 있다.
kakao Login
위와 동일하게 kakao login 기능도 api로 받아올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. SDK링크 -->
<script src="js/kakao.min.js"></script>
</head>
<body>
<button onclick="kakaoLogin()">카카오로그인</button>
<script>
// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해야 합니다.
Kakao.init('발급받은 javascript api 키');
// SDK 초기화 여부를 판단합니다.
console.log(Kakao.isInitialized());
//1. 카카오로그인
function kakaoLogin() {
Kakao.Auth.authorize({
redirectUri: 'http://127.0.0.1:5500/12api/index03.html', //지금은 클라이언트로 결과를 받았지만, 나중에는 컨트롤러 주소가 되면 됩니다
});
}
//이 이후 부터는 서버에서 처리가 들어가야 합니다. but 강제로 client에서 그냥 해봄
</script>
</body>
</html>'Programming > JavaScript' 카테고리의 다른 글
| [JS] D-DAY 카운트 구현 (0) | 2024.06.13 |
|---|---|
| [JavaScript] 날짜를 생성하는 New Date (0) | 2024.06.11 |
| [JavaScript] 비동기 AJAX (0) | 2024.03.07 |
| [JavaScript] 이벤트핸들러 ( BOM ) (0) | 2024.03.07 |
| [JavaScript] 이벤트 핸들러 ( DOM ) (0) | 2024.03.07 |
