가짜 API 서버 열기

먼저 프로젝트 디렉터리에 (src 디렉터리 밖에) data.json 이라는 파일을 다음과 같이 작성하세요.

data.json

{
  "posts": [
    {
      "id": 1,
      "title": "리덕스 미들웨어를 배워봅시다",
      "body": "리덕스 미들웨어를 직접 만들어보면 이해하기 쉽죠."
    },
    {
      "id": 2,
      "title": "redux-thunk를 사용해봅시다",
      "body": "redux-thunk를 사용해서 비동기 작업을 처리해봅시다!"
    },
    {
      "id": 3,
      "title": "redux-saga도 사용해봅시다",
      "body": "나중엔 redux-saga를 사용해서 비동기 작업을 처리하는 방법도 배워볼 거예요."
    }
  ]
}

이 파일을 기반으로 서버를 열어보겠습니다.

$ npx json-server ./data.json --port 4000

또는 json-server 를 글로벌로 설치해서 다음과 같이 사용 할 수도 있습니다.

$ yarn global add json-server
$ json-server ./data.json --port 4000

api/posts.js

import axios from 'axios';

export const getPosts = async () => {
  const response = await axios.get('<http://localhost:4000/posts>');
  return response.data;
};

export const getPostById = async id => {
  const response = await axios.get(`http://localhost:4000/posts/${id}`);
  return response.data;
};