json-server 사용법 간단정리

haley·2022년 8월 31일
8

TIL

목록 보기
1/1

프로젝트를 받으면 프론트엔드와 백엔드가 개발을 시작할텐데, 보통 백엔드 API가 만들어질 때까지 기다려야 한다. 백엔드가 없는 상태에서 프론트엔드는 목데이터 등을 이용해 작업을 하지만, 백엔드 API가 나온후 실제 API를 연결하는 작업이 추가적으로 필요하게 된다. 이렇게 두번 일하는 일을 줄이기 위해 간단히 가짜 API 서버를 만드는 방법이 있다.

json-server를 이용하면 된다.

data 준비

프로젝트 루트 위치( src 폴더 밖)에 json 파일을 만든다.
파일명은 아무거나 상관없다. 나는 db.json 으로 만들었다.
파일 내용은 아래처럼 만들고, 필요에 맞게 수정하면 된다.

//db.json
{
  "token": {
    "access_token": "9k3kljnslkdj_34lk2j34lks09sv",
    "userId": 123
  },
  "test": [
    {
      "id": 1,
      "title": "json-server 편해요",
      "body": "굿"
    },
    {
      "id": 2,
      "title": "백엔드 만들기 귀찮을떈?",
      "body": "json-server를 쓰면 된다"
    }
  ]
}

서버 열기

데이터를 준비했으니 서버를 열어보자.

먼저 json-server를 글로벌로 설치한다.

$ yarn global add json-server

아까 만든 데이터 파일을 기반으로 서버를 연다.

$ json-server ./db.json --port 4000

이런 화면이 뜨면 성공이다!

위의 과정을 잘 따라했다면 Resources에 만들어진 링크를 타고 서버가 잘 돌아가고 있는지 확인할수 있다.
http://localhost:4000/token
http://localhost:4000/test

axios로 API 요청하기

서버를 만들었다면 데이터를 요청할 수 있다.

먼저 axios를 설치해 준다.

$ yarn add axios

그리고 api폴더 내에 test.js 파일을 하나 만든다.

//api/test.js
import axios from "axios";

export const getToken = async () => {
  const response = await axios.get("http://localhost:4000/token");
  return response.data;
};

export const getTest = async () => {
  const response = await axios.get(`http://localhost:4000/test`);
  return response.data;
};

export const getTestById = async (id: number) => {
  const response = await axios.get(`http://localhost:4000/test/${id}`);
  return response.data;
};

이렇게 가짜 API를 사용하면 나중에 실제 API를 연결할때 훨씬 수월하다.

profile
기록장

0개의 댓글