TIL: JSON Server와 Glitch를 이용해 서버 열기

JSON Server란?

• JSON Server는 JSON 파일을 기반으로 빠르게 모의 REST API 서버를 구축할 수 있는 도구입니다.
• 로컬 개발 환경에서 간단한 API를 테스트할 때 유용합니다.

Glitch란?

• Glitch는 웹 애플리케이션을 쉽게 만들고 호스팅할 수 있는 플랫폼입니다.
• 실시간으로 코드를 편집하고 결과를 바로 확인할 수 있어 개발 과정이 편리합니다.

JSON Server 설치 및 설정

1. Node.js 설치: JSON Server를 사용하려면 먼저 Node.js가 필요합니다.
2. JSON Server 설치: 터미널에서 다음 명령어를 사용해 JSON Server를 설치합니다.

   npm install -g json-server

3. db.json 파일 생성: JSON Server가 사용할 데이터를 담은 db.json 파일을 생성합니다.

   {
     "posts": [
       { "id": 1, "title": "Hello World", "author": "John Doe" }
     ],
     "comments": [
       { "id": 1, "body": "Nice post!", "postId": 1 }
     ]
   }

4. 서버 시작: 터미널에서 다음 명령어를 실행해 JSON Server를 시작합니다.

   json-server --watch db.json

   기본적으로 서버는 http://localhost:3000에서 실행됩니다.

Glitch에서 서버 열기

1. Glitch 로그인: Glitch에 접속해 계정을 생성하거나 로그인합니다.

2. 새 프로젝트 생성: "New Project" 버튼을 클릭하고 "Create a Node App"을 선택합니다.

3. 프로젝트 설정:

   • 생성된 프로젝트에서 package.json 파일을 열어 JSON Server를 추가합니다.

     "dependencies": {
       "json-server": "^0.16.3"
     }

   • db.json 파일을 프로젝트 루트에 추가합니다.

   • server.js 파일을 생성하고 다음과 같이 설정합니다.

     const jsonServer = require('json-server');
     const server = jsonServer.create();
     const router = jsonServer.router('db.json');
     const middlewares = jsonServer.defaults();
     
     server.use(middlewares);
     server.use(router);
     
     const port = process.env.PORT || 3000;
     server.listen(port, () => {
       console.log('JSON Server is running');
     });

4. 프로젝트 실행: Glitch가 자동으로 프로젝트를 실행하며, URL을 통해 JSON Server에 접근할 수 있습니다.