🍞 Front-End

[Mock Server] postman 대신 JSON Server 사용해보기

박빵이 2023. 2. 3. 18:32

요청을 많이 한 것 같진 않은데 벌써 1000회를 넘어 아래 오류 코드를 보면 유료 계정으로 전환해야 되는 상황이다. 유료 계정으로 전환하는 건 무리라는 생각이 들어 postman 대신, 다른 가짜 서버 만드는 방식을 찾아봤다.

Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit.

그 결과, JSON Server라는 것을 알게 됐고, 가짜 서버를 만들어보자! 

 

📌 JSON Server

 json 파일을 사용해서 가짜 REST API 서버를 생성할 수 있는 도구이다. 이것은 실제 서버가 아닌 개발용 서버로 사용하는 것이 좋으며, 만약 실제 프로젝트를 개발하기 위해서는 실제 백엔드 서버를 구축해야 한다. 

 

1️⃣ 설치

npm 또는 yarn을 사용해서 전역으로 설치해준다. 

npm i -g json-server
 
yarn global add json-server


2️⃣ Dummy Data 만들기 

가짜 서버를 만들기 위해서는 json 형식의 데이터가 필요하다. 
먼저 category.json 이란 파일을 만들어보자! 

data/category.json

{
	"categories" : [
		{
			"category_id" : 1,
			"category_name" : "공지사항",
			"category_boards" : 123456
		},
		{
			"category_id" : 2,
			"category_name" : "질문 게시판",
			"category_boards" : 123
		},
        {
			"category_id" : 3,
			"category_name" : "자유 게시판",
			"category_boards" : 123
		},
        {
			"category_id" : 4,
			"category_name" : "버그가 있어요!",
			"category_boards" : 123
		},
        {
			"category_id" : 5,
			"category_name" : "체인지 로그",
			"category_boards" : 123
		}
	]
}

 

3️⃣  json-server 로 가짜 서버 실행하기

dummy.json을 작성했으면 이젠 json-server로 실행해 보자! 

(포트 번호는 맘대로 해도 상관은 없다. 되도록 사용하지 않는 포트 번호로 사용하기)

 json-server --watch data/dummy.json --port 8001

--watch 옵션은 생략 가능하다. 
--port 다음에는 port 번호를 적어준다.

 

4️⃣결과 확인하기 

 json-server를 실행하면 아래와 같은 결과가 뜬다. 

 

5️⃣ 가짜 API 서버 (port: 8001) 열기

http://localhost:8001/categories 

들어가서 확인해보기