axios

yarn add axios

axios 일단설치

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
// config는 axios 공식문서에서 확인하세요.

axios.get(url[, config]) // GET

axios는 서버의 데이터 조회할때 사용(서버데이터get할게)
요청할때 어떤 식으로 요청해야할지는 이제 우리가 사용하는 json-server의 방식을 알아야한다
파이어베이스처럼 정해진 공식이 있는것이 아님
우리가 사용할 api 명세서를 봐야 어떤식으로 요청해야하는지를 알 수 있음
예를 들어 GET 요청시에 path variable로 요청하는지, query로 보내야할지는 만든사람이 결정하기 때문....

// src/App.js

import React, { useEffect, useState } from "react";
import axios from "axios"; // axios import 합니다.

const App = () => {
  const [todos, setTodos] = useState(null);

	// axios를 통해서 get 요청을 하는 함수를 생성합니다.
	// 비동기처리를 해야하므로 async/await 구문을 통해서 처리합니다.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 합니다.
  };
	
	// 생성한 함수를 컴포넌트가 mount 됐을 떄 실행하기 위해 useEffect를 사용합니다.
  useEffect(() => {
		// effect 구문에 생성한 함수를 넣어 실행합니다.
    fetchTodos();
  }, []);

	// data fetching이 정상적으로 되었는지 콘솔을 통해 확인합니다.
  console.log(todos); // App.js:16
  return <div>App</div>;
};

export default App;

post는 서버에 데이를 추가할때 사용. 보통 클라이언트의 데이터를 body형태로 서버에 보내고자 할때 사용
우리가 post 요청을 보냈을 때,크롬의 네트워크 탭 사용해서 로그 확인하기!
네트워크 쪽 개발을 할 때는 항상 브라우저에 있는 네트워크 탭을 확인하면서 개발을 진행해야 합니다. 어떤 문제가 생겼을 때 이정보를 통해 디버깅을 할 수 있기 때문입니다.

1. headers

   • Request URL을 통해서 우리가 의도한 URL로 post 요청을 보냈음을 알 수 있습니다.
   • Request Method를 통해서 우리가 POST 메서드를 사용했음을 알 수 있습니다.
   • Status Code를 통해서 201 코드를 받았고, 정상적으로 네트워크가 이루어졌음을 알 수 있습니다. - status code는 자동으로 생성되는 것이 아니라 BE개발자가 직접 개발을 하고 설정한 code가 브라우저에게 보이게 됩니다. 그래서 만약 BE개발자가 구현을 해놓지 않았다면 문맥과 다른 status code가 브라우저에 보일 수 있습니다.
   • 그 밖에도 request headers와 response headers 정보가 추가적으로 있습니다. 이 부분은 각 항목들이 어떤 것을 우리게 보여주는지 더 알아보시길 바랍니다.

2. payload

payload에서는 우리가 보낸 body를 확인할 수 있다
title: "post test"

3. response

response에서는 우리가 보낸 post에 요청에 대한 서버의 응답값을 확인할 수 있다. 이 리스펀스 값은 자동으로 생성되는 것이 아니라, FE 개발자가 BE 개발자에게 요청한 것을 직접 개발을 해야 생기는 값입니다. 우리가 사용한 json-server의 경우 POST 요청을 했을 때, 클라이언트가 보낸 body를 그대로 응답해주도록 만들어져 패키지이기 때문에 위와 같이 표시됩니다.

Delete는 저장되어 있는 데이터를 삭제하고자 요청을 보낼때 사용

axios.delete(url[, config])  // DELETE

PATCH

axios patch는 어떤 데이터를 수정하고자 서버에 요청을 보낼때 사용하는 메서드.
이것은 http환경에서 서로 한 약속이기 때문에 수정을 하고자 반드시 patch,put를 써야하는 것은 아님

axios.patch(url[, data[, config]])  // PATCH

.env

• .env 란 무엇이고 왜 사용하며 어떻게 사용해야할까? 아래 내용음 참고하여 .env 이용해서 우리가 사용할 API 서버의 IP 또는 URL을 숨겨서 처리해봅시다.

[https://tooo1.tistory.com/582]