API๋ง๋ค ์ ํด์ง '์์ฒญ'๊ณผ '์๋ต'์ ํ์์ด ์๋๋ฐ, ์ด ํ์์ด ์์ฑ๋ ๋ฌธ์๋ฅผ API ๊ฐ์ด๋๋ผ๊ณ ๋ถ๋ฅธ๋ค.
1. html ๊ธฐ๋ณธ ์ธํ ํ,
2.
3. Boby ์ค ๋งจ ํ๋จ์ ๋ณต๋ถ
4. jQuery๋ฅผ ์ด์ฉํ AJAX ์ฐ๊ธฐ (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
Example ์์๋ฅผ ์ผ๋จ ๊ธ์ด์์, html body ํ๊ทธ ๋ด, script ํ๊ทธ ์์ชฝ์ ๋ณต๋ถ.
5. ์นด์นด์ค Developer ๋ค์ด๊ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์ถ๊ฐ๋ฅผ ํตํด API ์ฝ๋๋ฅผ ๋ฐ๊ธ๋ฐ๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ํ๋ API ๋ฌธ์๋ฅผ ํ ๋๋ก, Ajax ์ฝ๋๋ฅผ ์์ ํ๋ค.!
developers.kakao.com/docs/latest/ko/daum-search/dev-guide#search-book
Kakao Developers
์นด์นด์ค API๋ฅผ ํ์ฉํ์ฌ ๋ค์ํ ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํด๋ณด์ธ์. ์นด์นด์ค ๋ก๊ทธ์ธ, ๋ฉ์์ง ๋ณด๋ด๊ธฐ, ์น๊ตฌ API, ์ธ๊ณต์ง๋ฅ API ๋ฑ์ ์ ๊ณตํฉ๋๋ค.
developers.kakao.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API ์ฐ์ต</title>
</head>
<body>
<h1> API ์ฐ์ต์ฉ ์ฌ์ดํธ๐ฅ </h1>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$.ajax({
method: "GET",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: {
query: "๋ฏธ์๋ฐ์ ์ฉ๊ธฐ",
},
headers: {
Authorization: "KakaoAK 0f7acd5ca96b1d76578d02adc4161263"
},
})
.done(function (msg) {
alert("Data Saved: " + msg);
});
</script>
</body>
</html>
alert์ฐฝ์ด ์๋๋ผ, ์ข ๋ ์์ธํ ๋ณด๊ธฐ ์ํด console์ฐฝ์ ์ฐ์ด๋ณด๋๋กํ์.
<script>
$.ajax({
method: "GET",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: {
query: "๋ฏธ์๋ฐ์ ์ฉ๊ธฐ",
},
headers: {
Authorization: "KakaoAK 0f7acd5ca96b1d76578d02adc4161263"
},
})
.done(function (msg) {
console.log(msg);
});
</script>
ํ ๋๋ฐ.. ์ ๋ ฅํ๋ '๋ฏธ์๋ฐ์ ์ฉ๊ธฐ'์ ๋ํ ์ฑ ์ ๋ณด๊ฐ ์๋ค. .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API ์ฐ์ต</title>
</head>
<body>
<h1> API ์ฐ์ต์ฉ ์ฌ์ดํธ๐ฅ </h1>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$.ajax({
method: "GET",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: {
query: "ํธ๋ชจ์ฌํผ์์ค",
},
headers: {
Authorization: "KakaoAK 0f7acd5ca96b1d76578d02adc4161263"
},
})
.done(function (msg) {
console.log(msg);
});
</script>
</body>
</html>
ํธ๋ชจ์ฌํผ์์ค๋ก ๋ฐ๊ฟ๋ดค๋ค..
ํ ๋๋ฐ ์งฑ์ ๊ธฐํด..๋ด๊ฐ ํด๋์ด API๋ฅผ ์ฌ์ฉํ๋ค๋ ๊ฒ์ ์ด๋ฐ๊ฑฐ๊ตฌ๋. (API ๊ฐ๋ ์ ๋ช ํํ ์ดํดํ๊ณ ์จ๋ณธ ๊ฒ์ ์ฒ์์ด๋ค. . . ใ )
์ ์ด์ ์ด๊ฒ์ console์ฐฝ์ ๋์ด, ์นํ์ด์ง์ ๋ก๋์ํค๋๋ก ํ ๊ฑฐ๋ค. ๊ทธ๋ฌ๋ ค๋ฉด ํ๋จ์ ๊ฐ๋ ์ ์ดํดํด์ผํ๋ค.
"key": "value"
-> data.key => "value"๋ฅผ ๊บผ๋ด์ค๋ค.
Step2.
Step3.
์, ์ด์ ์์ํด๋ณด์
๊ทธ๋ฌ๋ฉด ํ๋จ์, temp1 ์์ ์๋ต๋ฐ์ object๊ฐ ๋ค์ด๊ฐ๊ฒ ๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API ์ฐ์ต</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gugi&family=Nanum+Myeongjo&family=Yeon+Sung&display=swap"
rel="stylesheet">
<style>
html {
font-family: 'Gugi', cursive;
}
</style>
</head>
<body>
<h1> API Practice </h1>
<h2> ๐ Book Search Using KaKao API </h2>
<hr>
<div class="container">
<div class="thumbnail"></div>
<p></p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$.ajax({
method: "GET",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: {
query: "ํธ๋ชจ์ฌํผ์์ค",
},
headers: {
Authorization: "KakaoAK 0f7acd5ca96b1d76578d02adc4161263"
},
})
.done(function (msg) {
$("p").append(msg.documents[2].title);
$(".thumbnail").append('<img src="' + msg.documents[2].thumbnail + '"/>');
});
</script>
</body>
</html>
๊ฐ๋จํ๊ฒ ์ข๋ ์์๊ฒ ๋ฐ๊ฟ์ค๋ดค๋ค..
Jqeury๋ฅผ ์ด์ฉํด, ๊ฒ์๊ธฐ๋ฅ๊น์ง ์ถ๊ฐํ๋ค!
์ถ์ฒ
www.youtube.com/watch?v=QPEUU89AOg8