프론트엔드 개발을 위한 더미 서버 구축 <JSON Server Usage>

 

1. 서론

 

프론트엔드 개발을 할 때, 종종 API 서버가 준비되지 않았거나, 빠른 기능 개발과 테스트를 위해 간단한 더미 서버가 필요할 때가 있습니다. 이를 위해 JSON Server는 가장 손쉽게 사용할 수 있는 도구입니다. 이 글에서는 npx를 통해 JSON Server를 실행하는 방법부터 실제 API와의 차이점, 장단점까지 알아보겠습니다.

 

참고로 아래의 예시는 제가 하고있는 프로젝트 의 로그인 로직과 회원가입 UI/UX를 설계 및 개발 한 후, 백엔드의 API (server)가 나오기 전 프론트 자체에서 서버동작을 예비로 구현하며 공부했던 내용입니다.

 

2. JSON Server란?

 

JSON Server는 JSON 파일을 기반으로 RESTful API를 빠르게 구축할 수 있게 해주는 도구입니다.

백엔드 없이도 GET, POST, PUT, DELETE 요청을 처리할 수 있는 가짜 API 서버를 만듭니다.

 

3. JSON Server 설치 및 실행 방법

 

Step 1: JSON 파일 생성

 

프로젝트 루트 디렉토리에 userInfo.json 파일을 생성하고 다음과 같이 데이터를 작성합니다:

{
  "users": [
    { "id": 1, "name": "홍길동", "email": "hong@example.com", "age": 25 },
    { "id": 2, "name": "이몽룡", "email": "lee@example.com", "age": 23 }
  ]
}

 

Step 2: JSON Server 실행

 

터미널을 열어 프로젝트 폴더로 이동 후 아래 명령어를 실행합니다:

 

• --watch: 파일 변경 시 자동으로 서버에 반영합니다.

• --port 3000: API 서버를 포트 3000에서 실행합니다.

npx json-server --watch userInfo.json --port 3000

 

 

출력 예시:

\{^_^}/ hi!

  Loading userInfo.json
  Done

  Resources
  http://localhost:3000/users

브라우저에서 http://localhost:3000/users로 접속하면 JSON 데이터를 확인할 수 있습니다.

 

4. API 요청 테스트

 

1) 모든 사용자 조회 (GET)

 

GET http://localhost:3000/users

 

 

결과:

[
  { "id": 1, "name": "홍길동", "email": "hong@example.com", "age": 25 },
  { "id": 2, "name": "이몽룡", "email": "lee@example.com", "age": 23 }
]

 

 

 

2) 사용자 추가 (POST)

POST http://localhost:3000/users

 

요청 바디:

{ "id": 3, "name": "성춘향", "email": "sung@example.com", "age": 22 }

결과:

{
  "id": 3,
  "name": "성춘향",
  "email": "sung@example.com",
  "age": 22
}

 

 

3) 특정 사용자 삭제 (DELETE)

DELETE http://localhost:3000/users/2

결과: 204 No Content

 

 

5. JSON Server의 장점과 단점

 

장점

1. 빠른 실행: 몇 초 안에 API 서버를 실행할 수 있습니다.

2. RESTful API 자동 생성: GET, POST, PUT, DELETE를 자동으로 지원합니다.

3. 데이터 변경 실시간 반영: JSON 파일을 수정하면 실시간으로 반영됩니다.

4. 간단한 설정: 복잡한 백엔드 설정 없이 JSON 파일 하나로 테스트할 수 있습니다.

 

단점

1. 복잡한 비즈니스 로직 불가능: JSON Server는 단순한 CRUD API만 지원합니다.

2. 제한된 보안 기능: 인증이나 권한 설정 등 고급 기능이 제공되지 않습니다.

3. 대규모 데이터 지원 부족: 대규모 데이터베이스나 쿼리 기능이 없습니다.

 

6. JSON Server와 실제 API의 차이점

간략하게 아래의 표를 활용해서 정리하겠습니다.

 

7. 마무리

 

JSON Server는 API 개발 전, 빠른 테스트 환경을 구성할 수 있는 훌륭한 도구입니다.

실제 API와는 차이가 있지만, 단순한 CRUD 요청만으로도 많은 개발 상황을 커버할 수 있습니다. 특히 프론트엔드 개발자에게는 더미 서버로서 필수적인 도구입니다.

 

개인적인 경험으론..

개발 중에는 JSON Server를 사용하고, 실제 배포 시 실제 API로 변경하여 프론트엔드와 백엔드를 연동하면 개발 시간을 단축할 수 있습니다.