React로 커머스 사이트 만들기 (2): REST API & json-server

GitHub - jinmidnight01/powersell_frontend

본 내용의 코드는 전부 위 링크에 있으니 참고바랍니다

 

---

본 사이트는 외부 서버에서 불러온 데이터를 활용할 것이기에 REST API에 대한 이해가 필수다

 

Client가 request를 보내면 Server가 JSON 형태로 response를 보내주는 것이다

HTTP Method에는 GET, POST, PUT 등 다양한 방식들이 있다

React는 Client 측에서 request를 보내는 역할을 한다

 

---

로컬에서 React를 개발할 때 서버 측의 API가 개발되어 있지 않은 상황이면 데이터를 불러올 수 없다

이를 대비해 가상 서버(json-server) 라이브러리를 활용하면 문제상황을 해결할 수 있다

Host 주소를 제외한 뒷부분의 API 주소는 유지한채 데이터가 잘 전달되고 불려오는지 확인할 수 있다

 

가상서버를 활용하는 방법은 다음과 같다

 

1. REST API 문서 작성

- 프론트/백엔드 개발자들 사이에 어떤 API URL로 어떤 데이터를 주고 받을지 문서 작성

- 아래 예시는 상품 주문에 관한 REST API 내용: POST API

 

 

2. 가상 서버(json-server) 설치

# json-server 설치
npm install json-server

 

3. src 폴더에 hostURL.js 생성

-  hostURL.js에 가상 서버 host 주소 입력 (실제 서버 호스트 주소가 생기면 해당 주소로 대체)

- 여러 page에서 데이터를 주고 받을 때 활용할 예정

// hostURL.js

// 가상 서버(json-server) 호스트 주소
const hostURL = "http://localhost:8080"

// 실제 서버 호스트 주소
// const hostURL = "https://be2.cheapat9.com";

export default hostURL;

 

4. src 폴더에 routes.json 생성

- REST API 문서에 의거하여 routes.json에 host URL 뒤에 붙는 API 주소 작성

- key는 실제 host URL 뒤에 붙는 API 주소이고, value는 json-server의 key가 될 내용

- json-server는 기호 '/'를 인식하지 못하므로, 기호 '_'로 작성

 

routes.json

 

5. src 폴더에 db.json 생성

- REST API 문서에 의거하여 db.json에 가상 db 작성

- key는 routes.json 내용 중 value에 해당하는 부분이고, value는 POST된 데이터, GET할 데이터 등 각종 데이터

// 주문 정보 저장 (POST API) 시에 아래 예시와 같이 데이터가 업로드됨
{
...
  "api_orders": [
      {
        "itemId": 1,
        "count": 1,
        "name": "박진효",
        "number": "01000000000",
        "zipcode": "11111",
        "address": "서울 마포구 서강로 100길 100-1",
        "dongho": "100호",
        "pw": "1234",
        "id": 1
      }
    ],
...
}

 

6. 관련 js 파일에 request 코드 작성

// 주문 정보 저장 (POST API) 시에 POST 요청 코드 예시
import axios from "axios";
import hostURL from "../hostURL";
...
axios
  .post(`${hostURL}/api/orders`, inputs)
  .then((response) => {
    const successData = response.data;
    navigate("/ordersuccess", {
      state: { successData: successData, pw: pw },
    });
  })
  .catch((error) => {
    if (error.response && error.response.status === 400) {
      navigate("/orderfail");
    } else {
      console.log(error);
    }
  });
...

 

7. package.json에 가상 서버 run 명령어 설정

- 매번 긴 명령어를 입력하기 번거롭기에 package.json에 가상 서버를 키는 간단한 명령어 설정

- 터미널을 split하여 리액트 서버와 가상 서버 동시에 켜야 작동

- (이전) 가상 서버 run 명령어: npm run json-server --watch [db json 파일] --port [임의의 포트] --routes [route json 파일]

- (이후) 가상 서버 run 명령어: npm run server

// package.json
{
...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    // 명령어 server 설정
    "server": "json-server --watch db.json --port 8080 --routes routes.json"
  },
...
}