<!DOCTYPE html>
<html>
<head>
<title>Axios Example</title>
</head>
<body>
<h1>Data from Axios</h1>
<div id="data-container">
<!-- 데이터가 표시될 곳 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Axios 라이브러리를 가져옴 -->
<script src="script.js"></script> <!-- JavaScript 파일을 로드 -->
</body>
</html>
script.js
// script.js
// Axios 라이브러리를 사용하기 위해 axios.min.js를 로드했기 때문에 axios 객체를 사용할 수 있습니다.
// 서버로 GET 요청 보내기
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(function (response) {
// 요청이 성공하면 실행되는 함수
console.log(response.data); // 서버로부터 받은 데이터 출력
const dataContainer = document.getElementById('data-container');
dataContainer.innerHTML = `Title: ${response.data.title}<br>Body: ${response.data.body}`;
})
.catch(function (error) {
// 요청이 실패하면 실행되는 함수
console.error(error);
});
