🚀 Guide
현재 가이드는 기본 6가지 Resources(users, todos, posts, comments, books, reviews)를 대상으로 Fetch API를 사용한 예시를 제공합니다.
예시 코드를 복사하여 브라우저 개발자 도구 콘솔에 붙여 넣으면 간단하게 실행해볼 수 있습니다.
korean-dummy-json-fetcher 라이브러리 혹은 CDN를 사용하면 더 편리하게 API를 사용할 수 있습니다.
각 Resource에 대한 더 자세한 설명은 Docs를 참고해주세요.
⚠️POST, PUT, PATCH, DELETE Method는 실제 서버 DB에는 영향을 주지 않으며, 더미 데이터로 처리됩니다.
Resource 조회하기
id가 1인 게시물을 조회합니다.
fetch("https://koreandummyjson.site/api/posts/1")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 Resources를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users/:id | GET | 유저 조회 |
/todos/:id | GET | 할 일 조회 |
/posts/:id | GET | 게시물 조회 |
/comments/:id | GET | 댓글 조회 |
/books/:id | GET | 책 조회 |
/reviews/:id | GET | 리뷰 조회 |
Resource 목록 조회하기
모든 게시물을 조회합니다.
fetch("https://koreandummyjson.site/api/posts")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 Resources를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users | GET | 유저 목록 |
/todos | GET | 할 일 목록 |
/posts | GET | 게시물 목록 |
/comments | GET | 댓글 목록 |
/books | GET | 책 목록 |
/reviews | GET | 리뷰 목록 |
Resource 목록 페이징
게시물 목록을 페이징 처리하여 조회합니다.
Fetch URL Query String을 통해 page와 limit를 설정할 수 있습니다.
fetch("https://koreandummyjson.site/api/posts?page=1&limit=10")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 페이징 Resources를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users?page={page}&limit={limit} | GET | 유저 목록 페이징 |
/todos?page={page}&limit={limit} | GET | 할 일 목록 페이징 |
/posts?page={page}&limit={limit} | GET | 게시물 목록 페이징 |
/comments?page={page}&limit={limit} | GET | 댓글 목록 페이징 |
/books?page={page}&limit={limit} | GET | 책 목록 페이징 |
/reviews?page={page}&limit={limit} | GET | 리뷰 목록 페이징 |
Resource 생성하기
새로운 게시물을 생성합니다.
fetch("https://koreandummyjson.site/api/posts", {
method: "POST",
body: JSON.stringify({
"title": "테스트 글",
"content": "테스트 글 입니다.",
"imgUrl": "https://picsum.photos/id/1/300/300"
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 Resources를 제공합니다. Resource body값은 각 Resource별 Docs를 참고해주세요.
Endpoint | Method | Action |
---|---|---|
/users | POST | 유저 생성 |
/todos | POST | 할 일 생성 |
/posts | POST | 게시물 생성 |
/comments | POST | 댓글 생성 |
/books | POST | 책 생성 |
/reviews | POST | 리뷰 생성 |
Resource 전체 수정하기
id가 1인 게시물 전체를 수정합니다.
fetch("https://koreandummyjson.site/api/posts/1", {
method: "PUT",
body: JSON.stringify({
"title": "테스트 글",
"content": "테스트 글 입니다.",
"imgUrl": "https://picsum.photos/id/2/300/300"
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 Resources를 제공합니다. Resource body값은 각 Resource별 Docs를 참고해주세요.
Endpoint | Method | Action |
---|---|---|
/users/:id | PUT | 유저 수정 |
/todos/:id | PUT | 할 일 수정 |
/posts/:id | PUT | 게시물 수정 |
/comments/:id | PUT | 댓글 수정 |
/books/:id | PUT | 책 수정 |
/reviews/:id | PUT | 리뷰 수정 |
Resource 일부 수정하기
id가 1인 게시물을 일부를 수정합니다.
fetch("https://koreandummyjson.site/api/posts/1", {
method: "PATCH",
body: JSON.stringify({
"title": "테스트 글"
}),
headers: {
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 Resources를 제공합니다. Resource body값은 각 Resource별 Docs를 참고해주세요.
Endpoint | Method | Action |
---|---|---|
/users/:id | PATCH | 유저 수정 |
/todos/:id | PATCH | 할 일 수정 |
/posts/:id | PATCH | 게시물 수정 |
/comments/:id | PATCH | 댓글 수정 |
/books/:id | PATCH | 책 수정 |
/reviews/:id | PATCH | 리뷰 수정 |
Resource 삭제하기
id가 1인 게시물 삭제합니다.
fetch("https://koreandummyjson.site/api/posts/1", {
method: "DELETE"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 Resources를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users/:id | DELETE | 유저 삭제 |
/todos/:id | DELETE | 할 일 삭제 |
/posts/:id | DELETE | 게시물 삭제 |
/comments/:id | DELETE | 댓글 삭제 |
/books/:id | DELETE | 책 삭제 |
/reviews/:id | DELETE | 리뷰 삭제 |
Resource 필터링하기
userId가 1번인 유저가 작성한 게시물 목록을 필터링합니다.
fetch("https://koreandummyjson.site/api/posts/?userId=1")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 필터링 Resources를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/todos?userId={userId} | GET | 유저별 할 일 목록 조회 |
/posts?userId={userId} | GET | 유저별 게시물 목록 조회 |
/comments?userId={userId} | GET | 유저별 댓글 목록 조회 |
/reviews?userId={userId} | GET | 유저별 리뷰 조회 |
/reviews?bookId={bookId} | GET | 책별 리뷰 조회 |
하위 중첩 Resource 조회하기
id가 1번인 게시물의 하위 resource 댓글 목록을 조회합니다.
fetch("https://koreandummyjson.site/api/posts/1/comments")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
{}
이 외 아래와 같은 하위 중첩 Resources를 제공합니다.
Endpoint | Method | Action |
---|---|---|
/users/:id/todos | GET | 유저별 할 일 목록 조회 |
/users/:id/posts | GET | 유저별 게시물 목록 조회 |
/users/:id/comments | GET | 유저별 댓글 목록 조회 |
/users/:id/books | GET | 유저별 책 목록 조회 |
/users/:id/reviews | GET | 유저별 리뷰 목록 조회 |
korean-dummy-json-fetcher로 빠르게 시작하기
korean-dummy-json-fetcher는 한국어 더미 데이터를 직접 비동기 API 호출 작업 없이 쉽고 빠르게 사용할 수 있는 라이브러리입니다.
아래와 같이 설치하거나 CDN으로도 바로 사용할 수 있습니다.
npm
npm install korean-dummy-json-fetcher
yarn
yarn add korean-dummy-json-fetcher
pnpm
pnpm add korean-dummy-json-fetcher
CDN 사용
<script src="https://cdn.jsdelivr.net/npm/korean-dummy-json-fetcher@@latest/dist/index.min.js"></script>
<script src="https://unpkg.com/korean-dummy-json-fetcher@@latest/dist/index.min.js"></script>
CDN HTML 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>korean-dummy-json-fetcher CDN 예제</title>
<script src="https://cdn.jsdelivr.net/npm/korean-dummy-json-fetcher@@latest/dist/index.min.js"></script>
</head>
<body>
<script>
// koreanDummyJsonFetcher에서 함수 사용
document.body.innerHTML = '<p>Loading...</p>';
window.koreanDummyJsonFetcher.getUsers().then(users => {
document.body.innerHTML = '<pre>' + JSON.stringify(users, null, 2) + '</pre>';
}).catch((error)=> {
console.log(error);
});
</script>
</body>
</html>
간단 사용 예시 (ESM/Node)
import { getUsers } from "korean-dummy-json-fetcher";
async function fetchUsers() {
const users = await getUsers();
console.log(users);
}
fetchUsers();
더 자세한 사용법은 공식 npm 문서를 참고해주세요.