오늘 배운 것
카카오 API를 이용한 도서 검색 사이트 만들기
혼자서 오픈 API를 사용해 본 적이 없었기 때문에 get method로 카카오의 도서검색 사이트를 만들어 보았다.
유투버 조코딩의 강의를 참고하여 진행하였는데, api키도 발급받아보고 사용법도 찬찬히 뜯어가며 읽어보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<title>ajax 연습</title>
<body>
<h1>kakao book API를 활용한 ajax연습</h1>
<script>
function search() {
$("#container").empty();
$.ajax({
method: "get",
url: "https://dapi.kakao.com/v3/search/book?target=title",
data: { query: $("#search").val() },
headers: { Authorization: "API KEY" },
success: function (response) {
let document = response['documents'];
for (let i = 0; i < document.length; i++) {
let title = document[i]['title'];
let img = document[i]['thumbnail'];
let temp_html = `<div class="card" style="width: 18rem;">
<img src="${img}" class="card-img-top">
<div class="card-body">
<p class="card-text">${title}</p>
</div>
</div>`;
$("#container").append(temp_html);
}
}
});
}
</script>
<input type="text" id="search" placeholder="책 제목을 입력하세요">
<input type="button" value="검색" onclick="search()">
<div id='container'>
</div>
</body>
</html>강의에서는 리스트의 첫번째 값만 보여줬는데, 나는 스파르타코딩클럽의 웹개발 수업에서 응용하여 for문을 이용해서 검색결과 모두를 보여주는 방식으로 구현하였다.
오늘 느낀 점
강의를 따라가는 것도 중요하지만 직접 구현해보고 응용해보고 내것으로 만드는 것이 더 중요하다고 느낀 하루였다. 아직 혼자서 웹페이지를 만드는 것은 힘들지만 하나씩 하다보면 언젠가는 할 수 있는 날이 오겠지🙄
post method도 아직까지는 어려워서 더 공부를 해야 다음 프로젝트때는 팀에 도움이 되는 팀원이 될 수 있을 것 같다.
보여지는 것도 중요하니 앞으로는 뷰도 좀 더 신경써보는 걸로👍
초보개발자의 개발일기