Assignment 9: 페이워크 기술 과제 정리 글입니다.
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
도 함께 바뀌는 것을 볼 수 있습니다.
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
의 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을 localhost:4000
으로 사용해왔습니다. 배포 시에는 자신의 heroku 주소로 변경합니다.
export const BASE_URL = `https://my-app.herokuapp.com/`;
동원님!ㅎㅎ 또 발도장 쿵 찍고갑니당! 과제 잘 하셨는지 궁금했어요!!
궁금한게 그럼 기업에서 제공한 url은 사용 안 하신 건가용?
배포를 heroku로 하신 이유가 있나용?
사실 저는 너무 어려워서 따로 말씀드리고 좀 더 공부하고 완성하기로 했답니다ㅠㅜㅎㅎ
제가 하면서 어려우면 조금 참고하러 올지도 모르겟어용~~😁
이번 포스팅도 잘 봤습니당!! 화이팅!!