Front-end

[library] json-server

ssooyeon 2024. 4. 12. 12:40

사용 이유

서합 이후 프론트엔드 과제를 하면서 임시 json 데이터를 불러오기 위해 API를 만들어야했다.

 

서버에 연결해서 하는 방법도 있지만 현재는 임시 json 데이터를 두는 거라고 생각하였기 때문에 라이브러리 중 json-server를 활용하게 되었다. 

 

기본 설정

asset/db에 data.json이라는 파일을 만들고

{
    "numbers": [
        {
            "id": 1,
            "number": 1
        },
        {
            "id": 2,
            "number": 2
        },
        {
            "id": 3,
            "number": 3
        },
        {
            "id": 4,
            "number": 4
        }
    ]
}

 

json형태의 데이터를 넣어둔다.

 

라이브러리 설치

 

npm install -g json-server

sudo npm install -g json-server

설정

json-server --watch (경로) --port (포트번호)

ex. json-server --watch ./asset/db/data.json --port 3001

./asset/db/data.json으로 경로를 설정한 다음 포트는 3001번 포트로 지정해준다.

 

이러면 성공!

 

결과

http://localhost:3001/numbers 링크로 접속하면 임시 json API가 생성되었다.