[API Mocking] API Mocking Server 구축 (2) - JSON Server

목차

---

1. API Mocking 정의

2. JSON Server
3. 사용 방법

4. 테스트

 

 

 

 

 

 

1. API Mocking 정의

---

API Mocking 정의는 1편에 작성해두었으니 참고하길 바란다.

 

https://aeeazip.tistory.com/55

[API Mocking] API Mocking Server 구축 (1) - MSW

 

 

 

 

 

2. JSON Server

---

JSON Server를 활용한 Mocking 서버 구축은 Node.js와 npm이 설치된 ‘React’ 개발 환경에서 주로 사용한다.

JSON 파일을 DB로 사용하며, 해당 데이터를 기준으로 RESTful API를 자동으로 생성하고

데이터의 추가, 수정, 삭제가 이루어질 때마다 db.json 파일을 자동으로 갱신한다.

 

실행을 위해 준비할 것이 많지 않고 자동으로 API를 생성해 간단하고 빠르게 테스트를 할 수 있다.

또한 API 명세서에 변경이 생겨도 데이터 파일의 구조(db.json)만 변경하면 되기 때문에 MSW에 비해 유지보수성이 좋다.

 

하지만 자동 생성 방식으로 인해

request method, url, request parameter, response data를 설정할 수 없다는 치명적인 단점이 있어 주로 간단한 개발 용도로만 사용한다.

 

 

 

 

 

3. 사용 방법

---

⚠️ node, npm은 설치되어 있다는 가정 하에 시작한다.

 

먼저 JSON Server를 설치한다.

 

$ npm install -g json-server   # JSON-Server 설치

 

 

다음으로 데이터베이스로 활용할 db.json을 생성해준다.

이때 파일명은 상관없으나, 반드시 .json 확장자를 사용해야 한다.

 

// db.json

{
  "user": [
    {
      "id": 1,
      "name": "test",
      "gender": "M",
      "email": "test@test.com"
    },
    {
      "id": 2,
      "name": "test2",
      "gender": "F",
      "email": "test2@test.com"
    }
  ]
}

 

 

JSON Server 방식은 실제 DB조회와 다르게 테이블간 join이 불가하므로 테이블 기준이 아닌 API 명세서의 response data를 기준으로 작성되어야 한다.

 

 

JSON Server는 db.json 파일을 활용해 일정한 규칙에 따라 자동으로 RESTFul API를 생성해준다.

기본 url은 {JSON-server가 실행되는 serverUrl}/{기준이 되는 JSON파일의 table명} 이다. 

(ex: http://localhost:3001/user) 

 

 

자세한 API 생성 규칙은 공식 문서를 참고하길 바란다. 페이징 처리나 정렬 기능도 지원이 되고 있다.

https://www.npmjs.com/package/json-server?activeTab=readme

json-server

 

 

밑의 표는 위에서 db.json에 정의한 내용을 바탕으로 자동 생성된 API의 일부이다.

 

---

Type	Method	URL	Request Body
Create	POST	http://localhost:3001/user	등록하고자 하는 user 정보
Read	GET	http://localhost:3001/user/{조회하고자 하는 id} http://localhost:30001/user?name={조회하고자 하는 name}
Read	GET	http://localhost:3001/user
Update	PUT	http://localhost:3001/user/{수정하고자 하는 id}	수정하고자 하는 user 정보
Delete	DELETE	http://localhost:3001/{삭제하고자 하는 id}

---

 

 

다음으로 실제 JSON Server를 구동하기 위한 서버 파일 정의가 필요하다.

 

// server.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const path = require('path')
const router = jsonServer.router(path.join(__dirname, 'db.json'))
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)

server.use(router)

let port = 3001
server.listen(port, () => {
  console.log(`JSON Server is running, port(${port})`)
})

 

 

일반적으로 프론트에서 3000번 포트를 사용하기 때문에, 3000번이 아닌 3001번 포트로 JSON Server를 실행시켜준다. 

단, 이때 "db.json과 server.js는 프로젝트에서 동일한 디렉토리 밑에 위치"하고 있어야 한다.

 

디렉토리 구조

 

이제 JSON Server 실행을 위한 모든 준비를 마쳤기 때문에 서버를 실행시키면 Mocking 을 테스트해볼 수 있다.

 

$ node sevrer.js

 

server.js가 위치한 폴더로 경로를 이동해서 위의 명령어를 실행해야하며, 정상적으로 실행 시 JSON Server가 http://localhost:3001에서 동작한다. 이때 3001번은 server.js에서 지정해준 포트 번호이다.

 

서버를 실행시키면 JSON Server가 running 중이라는 로그를 확인할 수 있으며, 자동 생성된 API로 요청을 보냈을 때 아래와 같이 JSON Server가 응답을 보내준다.

 

 

API 요청 예시 : [GET] 단순 조회, 리스트 조회