JSON 서버를 사용한 가짜 API

이 게시물은 원래 내blog에 게시되었습니다.

개발자로서 우리는 데이터를 가져올 빠른 백엔드를 원합니다. 실제 API 대신 우리는 단지 가지고 놀 수 있는 가짜 데이터를 원할 뿐입니다. 이유가 무엇이든 가짜 API는 개발 중에 유용합니다.

이를 위해 json-server라는 패키지를 사용할 것입니다.

빠른 서버를 설정하고 json-server와 함께 제공되는 몇 가지 멋진 기능을 살펴보겠습니다. 페이지 매김 및 필터링과 같은 더 많은 기능이 포함되어 있지만 가장 많이 사용하는 기능은 다음과 같습니다.

언제나처럼 documentation 을 파헤칠 수 있습니다.

다음은 source 입니다.

기본 서버

먼저 프로젝트에서 package.json 파일을 초기화합니다. . .

mkdir fake-api
cd fake-api
npm init -y

Note: With the -y flag we are going to skip the prompt process.

. . . 그리고 json-server 설치

npm install json-server

데이터가 서버처럼 저장될 db.json 파일을 생성할 것입니다.

{
    "songs": [
        {
            "title": "Africa",
            "band": "Toto",
        },
        {
            "title": "Fkj",
            "band": "Moments",
        }
    ]
}

package.json 파일에서 다음 스크립트를 추가할 것입니다.
여기서 우리가 하는 일은 db.json 파일에서 포트 3001에서 호스팅되는 변경 사항을 감시하는 것뿐입니다.

"json": "json-server --watch db.json --port 3001" 

이제 npm run json를 실행하면 서버가 실행 중입니다.

무작위 데이터 생성

index.js 파일에서 임의의 사용자를 생성할 것입니다.

let names = ['Mary', 'John', 'Mike', 'Paul', 'Anna', 'Chris'];
let ages = [34, 56, 12, 22, 24, 54];

module.exports = () => {
    const data = { users: [] };
    for (let i = 0; i < 10; i++) {
        let randomName = names[Math.floor(Math.random() * names.length)];
        let randomAges = ages[Math.floor(Math.random() * ages.length)];
        data.users.push({ id: i, name: `${randomName}`, age: `${randomAges}` });
    }
    return data;
}

스크립트는 다음과 같습니다.

"db": "json-server --watch index.js --port 3002" 

그리고 다시 npm run db를 실행하면 또 다른 서버가 생깁니다.

맞춤 경로

가짜 API를 구축할 때 엔드포인트가 실제 사례 시나리오를 모방하기를 원하는 경우가 많습니다.
우리는 URL이 다음과 같기를 원할 수 있습니다.

http://localhost:3004/rock/songs
http://localhost:3004/rock/bands
http://localhost:3004/classical/pieces
http://localhost:3004/classical/artists

그래서 우리는 이것을 어떻게 합니까?

우리db.json는 일반적인 JSON 형식을 갖습니다.

{
    "rock_songs": [
        {
            "title": "Africa",
            "band": "Toto"
        },
        {
            "title": "Fkj",
            "band": "Moments"
        }
    ],
    "rock_bands": [
        {
            "name": "Toto"
        },
        {
            "name": "Boston"
        }
    ],
    "classical_pieces": [
        {
            "title": "Prelude in C Major"
        },
        {
            "tilte": "Toccata and fugue in d minor"
        }
    ],
    "classical_artists": [
        {
            "name": "Alexander Scriabin"
        },
        {
            "name": "Johann Sebastian Bach"
        }
    ]
}

그런 다음 다음을 사용하여 routes.json를 생성합니다.

{
    "/": "/",
    "/rock/songs": "/rock_songs",
    "/rock/bands": "/rock_bands",
    "/classical/pieces": "/classical_pieces",
    "/classical/artists": "/classical_artists"
}

왼쪽에는 엔드포인트의 모양이 표시되고 오른쪽에는 db.json 파일의 해당 배열이 표시됩니다.

우리는 스크립트를 조정할 것입니다. . .

"custom:routes": "json-server db.json  --routes routes.json --port 3003"

. . .npm run custom:routes를 실행하면 사용자 지정 끝점을 얻습니다.