API
컴퓨터가 여러 소프트웨어와 상호 작용하거나 소통하는 모든 인터페이스를 의미하는 용어.
Web 개발자들이 말하는 API는 Web API인데 웹, HTTP를 기반으로하는 인터페이스.
다른 애플리케이션이나 데이터베이스로 가는 입구.
JSON
계속해서 데이터를 전송하거나 정보를 전송하는 포맷.사용자끼리 전송하거나 API에서 브라우저로 전송 할 수 있다. 일관적이고 예측할 수 있는 데이터를 포맷팅하며 자바스크립트와 비슷하다. 자바스크립트 객체 구문을 기반하며 유사하다. 하지만 가장 큰 차이점은 모든 키는 큰따옴표를 갖고 있다.
예를 들자면
const dog = {
breed: 'lab',
color: 'black',
isAlive: true,
owner: undefinded
}
//이걸 JSON 형식으로 가져오게 되면
JSON.stringify(dog)
"{"breed":"lab","color":"black","isAlive":"true"}"Fetch api
fetch("https://swapi.dev/api/people/1/")
.then((res) => {
console.log("RESOLVED!", res);
return res.json();
})
.then((data) => {
console.log(data);
})
.catch((e) => {
console.log("ERROR!", e);
});
const loadStarWarsPeople = async () => {
try {
const res = await fetch("https://swapi.dev/api/people/1/");
const data = await res.json();
console.log(data);
const res2 = await fetch("https://swapi.dev/api/people/2/");
const data2 = await res2.json();
console.log(data2);
} catch (e) {
console.log("ERROR!!!", e);
}
};
loadStarWarsPeople();비동기 함수의 에러 핸들링은 try/catch로 하면 된다.
Axios
자바스크립트의 네이티브 함수가 아니다. HTTP 요청의 생성과 처리를 최대한 간소화할 목적으로 만들어졌다. 백그라운드에서는 동일하게 브라우저에 fetch 함수를 사용하지만 자바스크립트에서 기본 제공하는 함수가 아니므로 추가로 빌드해야 한다. 사용하려면 import해야한다.
일단 html에서 추가해줘야 할 게 있다.
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>그런뒤 스크립트를 Axios로 작성해보자.
// axios
// .get("https://swapi.dev/api/people/1/")
// .then((res) => {
// console.log("RESPONSE: ", res);
// })
// .catch((e) => {
// console.log("ERROR! ", e);
// });
const getStarWarsPerson = async (id) => {
try {
const res = await axios.get(`https://swapi.dev/api/people/${id}/`);
console.log(res.data);
} catch (e) {
console.log("ERROR", e);
}
};
getStarWarsPerson(5);
getStarWarsPerson(10);Axios로 헤더를 세팅해보자
아재 개그 API를 사용해보겠다 (ㅋㅋㅋㅋ)
버튼을 클릭하면 새로운 아재 개그들이 나오게끔 !!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>클릭하면 새로운 아재 개그가 나와요!</h1>
<button>눌러봐!</button>
<ul id="jokes"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<script src="1.js"></script>
</body>
</html>const jokes = document.querySelector("#jokes");
const button = document.querySelector("button");
const addNewJoke = async () => {
const jokeText = await getDadJoke();
const newLI = document.createElement("LI");
newLI.append(jokeText);
jokes.append(newLI);
};
const getDadJoke = async () => {
try {
const config = { headers: { Accept: "application/json" } };
const res = await axios.get("https://icanhazdadjoke.com/", config);
return res.data.joke;
} catch (e) {
return "NO JOKES AVAILABLE! SORRY :(";
}
};
button.addEventListener("click", addNewJoke);
그럼 정말 API를 가져와서 구현해보자 !
const form = document.querySelector('#searchForm');
form.addEventListener('submit', async function (e) {
e.preventDefault();
if (!searchTerm.trim()) {
deleteImages();
return;
}
const searchTerm = form.elements.query.value;
const config = { params: { q: searchTerm } }
const res = await axios.get(`http://api.tvmaze.com/search/shows`, config);
makeImages(res.data)
form.elements.query.value = '';
deleteImages(res.data)
})
const makeImages = (shows) => {
for (let result of shows) {
if (result.show.image) {
const img = document.createElement('IMG');
img.src = result.show.image.medium;
document.body.append(img)
}
}
}
const deleteImages = () => {
const images = document.querySelectorAll('img');
images.forEhch( img => img.remove());이미지를 지우는 함수는 내가 만들어줬다 (ㅎㅎㅎㅎ)
끄적 끄적 배운 걸 적습니다 / FRONT-END STUDY VELOG