NextJs 06: npx와 json-server 사용하기

안녕하세요. 각성한 데브키라입니다.  웹 애플리케이션을 개발할 때 백엔드 개발이 완료되기 전에 프론트엔드 개발을 진행해야 하는 경우가 있습니다. 이런 경우, "가짜" 데이터를 제공할 수 있는 간단한 서버가 필요합니다. json-server는 이 목적에 매우 적합한 도구입니다. 이 글에서는 json-server를 사용하여 간단하게 REST API를 구축하는 과정을 안내합니다.

json-server란 무엇인가?

json-server는 JSON 파일을 데이터베이스로 사용하여 가짜 REST API를 생성할 수 있게 해주는 Node.js 라이브러리입니다. 설치가 쉽고 몇 줄의 명령어로 서버를 시작할 수 있습니다.

설치 및 실행

npx를 사용하여 json-server를 설치하지 않고 실행할 수 있습니다. npx는 Node.js를 설치할 때 자동으로 설치되는 패키지 실행 도구입니다. 따라서 다음 명령어를 사용하여 추가 설치 과정 없이 바로 실행할 수 있습니다.

명령어 분석

• npx json-server@0.17.4: json-server의 0.17.4 버전을 실행합니다. 버전을 지정하지 않으면 최신 버전이 실행됩니다.
• --port 9999: 서버가 9999 포트에서 실행되도록 지정합니다. 필요에 따라 포트 번호를 변경할 수 있습니다.
• --watch db.json: db.json 파일의 변경 사항을 감지하고 서버를 자동으로 업데이트합니다. db.json 파일이 이 서버의 데이터베이스 역할을 합니다.

서버실행 명령어)

npx json-server@0.17.4 --port 9999 --watch db.json

json server실행 명령

db.json 파일 생성하기

기본적으로 db.json파일이 생성되지만 필요한 경우 상황에 맞게 수정해서 사용하시면 됩니다.

서버를 실행하기 전에 서버가 사용할 데이터를 담고 있는 db.json 파일을 생성해야 합니다. 예를 들어, 간단한 사용자 정보 API를 생성하려면 db.json 파일을 다음과 같이 구성할 수 있습니다:

{
  "topics": [
    {"id": 1, "title":"블랙핑크", "body":"블랙핑크 good!"},
    {"id": 1, "title":"아이브", "body":"아이브 good!"},
    {"id": 1, "title":"르세라핌", "body":"르세라핌 good!"},
    {"id": 1, "title":"뉴진스", "body":"뉴진스 good!"},
    {"id": 1, "title":"트와이스", "body":"트와이스 good!"},
    {"id": 1, "title":"레드벨벳", "body":"레드벨벳 good!"},
    {"id": 1, "title":"에스파", "body":"에스파 good!"}
  ],  
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

실행 후 서버 테스트하기
명령어를 실행하면 지정된 포트(이 경우 9999)에서 서버가 시작됩니다. 브라우저나 API 테스팅 도구(예: Postman)를 사용하여 http://localhost:9999/users와 같은 URL에 접근하여 데이터를 확인할 수 있습니다.

보시다시피, json-server를 사용하면 가짜 백엔드 서버를 쉽게 구축할 수 있습니다. 백엔드 API가 아직 준비되지 않은 프론트엔드 개발 중에 유용하며, 간단한 CRUD 작업을 테스트하기에도 적합합니다.

아래 명령어로 json서버를 손쉽게 구축할수 있습니다.

서버를 콘솔에서 실행만 해주면 db.json파일이 생성되고 이것을 통해서 json파일을 저장소 처럼 사용할수 있습니다.

npx json-server@0.17.4 --port 9999 --watch db.json

이 글을 통해 json-server를 사용하여 간단하게 REST API를 구축하는 방법을 알아보았습니다. json-server는 프론트엔드 개발 중 백엔드 서버가 준비되지 않은 상황에서 유용하게 사용할 수 있으며, 간단한 데이터 모델링과 API 테스트에 적합합니다. 이 도구를 활용함으로써 개발 프로세스를 보다 빠르고 효율적으로 진행할 수 있습니다.

본문에서 다룬 내용을 실습하며 json-server의 다양한 기능을 직접 탐색해보시기 바랍니다. 추가적인 기능이나 옵션을 사용하여 더 복잡한 API 서버를 구축할 수도 있습니다. 개발 과정에서 발생하는 다양한 시나리오에 맞게 json-server를 유연하게 활용해 보세요.

마지막으로, 이 글이 여러분의 프로젝트에 도움이 되었기를 바랍니다. 개발 과정에서 궁금한 점이나 어려움이 있다면 언제든지 커뮤니티에 질문을 남겨 도움을 받을 수 있습니다. 개발은 혼자가 아니라 함께하는 과정입니다. 서로 지식을 공유하고 협력하며 성장해 나가길 바랍니다. Happy coding!

[ NextJs 시리즈 목차 ]

NextJs 01 : NextJs로 시작하는 웹 개발: 설치부터 브라우저 실행까지
NextJs 02: NextJs프로젝트 불필요한 파일제거
NextJs 03: NextJs서버 배포버전 빌드
NextJs 04: Link태그와 태그의 차이점을 이해하고 라우팅 설정까지
NextJs 05: 넥스트Js에서 정적 자원 사용하기
NextJs 06: npx와 json-server 사용하기
NextJs 07: 서버컴포넌트 vs 클라이언트컴포넌트
NextJs 08: Next.js를 활용한 동적 웹 콘텐츠 글보기 화면 실습
NextJs 09: Next.js 글입력 작성과 캐시처리
NextJs 10: 버튼 컴포넌트를 별도 파일로 분리 후 활성 비활성화 처리
NextJs 11: next.js글수정 useEffect
NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드
NextJs 13: env파일을 활용한 환경변수 설정