[Web 팁] JSON-SERVER 사용법

참고

• https://github.com/typicode/json-server
• https://www.npmjs.com/package/json-server

JSON-SERVER 개요

• 프론트엔트 개발을 할 떄 서버단의 데이터를 가져와서 테스트를 진행해야 하는 경우가 있습니다.
• 하지만, 백엔드쪽 개발이 미완성이라면..데이터를 가져와서 테스트를 진행할 수가 없습니다..
• 하지만, JSON-SERVER 를 이용하면 실무에서 사용하는 실 데이터와 최대한 비슷한 느낌으로 가짜 API 서버를 만들어서 테스트를 진행할 수있습니다.
• 즉, JSON-SERVER 를 이용하여 연습용 서버를 쉽게 구성하여 백엔드쪽이 완성되지 않더라도 프론트엔드 개발에는 문제 없이 개발을 진행할 수 있습니다.

참고로, JSON-SERVER 는 프로덕션에서 사용하기 위해 만들어진 것이 아닙니다. 떄문에 JSON-SERVER 를 이용하여 실제 프로젝트를 개발하면 안됩니다.

JSON-SERVER 사용법

• 그럼 이제 JSON-SERVER 사용하는 방법에 대해서 알아 보도록 하겠습니다.

JSON-SERVER 설치

• 먼저 JSON-SERVER 설치를 진행합니다.

npm install -g json-server

• 위 명령어를 통해 json-server 설치를 진행합니다.

db.json 파일 생성

• json-server 설치가 완료 되었으면, db.json 파일 하나를 생성합니다.
• db.json 파일은 루트 디렉터리에서 생성을 해주고, 여기서 db.json 파일은 데이터베이스 역할을 합니다.

{
    "todos": [
        {
            "id": 1,
            "content": "HTML",
            "completed": true
        },
        {
            "id": 2,
            "content": "CSS",
            "completed": false
        },
        {
            "id": 3,
            "content": "Javascript",
            "completed": true
        }
    ],
    "users": [
        {
            "id": 1,
            "name": "Lee",
            "role": "developer"
        },
        {
            "id": 2,
            "name": "Kim",
            "role": "designer"
        }
    ]
}

• db.json 파일의 내용은 위와 같이 테스트 데이터 하나 작성 진행합니다.
• 테스트 내용은 얼마든지 변경되도 무방합니다.

json-server 실행

• 이제 json-server 를 사용하기 위한 사전 준비는 모두 마쳤습니다.
• json-server 를 실행해서, 실제로 URL 주소에서 json 데이터가 보이는지 확인해 보겠습니다.
• json-server 를 실행하는 명령어는 다음과 같습니다.

json-server --watch db.json

• 위 명령어를 실행해서 정상 실행이 되면, 아래와 같이 로그가 출력되는 것을 확인할 수 있습니다.

PS C:\Users\bh.cho\OneDrive\바탕 화면\jsonserver> json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/todos
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

• 앞서, db.json 파일에 todos, users 2개의 데이터를 추가 하였습니다.
• 쉽게 생각해, todos, users 2개의 테이블이 생성되었고 그 내용을 http://localhost:3000/todos, http://localhost:3000/users URL 주소로 생성되는 것입니다.
• 그럼 실제로, 해당 주소로 가서 json 데이터가 정상적으로 나오는지 확인해 보겠습니다.
• URL 주소 접속 결과, 아래와 같이 데이터 조회가 정상적으로 되는 것을 확인할 수 있습니다.

JSON-SERVER 포트 변경하는 방법

• json-server 의 기본 포트는 3000번 입니다.
• 만약 포트를 변경하려면, port 옵션을 추가해주면 됩니다.

json-server --watch db.json --port 5000

• 위와 같이 매변 명령어를 통해 입력하는 것은 번거롭습니다.
• 때문에, package.json 파일의 scripts 를 다음과 같이 수정하여 json-server 를 실행해주면 됩니다.

{
  "name": "json-server-exam",
  "version": "1.0.0",
  "scripts": {
    "start": "json-server --watch db.json"
  },
  "devDependencies": {
    "json-server": "^0.15.0"
  }
}

npm start