● Ajax란?
※ 오픈 API 사용하는 방법
1. 회원가입
2. 내가 필요한 API가 뭔지 찾기
3. 샘플코드 보기 (맨 위 OR 맨 아래)
4. ★★★★★ Key신청하기
5. 샘플코드 뜯어보고 수정하기
6. 모르는 내용은 문서확인하기
7. Url 테스트
8. 코드 개발 시작
인증키: 709950ed56fb6243b4b795fb49640262
사이트에 접속후 OPEN API 메뉴로 들어간다.
딕셔너리 형태로 나타나게되고 빨간동그라미 부분을 변경해서 날짜를 조절 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button onclick="data()">요청!</button>
<script>
let data = ()=>{
//jQuery를 통해 ajax방식으로 데이터를 요청
$.ajax({
url:"https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=709950ed56fb6243b4b795fb49640262&targetDt=20211128",
type: "get",
success: function(res){
// 영화 순위 1위 ~ 10위까지
// 1위 범죄도시2
// 2위 ~~
// console창에 출력
for (let i=0; i<=10;i++){
console.log(res.boxOfficeResult.weeklyBoxOfficeList[i].rank+"위 "+res.boxOfficeResult.weeklyBoxOfficeList[i].movieNm)
}
},
error: function(){
alert('실패!')
}
})
}
</script>
</body>
</html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> # jQuery 사용
<body>
<button onclick="data()">요청!</button> # 요청 버튼
Json Parser을 이용해 Key와 Value값 확인
jQuery.ajax( url [, settings] )
- url : 요청 URL (클라이언트가 HTTP 요청을 보낼 서버의 주소)
- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )
· url : 요청 URL (클라이언트가 HTTP 요청을 보낼 서버의 주소)
· data : 요청과 함께 서버에 보내는 string 또는 json
· success(data, textStatus, jqXHR) : 요청이 성공일때 실행되는 callback 함수
· dataType : 서버에서 내려온 data 형식. ( default : xml, json, script, text, html )
<script>
let data = ()=>{
//jQuery를 통해 ajax방식으로 데이터를 요청
$.ajax({
url:"https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=709950ed56fb6243b4b795fb49640262&targetDt=20211128", # 영화진흥회 오픈API: Json URL
type: "get", # get 방식으로 요청
success: function(res){ # 성공했을때 res
// 영화 순위 1위 ~ 10위까지
// 1위 범죄도시2
// 2위 ~~
// console창에 출력
for (let i=0; i<=10;i++){ # 1 ~10 위까지 랭크(rank), 영화이름(movieNm) 출력
console.log(res.boxOfficeResult.weeklyBoxOfficeList[i].rank+"위 "+res.boxOfficeResult.weeklyBoxOfficeList[i].movieNm)
}
},
error: function(){ # 요청 실패 했을때 알림창에 "실패!" 출력
alert('실패!')
}
})
}
결과) 22.11.11일자
접속후 Kakao 아이디로 로그인후
메뉴의 내어플리케이션으로 들어간다
앱 등록
카카오 API 사용을 위해 개발자 웹사이트에서 앱을 만들고, 해당 앱에 서비스 이름과 회사명, 아이콘 등 정보를 등록할 수 있다. 앱 정보는 서비스 이름, 제3자 정보제공동의 등 법적인 사항과도 관련이 있으므로 실제 서비스와 같은 내용으로 구성되어야 한다.
개발자 웹사이트에서 로그인한 후, [내 애플리케이션] > [애플리케이션 추가하기]를 눌러 앱을 생성할 수 있다.
앱 키
앱을 생성하면 플랫폼별 앱 키(App Key)가 발급됩니다. 발급받은 앱 키는 [내 애플리케이션] > [요약 정보] 또는 [내 애플리케이션] > [앱 키]에서 확인할 수 있다. 각 앱 키의 [복사] 버튼으로 값을 그대로 복사해 사용하면 편리한다.
플랫폼 등록
등록한 앱에서 API를 호출하려면 사용하려는 플랫폼에 대한 정보를 개발자 웹사이트에 등록해야 합니다.
Web 플랫폼 등록
기본 도메인에 자신의 주소인 http://127.0.0.1:5500 등록한다.
다시 메뉴화면의 문서를 누르고
자기가 필요한 API서비스를 클릭한다.
그 다음 화면에서 개발하고자하는 가이드로 들어간다 (우리는 JavaScript)
시작하기를 누른다
준비하기
Kakao 지도 Javscript API 는 키 발급을 받아야 사용할 수 있습니다.
그리고 키를 발급받기 위해서는 카카오 계정이 필요합니다.
키 발급에는 아래 과정이 필요합니다.
1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
6. 앱을 실행합니다.
- 등록한 도메인(예: http://localhost:8080)에서 웹 서버를 실행시켜 위 파일을 엽니다.
|
# Python이 설치된 컴퓨터에서는 해당 폴더로 이동 후 $ cd /path/to/your/folder/ # 다음과 같이 테스트용 웹 서버를 실행할 수 있습니다. $ python -m SimpleHTTPServer 8080
|
- 브라우저를 열어 위 도메인에 접속합니다.
등록된 사이트 도메인에서만 지도API를 사용할 수 있기 때문에 반드시 등록해주세요.
왼쪽 메뉴의 열쇠모양 을 클릭하면 내 애플리케이션 로 이동합니다. 아직 발급받은 키가 없다면 해당 페이지에 접속하여 키를 발급 받으세요.
- Sample 탭에서 필요한 종류의 링크로 들어간 후 필요한 서비스로 들어간다.
필요한 형식을 복사한 후 인증키를 입력해서 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 생성하기</title>
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=928bf9781ccef653b742d7038f3e4924"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.11074920318669, 126.87774044009879), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html><body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div> # map의 넓이, 높이
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=928bf9781ccef653b742d7038f3e4924"></script>
<script>
var mapContainer = document.getElementById('map'), # 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.11074920318669, 126.87774044009879), # 지도의 중심좌표
level: 3 # 지도의 확대 레벨
};
# 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
결과) 좌표를 입력했을때 중심 부분이 나오게 된다
'개발 공부 > JS, JQuery' 카테고리의 다른 글
| 닷홈 호스팅하는 법(무료 웹 호스팅) (0) | 2023.11.23 |
|---|---|
| Jquery(제이쿼리) 차트만들기, Ajax를 이용해 날씨차트만들기 (1) | 2023.10.24 |
| 자바스크립트 좋아요 및 댓글작성, 댓글창 (0) | 2023.10.19 |
| 자바스크립트 this 4가지 사용법 (0) | 2023.10.19 |
| 자바스크립트 로그인 폼 실습, 요소 추가 삭제 함수 (0) | 2023.10.19 |
