json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

아주 짧은 시간 내에 REST API를 구축해주는 API라고 한다.

 

예전에 팀 프로젝트나 개인 프로젝트를 할땐 nodeJS-express로 백서버를 구축했는데, 프로젝트가 아닌 vue와 같은 새로운 프론트엔드 프레임워크를 공부할때는 노드로 백서버를 구축하는 건 배보다 배꼽이 커지는 경우일 것이다. 

또한, 회사에서 새로운 페이지나 기능을 만들어야할 때 백엔드 쪽에서 api를 만들어주기 전까지 아무것도 하지 않는 건 비효율적이다.

이때 필요한 게 이 json-server 라이브러리가 아닐까 싶다. 즉, api 요청이 필요한 프론트엔드 개발 단계에서만 쓰이는 서버라고 보면 된다.

 

설치는 아래와 같이 전역으로 설치해준다.

npm i -g json-server

 

폴더를 하나 만들어서 db.json 파일을 생성해준다.

저장하고자 하는 데이터를 자유롭게 넣어준다.

{
    "todos" : [
        { 
            "id" : 1,
            "content": "go home"
        }
    ]
}

해당 폴더 터미널을 켜고 아래 명령어로 실행시켜준다.

port 넘버는 3000이 기본이고 --port 옵션을 통해 다른 port 넘버로 바꿔줄 수 있다. 

json-server --watch db.json --port 3000

 

아래와 같이 임시 서버가 실행된다!

각종 get/post/delete/patch/put request를 보낼 수 있다.

 

아래와 같이 pagination 기능도 가능하다! 

  const getTodos = async (page = currentPage.value) => {
      currentPage.value = page;
      try {
        const res = await axios.get(`http://localhost:3000/todos?_page=${page}&_limit=${limit}`);
        numberOfTodos.value = res.headers['x-total-count'];
        todos.value = res.data;
      } catch (err) {
        console.log(err);
        error.value = 'Something went wrong';
      }
    };

https://www.npmjs.com/package/json-server