2022. 12. 20. 16:23ㆍ프론트엔드개발/JavaScript
안녕하세요~ totally 개발자입니다.
오늘은 원격 API를 호출해서 데이터를 불러오고 웹페이지에 표시하는 방법을 알아보도록 하겠습니다. 예전에는 서버 쪽에서 API를 주로 호출했지만 요즘에는 클라이언트 단에서 API를 직접 호출해서 데이터를 다루는 경우가 많아지고 있기 때문에 클라이언트 단에서 직접 API를 호출하고 데이터를 다루는 방법을 이해해야 합니다. 이를 위해, request 등과 같은 라이브러리를 사용하면 되지만 근래에는 브라우저 자체에 존재하는 fetch 함수를 사용하면 간단하고 쉽게 구현할 수 있습니다.
fetch 함수는 Promise 객체를 반환하며 이 Promise 객체는 비동기(Asynchronous)를 위해, 미래에 저장되는 값을 위해 사용된다고 보면 됩니다. 이 함수는 2개의 parameter 값을 받으며 URL, options를 받을 수 있습니다. options는 객체 형태로 지정되며 자세한 내용은 아래 링크를 참고해서 살펴보시면 됩니다.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Using the Fetch API - Web APIs | MDN
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the net
developer.mozilla.org
[기본 코드]
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error));기본 구조는 이렇게 구성되며 jsonplaceholder.typicode.com/posts를 예시 api로 데이터를 불러오도록 하겠습니다. fetch의 첫 번째 인자로 url를 넣어주고, method는 GET인데 생략 가능하므로 options 인자를 넣어주지 않아도 됩니다. method로 POST, PUT, DELETE 등이 들어갈 수 있으며 그 때에는 options 인자를 넣어주면 됩니다. 아래에 posts
이렇게 url를 들어가서 보면 데이터가 보입니다. 이것을 forEach를 사용하여 데이터들을 출력해볼 수 있습니다. 아래를 참고하시면 됩니다.
[작동 모습]
https://totallydeveloperproject.000webhostapp.com/api_test/posts.html
[전체 소스 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h1>API FETCH EXAMPLE</h1><br />
<table id="container">
<tr>
<td>User ID</td>
<td>ID</td>
<td>Title</td>
<td>Body</td>
</tr>
</table>
<script>
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) =>
data.forEach(elem => {
document.querySelector("#container").innerHTML += `
<tr>
<td>${elem.userId}</td>
<td>${elem.id}</td>
<td>${elem.title}</td>
<td>${elem.body}</td>
</tr>`;
}))
.catch((error) =>
document.querySelector("#container").innerHTML += `
<tr>
<td colspan="4">Error occurred.</td>
</tr>
`);
</script>
</body>
</html>data에 forEach 함수를 사용하면 모든 데이터들에 접근해서 데이터들을 출력해볼 수 있고 만약 error가 발생한 경우 catch 구문을 이용해서 에러를 출력할 수 있습니다. (아래 참고)
'프론트엔드개발 > JavaScript' 카테고리의 다른 글
| [010] 자바스크립트 (JavaScript) - reduce() 함수 사용 (0) | 2023.01.04 |
|---|---|
| [009] 자바스크립트 (JavaScript) - Generator(제너레이터), yield 활용 (0) | 2022.12.28 |
| [007] 자바스크립트 (JavaScript) - 핵심요약(함수 - Function) (0) | 2022.11.15 |
| [006] 자바스크립트 (JavaScript) - 핵심요약(DOM Event) (0) | 2022.11.01 |
| [005] 자바스크립트 (JavaScript) - 핵심요약(반복문 - for, for in, for of, forEach) (0) | 2022.11.01 |