Korean Dummy JSON | 한글 더미 데이터 API

🚀 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 사용

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/korean-dummy-json-fetcher@@latest/dist/index.min.js"></script>

unpkg

<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 문서를 참고해주세요.