[React] json-server 사용하기

json-server

빠르고 쉽게 REST API를 구축해준다.

➰ REST API : URI 주소와 메서드로 CRUD(Create, Read, Update, Delete) 요청을 하는 것

 

가짜 API 서버 열기

먼저 프로젝트 디렉터리에 (src 디렉터리 밖에) data.json 파일을 작성한다.

{
    "days": [
        { "id":1 , "day":1 },
        { "id":2 , "day":2 },
        { "id":3 , "day":3 }
    ],
    "words": [
        {
            "id": 1,
            "day": 1,
            "eng": "book",
            "kor": "책",
            "isDone": false
        },
        {
            "id": 2,
            "day": 1,
            "eng": "car",
            "kor": "자동차",
            "isDone": false
        },
        {
            "id": 3,
            "day": 2,
            "eng": "pen",
            "kor": "펜",
            "isDone": true
        },
        ...
    ]

}

 

json-server를 설치한다.

npm install -g json-server
json-server --watch ./src/db/data.json --port 3001

 

json-server가 설치되면 아래와 같이 출력된다.

\{^_^}/ hi!

  Loading ./src/db/data.json
  Done

  Resources
  http://localhost:3001/days
  http://localhost:3001/words

  Home
  http://localhost:3001

그러면 우리의 가짜 API 서버가 3001 포트로 열리게 된다.

• http://localhost:3001/days
• http://localhost:3001/days/1

✅ 데이터가 json 형태로 출력된다.

 

fetch를 사용하여 API 요청하기

useEffect(() => {
        fetch(`http://localhost:3001/words?day=${day}`)
        .then(res => {
            return res.json();
        })
        .then(data => {
            setWords(data);
        })
    }, [day])

---

🚀 참고

• React JS #11 json-server, REST API, 코딩앙마
• React JS #12 useEffect, fetch()로 API 호출, 코딩앙마
• 벨로퍼트와 함께하는 모던 리액트 - 8. json-sever
• json-sever (1) json-sever 사용하기

 

➰ 더 공부할 것

• useState(), useEffect() 복습