https://jsonplaceholder.typicode.com/guide/

 

JSONPlaceholder - Guide

Guide Below you'll find examples using Fetch API but you can JSONPlaceholder with any other language. You can copy paste the code in your browser console to quickly test JSONPlaceholder. Getting a resource fetch('https://jsonplaceholder.typicode.com/posts/

jsonplaceholder.typicode.com

 

JSONPlaceholder

JSONPlaceholder는 프론트엔드 개발자들이 비동기 통신(AJAX) 기능을 테스트할 때, 실제 서버를 구축하지 않고도 간편하게 가짜 데이터를 활용할 수 있는 무료 API 서비스입니다. 이 사이트는 기본적인 RESTful API 구조를 제공하며, 가상의 사용자를 비롯해 게시물, 댓글, 사진 등 다양한 리소스를 제공합니다. 이를 통해 개발자들은 서버 응답과 데이터를 처리하는 방법을 학습하고, 자신의 애플리케이션이 올바르게 작동하는지 테스트할 수 있습니다.




테스트를 위해 Ajax를 호출하여 Fake JSON 데이터를 받아올 때 필요한 사이트

- 간단 사용법 
- 위 사이트의 예제는 fetch 만 나와있어서 많이 사용되는 ajax나  axios 코드로 데이터를 받아봄

- 아래 코드를 jsfiddle 의 html 영역에 복사하고 run 버튼을 클릭하여 테스트 할 수 있습니다.
- ajax 나 axios 하나만 남겨 두고 사용하세요
 https://jsfiddle.net/

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

        // JQuery Ajax
        $(function() {                        
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/posts',
                success: function (data) { 
                    document.body.innerHTML = JSON.stringify(data);         
                }
            });
        });

        // axios 사용
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(function (response) {            
                document.body.innerHTML = JSON.stringify(response.data);            
            })
            .catch(function (error) {            
                console.error(error);
            });    

    </script>
</head>
<body id="body"></body>
</html>

 

- 데이터가 영문이지만, 테스트하기는 좋다.
- 위 코드에서 url 값만 변경하여 사용해 보자

설명 URL 결과 data
100개의 포스트 https://jsonplaceholder.typicode.com/posts userid, id, title, body
500개의 코맨트 https://jsonplaceholder.typicode.com/comments postid, id, name, email, body
100개의 앨범 https://jsonplaceholder.typicode.com/albums userid, id, title
5000개의 사진 https://jsonplaceholder.typicode.com/photos albumId, id, title, url, thumbnailUrl
200개의 할일 https://jsonplaceholder.typicode.com/todos userid, id, title,completed
10명의 사용자 https://jsonplaceholder.typicode.com/users id,name,username, address { street,suite,city,zipcode, geo {lat,lng} }

 

 

한글 데이터를 제공해 주는 사이트도 찾아보니 있더라.

..

https://koreanjson.com/

 

Korean JSON

{ Korean JSON } Super simple JSON API in Korean. Request GET, POST, PUT, DELETE actions and get JSON data in Korean back to get the most out of the look and feel of Korean language when prototyping your project. 한국어 데이터를 제공하는 초간

koreanjson.com

 

// JQuery Ajax (GET)
$(function() {                        
    $.ajax({
        url: 'https://koreanjson.com/users',
        success: function (data) { 
            document.body.innerHTML = JSON.stringify(data);         
        }
    });
});

// axios 사용 (POST)
axios.post('https://koreanjson.com/posts')
    .then(function (response) {            
        document.body.innerHTML = JSON.stringify(response.data);            
    })
    .catch(function (error) {            
        console.error(error);
    });

'Web > JS & jQuery' 카테고리의 다른 글

유효성 검사  (1) 2024.09.03
jQuery-Confirm 플러그인  (1) 2024.09.01
String.Format, String.IsNullOrEmpty, String.IsNullOrWhiteSpace  (0) 2024.08.30
JavaScript 에서 StringBuilder 를 사용해 보자  (0) 2024.08.29
jQuery Templates plugin  (1) 2024.08.29

티스토리툴바