Korean Dummy JSON

🚀 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를 제공합니다.

EndpointMethodAction
/users/:idGET유저 조회
/todos/:idGET할 일 조회
/posts/:idGET게시물 조회
/comments/:idGET댓글 조회
/books/:idGET책 조회
/reviews/:idGET리뷰 조회

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를 제공합니다.

EndpointMethodAction
/usersGET유저 목록
/todosGET할 일 목록
/postsGET게시물 목록
/commentsGET댓글 목록
/booksGET책 목록
/reviewsGET리뷰 목록

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를 제공합니다.

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

EndpointMethodAction
/usersPOST유저 생성
/todosPOST할 일 생성
/postsPOST게시물 생성
/commentsPOST댓글 생성
/booksPOST책 생성
/reviewsPOST리뷰 생성

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

EndpointMethodAction
/users/:idPUT유저 수정
/todos/:idPUT할 일 수정
/posts/:idPUT게시물 수정
/comments/:idPUT댓글 수정
/books/:idPUT책 수정
/reviews/:idPUT리뷰 수정

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

EndpointMethodAction
/users/:idPATCH유저 수정
/todos/:idPATCH할 일 수정
/posts/:idPATCH게시물 수정
/comments/:idPATCH댓글 수정
/books/:idPATCH책 수정
/reviews/:idPATCH리뷰 수정

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를 제공합니다.

EndpointMethodAction
/users/:idDELETE유저 삭제
/todos/:idDELETE할 일 삭제
/posts/:idDELETE게시물 삭제
/comments/:idDELETE댓글 삭제
/books/:idDELETE책 삭제
/reviews/:idDELETE리뷰 삭제

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를 제공합니다.

EndpointMethodAction
/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를 제공합니다.

EndpointMethodAction
/users/:id/todosGET유저별 할 일 목록 조회
/users/:id/postsGET유저별 게시물 목록 조회
/users/:id/commentsGET유저별 댓글 목록 조회
/users/:id/booksGET유저별 책 목록 조회
/users/:id/reviewsGET유저별 리뷰 목록 조회

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

© 2024 Korean Dummy JSON. All Rights Reserved.

Post Images from Lorem Picsum