1. vscode 에 index.html 만들어 준다.
2. ! 입력한다
3. lang="ko" 로 변경하고, title 태그 사이도 이름 바꾼다.
3. body 태그 안에 h1 태그 넣고 사이트라고 작성한다
4. index.html 에 오른쪽마우스 클릭 - Reveal in File Explorer 선택
5. index 실행
6. 표시된다.
7. 구글에 "jQuery CDN" 검색
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
code.jquery.com
8. 선택
9. 복사
10. body 태그 안에 붙혀넣기
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!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>
</body>
</html>
11. 구글에 "jQuery AJAX" 검색
jQuery.ajax() | jQuery API Documentation
Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available
api.jquery.com
12. Examples 예제를 그대로 복사
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});13. HTML에서 자바스크립트를 쓰려면 스크립트 태그안에 써줘야 한다.
body 태그안에 script 태그 넣는다.
14. ctrl + k + f 단축키 사용하면 코드 정렬된다.
<!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: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function (msg) {
alert("Data Saved: " + msg);
});
</script>
</body>
</html>
15. API 키 발급 받기 위하여 카카오 개발자 홈페이지에 접속한다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
16. 로그인 후, 시작하기 선택
17. 애플리케이션 추가하기
18. 앱이름과 사업자명 기입
19. 발급 받았다
20. 검색 선택하여 문서보기 선택 후 개발가이드 선택
21. method는 GET으로 되어있어 ajax의 method는 GET으로 바꾼다.
method: "GET"
22. sample에 적힌 url로 ajax의 url을 바꾸어 준다.
url: "https://dapi.kakao.com/v3/search/book?target=title"
23. data 작성
data: { query: "미움받을 용기"}
24. hearder 작성. ajax 안에 작성. REST API키 : 발급받은 REST API키
headers: { Authorization: "KakaoAK {REST API키}" }
25. 현재까지 소스
<!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",
data: { query: "미움받을 용기" },
headers: { Authorization: "KakaoAK {REST API}" }
})
.done(function (msg) {
console.log(msg);
});
</script>
</body>
</html>
출처 : 조코딩
'잡다한' 카테고리의 다른 글
| [jQuery] on 이벤트 (touchstart, touchend) (0) | 2021.03.16 |
|---|---|
| [ajax, API] 카카오 개발자 API로 책 검색하기 2 (0) | 2021.03.11 |
| [Eclipse] Mac에서 이클립스 콘솔 글자 크기 변경 (0) | 2021.03.10 |
| 아이폰과 안드로이드 앱 간단하게 만들기 3 (0) | 2021.03.08 |
| 아이폰과 안드로이드 앱 간단하게 만들기 2 (0) | 2021.03.08 |
