TIL : json-server 환경 구축하고 axios를 이용하여 요청하기

 json-server 

 

나는   프론트엔드 개발자이고  , 백엔드 쪽  DB 와 서버는  아직 구축 안되었다고 가정하자. 프론트는  다 구축되었다. 

그럴 때  나는  프론트단에서  패키지 하나만 설치하면   임시  데이터를 제공하는  서버를 설치한다. 그것이 바로 이 녀석

이다.

 

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

json-server

 

(1)  패키지 설치  

npm i json-server  # i : install 명령어이다.

 

---

 

(2) json-server  환경 구축하기

 

db.json 파일을   리액트 프로젝트의  루트 디렉토리에 추가해주자. 그리고  나는  다음과  같이  구조를  작성했다.

 

루트 디렉토리(리액트 프로젝트 최상위 디렉토리 ) 에 이렇게 추가

db.json 파일

// db.json

{
  "products": [
    { "id": 0, "name": "상품1", "price": 2000, "count": 0 },
    { "id": 1, "name": "상품2", "price": 2100, "count": 0 },
    { "id": 2, "name": "상품3", "price": 2200, "count": 0 }
  ]
}

 

json-server도  가상의  백엔드 api 서버이기 때문에..... 다른 포트에서 서버를 열어야 합니다.

vscode 터미널 열고  다음과 같이 실행합시다.

 

제가 포스팅해놓은  이거 참고하시기 바랍니다. 

https://devpost.tistory.com/100

json-server: command not found ERROR

에러가 해결되었다면

json-server --watch db.json --port 4000

 

 

이렇게  뜨면 성공입니다.

 

---

 

 

 json-server에서 데이터를  불러오려면 어떻게 해야 할까?

 

react에서  이렇게   db 서버로부터 데이터를 불러올 수 있게  만든 것이 axios 라이브러리  입니다.

 

그러면 왜 fetch도 있는데 왜  안쓰는 것일까?   둘의 차이점을 살펴보자

 

 

※  차이점

 

1.  데이터   가져오기 

 

      fetch는  json 형식으로 자동변환이 안되서 .json() 으로 변환을  해주어야 됨

      axios는  그럴필요없음 , 데이터를 자동변환해줌

 

 

 

axios & fetch  를 이용해  서버로부터 데이터 받아오기

 

 fetch 

 요청을 받아왔다면 , json 형식으로 반환해야됩니다,

function App() {

   const [sampleData ,setSampleData ] = useState([])

  
   const getData = async () => {
    
    // 서버 URL로 요청으로부터 받아온 응답을 res에 저장
    const res = await fetch("http://localhost:4000/products")
    
    // 응답을 json으로 변환
    const jsonData = await res.json();
   
    // set함수를 이용하여 데이터를 저장
     setSampleData(jsonData)

     return jsonData;
  }

  
   useEffect(()=>{
       getData();
   })

 

axios 

 

그럴필요없이 자동으로 반환됩니다.

// axios를 이용해서 데이터를 이 서버 url에 리소스를 요청했어 
// then : 그게 성공하면 sampleData에 solve가 들어가고
  axios.get("http://localhost:4000/products").then((solve)=>{
      setSampleData(solve.data)
     // catch : 실패하면... 에러가 발생한다. 
  }).catch((error)=>{
    console.log(error)
  });
  
  // fetch때처럼 json형식으로 변환없이 자동반환됩니다!!

 

요청 결과 ( 성공 , 실패 )

 

  리소스를 받아오는데 성공할시.... 

 

 

리소스를 받아오는데  실패할시에

 

 

 

 

 

2.  라이브러리 설치 

 

axios - 설치해야됨...

// axios를 설치해서 
npm install axios 

// import를 해와야합니다. 
import axios from "axios"

 

fetch -   내장 라이브러리 입니다.

별도의  설치가 필요 없습니다.

---

 

여기서 우리는  
json-server 라는 패키지를 알아보았고
json-server로부터 요청을 해주는 
라이브러리  axios ,
내장 라이브러리 fetch 
에 대해 알아보았습니다!!!!