Glitch를 이용해서 json-server 생성하기

Glitch란?

Glitch 소개

글리치란 개발자들이 웹 앱을 쉽게 만들고 호스팅 할 수 있도록 도와주는 서비스이다. 특히 빠르게 프로토타입을 만들고 실험해볼 수 있는 환경을 제공해준다는 장점이 있다.

 

단순히 json 형식을 반환하는 데이터를 json-server로 가동 중이었다면 이것을 무료 요금제로도 서버를 대신 호스팅해준다.

 

작업 소요시간은 10분 내외로 간단하다. 이 방법에서는 깃허브 계정이 필요하다.

 

Glitch 요금제

무료 (스타터)

• 프로젝트와 코드는 기본 제공
• 5분 후 절전모드 전환되는 풀스택 앱 제공
• 24시간 작동되는 무제한의 정적 사이트 제공
• GitHub import 및 export, Prettier 지원

월 8달러 (프로) (연 결제 옵션 있음)

• 비공개 프로젝트로 더 많은 제어 권한 부여
• 더 빠른 부스트앱 제공
• 모든 앱에 대한 액세스 제어
• 24시간 작동되는 5개의 풀스택 앱 제공

json 서버 만드는 방법

1. Glitch 회원가입

2. 바탕화면 등에 임의의 폴더 생성

3. 해당 폴더를 VSCode 등 에디터로 열기

직접 폴더로 들어가서 VSCode로 열어도 되고 터미널에서 명령어로 해도 된다. 취향껏 한다.

터미널 명령어는 아래와 같다.

// 1. 방금 만든 폴더로 이동
cd 방금만든폴더명

// 2. package.json 파일 생성
npm init -y

// 3. VSCode로 폴더 열기
code .

 

4. server.js 파일 생성 (jsx 아님)

// 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);
server.listen(3000, () => {
  console.log("JSON Server is running");
});

위 내용을 파일에 붙여 넣는다.

 

5. db.json 파일 생성

{
    "expenses": [
      {
        "id": "9aba6d72-5ee7-4f02-a4d4-e8bbff9ded4b",
        "month": 1,
        "date": "2024-01-17",
        "item": "식비",
        "amount": 21000,
        "description": "대광참치g",
        "createdBy": "가을"
      },
      {
        "id": "b82b213e-8164-4c89-94b0-7246cdcfc4f9",
        "month": 1,
        "date": "2024-01-21",
        "item": "식비",
        "amount": 412000,
        "description": "BBQ",
        "createdBy": "Me"
      }
    ]
  }

위 내용은 실제로 json 서버에 업로드 할 데이터이다. 예제에서는 expenses가 RESTful한 엔드포인트가 된다.

 

6. package.json 파일 설정 변경

아래 내용을 각 프로퍼티에 맞게 위치 시킨다.

{
	"scripts": {
    "start": "node server.js"
  },
	"devDependencies": {
    "json-server": "^0.17.4"
  }
}

 

7. JSON 서버용 원격 저장소 생성

 

echo "# react-homework-json-server-0614-" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Captain-Kim/react-homework-json-server-0614-.git
git push -u origin main

원격 저장소는 public으로 생성한다. private도 가능하지만 이번엔 프로토타입으로 테스트 목적이기에 추가 설정을 하지 않기 위해 공개 리포지로 작업한다.

 

원격 저장소를 생성하면 깃허브에서 셋업을 도와주는 코드 스니펫 두 개의 예제를 보여주는데 세 줄 짜리 말고, 더 많은 것을 복사해서 터미널에 붙여 넣는다. 다만 git add readme는 제거하고 . 을 넣어 준다.

 

8. Glitch 회원가입 후 new project import

Glitch에서 깃허브 연동으로 회원가입 후 - 우측 상단 New Project - Import from GitHub - 방금 만든 json server용 리포지토리 주소 입력

 

9. API URL 획득

서버 세팅이 완료되면 우측 상단 Share 버튼 - Live site 항목의 URL 획득

 

10. 내 프로젝트에서 사용하기

 

RESTful한 API 요청 시 baseURL로 저 부분을 넣으면 잘 접근된다.