Assignment 9: 페이워크 기술 과제 정리 글입니다.

json-server 이용해 임시 서버 구현하기

Redux-Saga를 이용해 실제 네트워크 통신을 하기 위해 json-server로 임시 서버를 구현했습니다.

설치 및 사용법

• 설치: yarn add json-server

• 사용할 json 파일 생성: json 파일 생성과 초기 데이터를 생성합니다.

  //src 밑에 data.json 생성
  {
    "todos": []
  }

• 서버 실행 : json-server ./data.json --port 4000

  port를 지정해 주고 서버를 실행시키면 localhost:${port 번호}로 접근할 수 있습니다.

• postman으로 테스트
  postman으로 미리 테스트할 수 있습니다. localhost:4000/todos를 GET으로 요청하면 초기 데이터를 볼 수 있습니다. POST 요청으로 Body에 담아 생성도 가능합니다. 이때 프로젝트 안에 data.json도 함께 바뀌는 것을 볼 수 있습니다.
  

REST API 제공

json-server는 REST API server의 기본적인 기능을 다 가지고 있습니다.
GET, POST뿐만 아니라 DELETE, PATCH, PUT 등 다양한 API를 제공합니다.

// 예시
// BASE_URL : localhost:4000
// END_POINT: todos
const client = axios.create();
client.defaults.baseURL = BASE_URL;

export const getTodosData = () => client.get(`/${END_POINT}`);

export const createTodoData = ({ content, isCheck, createAt }: ITodo) =>
  client.post(`/${END_POINT}`, { content, isCheck, createAt });

export const deleteTodoData = (id: number) =>
  client.delete(`/${END_POINT}/${id}`);

export const completeCheckTodoData = ({ id, isCheck }: ITodo) =>
  client.patch(`/${END_POINT}/${id}`, { isCheck });

배포

heroku를 이용해 json-server와 함께 배포했습니다.

서버 설정

root 폴더 밑 server.ts에 서버 설정 코드를 작성합니다.
주의할 점은 port를 직접 값을 넣어선 안되고 heroku 내부의 port를 설정해야 합니다. ( process.env.PORT )

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./data.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const port = process.env.PORT || 4000;

server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);

server.use(router);

server.listen(port, () => {
  console.log("server is running");
});

package.json 수정

package.json의 scripts를 다음과 같이 수정합니다.
heroku에서 기본적으로 실행하는 명령어인 start에 설정한 서버 실행 코드를 작성합니다.
기존의 start는 start:dev로 변경합니다.
heroku-postbuild를 이용해 배포하기 전 build 단계를 거치게 합니다.

  "scripts": {
    "start": "node server.ts",
    "start:dev": "react-scripts start",
    "build": "react-scripts build",
    "heroku-postbuild": "npm run build"
  },

BASE_URL 변경

로컬 환경에서 BASE_URL을 localhost:4000으로 사용해왔습니다. 배포 시에는 자신의 heroku 주소로 변경합니다.

export const BASE_URL = `https://my-app.herokuapp.com/`;