Frontend/ReactJS

json-server 를 이용한 테스트용 api 서버 구성

findmypiece 2021. 3. 3. 13:25
728x90

json-server는 간단하게 REST API서버를 구축해주는 라이브러리이다.
상용서비스 용도는 아니고 테스트 용도로 사용하기에 적합하다.
왠지 추후 테스트코드 작성시에도 활용할 수 있을 것 같다.

아래와 같이 json-server 를 설치한다.
nvm 을 사용할 경우 제대로 동작하지 않을 수 있다고 하는데
난 문제없이 잘 되었다.
혹시 잘 안된다면 npm i -g json-server 로 설치하자.

yarn global add json-server

src 디렉토리 하위에 특정 디렉토리를 생성한다.
여기에서는 fake-server 라는 디렉토리를 생성한다.
디렉토리 하위에 todosRest.json 파일을 생성하고
아래와 같이 입력한다.

{
  "todos": [
    {
      "id": 1,
      "text": "리덕스 기초 배우기",
      "done": true
    },
    {
      "id": 2,
      "text": "리액트와 리덕스 사용하기",
      "done": false
    }
  ]
}

여기에서 todos 이 곧 RestApi의 endpoint 가 되고
빈배열을 선언해도 되고 위와 같이 객체리터럴 배열을 선언해서
초기 데이터를 만들어 놓을 수도 있다.

주의할 점은 초기 데이터를 추가해놓을 때
각 객체리터럴에는 반드시 id 속성키가 존재해야 한다.
하지만 그 값이 위와 같이 꼭 중복되지 않는 숫자타입일 필요는 없다.

이제 fake-server 디렉토리에서 아래 명령어로 서버를 실행한다.

json-server --watch todosRest.json --port 3001

테스트는 intellij 의 .http 파일을 활용한다.
fake-server 디렉토리 하위에 todosRest.http 파일을 생성해서
아래와 같이 입력한다.

### id는 자동할당 된다.
POST http://localhost:3001/todos
Content-Type: application/json

{
  "text": "test",
  "done": false
}

###
GET http://localhost:3001/todos

### _sort, _order 파라미터를 통해 정렬된 데이터를 읽어올 수 있다.
GET http://localhost:3001/todos?_sort=id&_order=DESC

###
GET http://localhost:3001/todos?id=1

### >= 연산자는 _gte= 를 활용한다.
GET http://localhost:3001/todos?id_gte=2

### <= 연산자는 _lte= 를 활용한다.
GET http://localhost:3001/todos?id_lte=2

### != 연산자는 _ne= 를 활용한다.
GET http://localhost:3001/todos?id_ne=2

### 읽어올 데이터 제한은 _limit 파라미터를 지정하면 된다.
GET http://localhost:3001/todos?_limit=2

###
PATCH http://localhost:3001/todos/4
Content-Type: application/json

{
  "done": true
}

###
PUT http://localhost:3001/todos/4
Content-Type: application/json

{
  "done": true
}

###
DELETE http://localhost:3001/todos/4

이제 아래와 같이 각 요청을 실행해볼 수 있다.
PUT, POST, PATCH, DELETE 요청을 각각 실행해보면

각 요청에 대한 응답결과를 확인할 수 있고
todosRest.json 파일의 내용이 변화하는 걸 볼 수 있다.

728x90

'Frontend > ReactJS' 카테고리의 다른 글

컴포넌트 코드 스플리팅  (0) 2021.03.04
코드 스플리팅(spliting)  (0) 2021.03.03
리액트 프로젝트 디렉토리 구조  (0) 2021.03.03
mac+intellij 에서 리액트 시작하기...  (0) 2021.03.03
컴포넌트 성능 최적화  (0) 2021.03.03