728x90
오늘 내가 배운 것
백엔드에 데이터 요청 시 url을 통해서 요청을 할 수 있다.
url에 요청 포맷에 맞게 url을 만들어야 한다.
API를 불러오는 기초적인 함수 만들기
const API_Key = "발급된 API키를 적어준다.";
async function getData(){
const url = url('요청할 data의 url주소와 함께 요청할 것을 확인 후 요청 변수를 적어준 후 값을 함께 적어준다.');
const response = await fetch(url); // await: 데이터가 올 때까지 기다려라! 그의 짝은 async 함수
const data = await response.json(); // 요청한 데이터가 담겨있는 respone에서 json 방식의 데이터만 뽑아서 data에 넣어달라.
console.log("data", data)
}
getData(); // 함수를 호출해야 작동을 하겠지?
이렇게 일단... 유튜브로 배웠는데 나는 왜 안되지?? 이따가(공부하다 시간 지남) 다시 해봐야겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API연습</title>
</head>
<body>
<h1>도서 검색대</h1>
<p></p>
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$.ajax({ // 코드 상단에는 요청에 대한 정보가 들어감
method: "GET", // 전송 방식
data: {query:'미움받을 용기'}, // 보낼 데이터
headers: {Authorization: `KakaoAK 51a157b9dd974840de2679733947d241`}
})
.done(function (msg) {
console.log(msg. documents[0].title);
console.log(msg. documents[0].thumbnail);
$( "p" ).append(msg. documents[0].title);
$( "p" ).append("<Img src='"+ msg. documents[0].thumbnail+"'/>");
});
</script>
</body>
</html>
다른 유튜브 영상을 보고 이런 것도 시도해 봤다....
사실 오늘도 정말 포기하고 싶은 마음이 너무 컸다...
주말이지만 지푸라기라도 잡아야겠다는 심정으로 도움을 요청했는데 감사하게도 동기 두 분이 나를 도와주셨다.
(도와주셨는데 죄송해요 사실 잘 모르겠어요...)
이후로 이런저런 이야기를 나눴고 나와 같은 마음, 생각을 하시는 분과 이야기를 하면서
백지를 내는 한이 있어도 나도 다시 한번 더 시도해 보기로 생각해 본 날이었다.
다시 한번 일어날 수 있게 해 주셔서 감사합니다.
Sin prisa, pero sin pausa
(조급해하지 말며, 포기하지 마라)
'TIL' 카테고리의 다른 글
| 2024 . 01 . 09 TIL (1) | 2024.01.09 |
|---|---|
| 2024. 01. 08 TIL? (1) | 2024.01.08 |
| 2024. 01. 05 징징거림 (0) | 2024.01.07 |
| 2024. 01. 04 TIL (1) | 2024.01.04 |
| 2024. 01. 03 TIL (1) | 2024.01.03 |