[01] JSON server로 Mock data서버 실행하여 React Query로 호출

JSON server 로 Mock data서버 실행하여 React Query로 호출하기 - 01

 

[01] JSON server 세팅

1. Mock 데이터 파일 생성

2. json-server 설치

3. 실행 script 추가

4. 서버 실행

 

[02] React Query를 사용하여 데이터 호출

5. axios 설치

6. React Query 설치

7. <QueryClientProvider> 추가

8.  데이터 호출

 

---

[01] JSON server 세팅

 

1.  Mock 데이터 파일 생성

 

/mockdata.json

  "memo": [
    {
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    }
    ...
  ],

 

 

 

 

2. json-server 설치

글로벌(-g)로 설치한다. 

npm install -g json-server

 

https://www.npmjs.com/package/json-server

json-server

npm install -g json-server

 

 

 

 

3. 실행 script 추가

/package.json 의 scripts 객체에

 

    "사용할 명령어": "json-server --watch mockdata파일경로 --port 서버로 사용할 포트 번호"

    "start-json-server": "json-server --watch mockdata파일경로 --port 3001"

 

를 추가한다.

  ///package.json
  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "start-json-server": "json-server --watch mockdata.json --port 3001"
  },

 

 

4. 서버 실행

지정한 스크립트 명령으로 호출한다.

npm run start-json-server

 

서버 실행 완료!

 

 

 

다음>

[02] React Query를 사용하여 데이터 호출