mock api와 axios로 get, post요청보내기

목표
1. mock api 만들기
2. mockapi에 get으로 데이터 받아오기
3. mockapi에 post로 데이터 추가하기

1.json-server 설치, axios패키지설치

yarn add json-server 
yarn add axios

2.package.json파일과 같은선상으로 db.json파일 생성 후
db.json파일에 데이터 만들기

{
  "til_list": [
    {
      "id": 0,
      "title": "수학",
      "content": "미분과 적분",
      "time": "10시간"
    },
    {
      "id": 1,
      "title": "물리",
      "content": "상대성이론",
      "time": "12시간"
    }
}

3.yarn json-server --watch db.json --port 5001 입력
명령어가 길어서 바꾸고 싶다면
package.json폴더에 가서 명령어를 만들수 있다.

명령어 만드는법

"scripts": {
    "server-start": "json-server --watch db.json --port 5001"
  }

위의 코드로는 server-start라는 이름으로 만들어줬으므로
터미널엔 yarn server-start라고 쳐도 똑같이 작동한다.


4.새 터미널을 생성해서 yarn start해준다.
새로운 터미널에서 하는 이유: 기존 터미널에서 실행한 서버를 끄지 않기 위해서

5.악시오스쓸 파일들에 악시오스 임포트

import axios from 'axios';

6.Home.js에서 axios로 get요청 보내기

function Home() {
	const tilList = useSelector((state)=> state.til.til_list);
    const getTilList = async () => {
   		const res = await axios.get(
      	"http://localhost:5001/til_list");
     	dispatch(update(res.data));
  }

  React.useEffect(() => {
    getTilList();
  }, []);
  ...
  return(
  ...
  )
  }
  export default Home;

7.redux/modules에 있는 til.js에 액션, 액션생성함수, 리듀서 추가

const UPDATE = "todo/UPDATE";

export function update(til_list) {
  return { type: UPDATE, til_list };
}

    case UPDATE: {
      const til_list =  action.til_list
      return {til_list};
  }

8.til추가하는 js에서 axios로 post 보내기

const Write= ()=> {
...
  const addTIL = async () => {
            const til_data = {
              title: title_ref.current.value,
              content: content_ref.current.value,
              time: time_ref.current.value,
            };
        axios.post("http://localhost:5001/til_list", til_data);
        return(
        ...
        )
        }
        export default Write;