[POB#33] Assignment 9 : 페이워크 기업 과제. json-server로 임시 서버 구현

dongwon·2021년 9월 2일
3

원티드-프리온보딩

목록 보기
24/25
post-thumbnail

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/todosGET으로 요청하면 초기 데이터를 볼 수 있습니다. POST 요청으로 Body에 담아 생성도 가능합니다. 이때 프로젝트 안에 data.json도 함께 바뀌는 것을 볼 수 있습니다.

REST API 제공

json-serverREST 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.jsonscripts를 다음과 같이 수정합니다.
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_URLlocalhost:4000으로 사용해왔습니다. 배포 시에는 자신의 heroku 주소로 변경합니다.

export const BASE_URL = `https://my-app.herokuapp.com/`;
profile
데이원컴퍼니 프론트엔드 개발자입니다.

2개의 댓글

comment-user-thumbnail
2021년 9월 3일

동원님!ㅎㅎ 또 발도장 쿵 찍고갑니당! 과제 잘 하셨는지 궁금했어요!!
궁금한게 그럼 기업에서 제공한 url은 사용 안 하신 건가용?
배포를 heroku로 하신 이유가 있나용?
사실 저는 너무 어려워서 따로 말씀드리고 좀 더 공부하고 완성하기로 했답니다ㅠㅜㅎㅎ
제가 하면서 어려우면 조금 참고하러 올지도 모르겟어용~~😁
이번 포스팅도 잘 봤습니당!! 화이팅!!

1개의 답글