[JavaScript] json-server 사용법

dhkim 1월 06, 2025

 

npm package인 "json-server"를 통해 HTTP 'GET/POST/PUT/DELETE' 메소드를 사용하는 예제를 다룹니다.

json-server를 이용하여, BackEnd API 설계 이전에도 유사 요청/응답을 통해 FrontEnd에서 미리 작업할 수 있는 환경을 만들어 둘 수 있습니다.


1. json-server 설치

1
npm install json-server


#실행 스크립트

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



2. db.json 파일생성

루트 경로 하위에 "db.json"으로 실제 데이터를 관리할 파일을 생성합니다.


[예시 데이터]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    "user": [
        {
            "name": "hong",
            "id": "1"
        },
        {
            "id": "2",
            "name": "Austin"
        },
        {
            "id": "3",
            "name": "Bruno"
        }
    ]
}



3. GET

Fetch API를 통해 기본적인 HTTP 메소드를 사용해봅니다.

위 "db.json"에 미리 작성해둔 테스트 데이터를 조회합니다.

  • url : "{json-server 실행경로:포트}/{테이블명}"

[코드]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    // Get 요청
    fetch('http://localhost:3001/user')
    .then(response => 
        response.json()
    )
    .then(data => {
        console.log(data);
    })
    .catch(error => 
        console.error('Error fetching posts:', error)
    );

[결과]



4. POST

"id" 필드는 json-server에서 레코드를 표현하는 PK와 같은 항목입니다.
기재하지 않을 경우, 자채 채번되는 값으로 생성됩니다.
  • url : "{json-server 실행경로:포트}/{테이블명}"
[코드]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    fetch('http://localhost:3001/user', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            id: "4",
            name: 'John 123',
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('POST response data:', data);
    })
    .catch(error => {
        console.error('Error with POST request:', error);
    });

[결과: db.json]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{
  "user": [
    {
      "id": "1",
      "name": "hong"
    },
    {
      "id": "2",
      "name": "Austin"
    },
    {
      "id": "3",
      "name": "Bruno"
    },
    {
      "id": "4",
      "name": "John 123"
    }
  ]
}

⚠️ 주의사항
VSC에서 Live Server로 테스트 환경을 구성한 경우, "db.json"의 POST 요청에 의한 변경점을 Live Serve가 인지하여 페이지가 새로고침 될 수 있습니다.


5. PUT

특정 id를 갖는 데이터를 수정하는 경우
  • url : "{json-server 실행경로:포트}/{테이블명}/{id}"
[코드]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 fetch('http://localhost:3001/user/4', {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: 'John',
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('PUT response data:', data);
    })
    .catch(error => {
        console.error('Error with PUT request:', error);
    });

[결과: db.json]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{
    "user": [
        {
            "id": "1",
            "name": "hong"
        },
        {
            "id": "2",
            "name": "Austin"
        },
        {
            "id": "3",
            "name": "Bruno"
        },
        {
            "id": "4",
            "name": "John"
        }
    ]
}


6. DELETE

특정 id를 갖는 데이터를 삭제하는 경우
  • url : "{json-server 실행경로:포트}/{테이블명}/{id}"
[코드]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    fetch('http://localhost:3001/user/4', {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        console.log('DELETE response data:', data);
    })
    .catch(error => {
        console.error('Error with DELETE request:', error);
    });

[결과: db.json]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    "user": [
        {
            "id": "1",
            "name": "hong"
        },
        {
            "id": "2",
            "name": "Austin"
        },
        {
            "id": "3",
            "name": "Bruno"
        }
    ]
}




0 댓글

최근