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
파일의 내용이 변화하는 걸 볼 수 있다.

'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 |