19일차(비동기 통신: axios)

HTTP

1. 프로토콜: 웹 서버와 클라이언트(웹 브라우저)가 대화하기 위해 서로 약속된 방식  

2. 요청(Request)과 응답(Response): 요청은 클라이언트가, 응답은 서버가 함

3. Url
    1) https:// : 프로토콜
    2) WWW. : subdomain
    3) hostinger.com: Main domain
    4) /tutorials/what-is….: Paht/Page
    
4. 메서드: 클라이언트가 서버에게 요청하는 것
    1) GET: 조회
    2) POST: 생성
    3) PUT, PATCH: 수정
    4) DELETE: 삭제
    
5. 상태코드: 오류코드
    1) 1xx(정보): 요청을 받았으며 프로세스를 계속 진행
    2) 2xx(성공): 요청을 성공적으로 받았으며 인식했고, 수용
    3) 3xx(리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요
    4) 4xx(클라이언트 오류): 요청의 문법이 잘못되었거나, 요청을 처리할 수 없음
    5) 5xx(서버 오류): 서버가 명백히 유효한 요청에 대한 충족 실패

 

---

axios: Promise를 기반으로 http 통신을 할 수 있는 라이브러리

 

get

// 비동기 함수이기 때문에 async가 붙어야 하고, await 구문이 실행돼야 다음 구문 실행
const fecthTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);
  };

// 최초 mount 될 때 db로부터 값을 가져옴
  useEffect(() => { fecthTodos()}, []);

 

post(추가)

// 데이터베이스 저장 형식 그대로 state를 받아야 함
const [inputValue, setInputValue] = useState({
    title: "",
  });

const onSubmitHandler = async () => {
	// , 뒤에 추가할 값을 넣어주면 됨
    axios.post("http://localhost:4000/todos", inputValue);
   	
    // 추가 이후 get을 통해 값을 다시 가져오는 방법이 좋음
    fecthTodos();
  };

 

delete(삭제)

const onDeleteButtonClickHandler = async (id) => {
    // 아래의 html 코드를 나타내는 부분에서 onclick시 id 값을 받아오고 props로 사용
    axios.delete(`http://localhost:4000/todos/${id}`);
    
    // id값과 비교해서 같지 않은 것들만 filtering
    setTodos(
      todos.filter((item) => {
        return item.id !== id;
      })
    );
  };

 

patch(수정)

const [todos, setTodos] = useState(null);
const [inputValue, setInputValue] = useState({
title: "",
});
const [targetId, setTargetID] = useState("");
const [contents, setContents] = useState("");


const onUpdateButtonClickHandler = async () => {
	// , 뒤에 수정할 부분을 DB의 형식과 같게 입력해주어야 함
    axios.patch(`http://localhost:4000/todos/${targetId}`, {
      title: contents,
    });
    
    // input 창에 입력된 targetId와 item의 id가 같을 경우 title: contents를 포함한 item 출력
    setTodos(
      todos.map((item) => {
        if (item.id == targetId) {
          return { ...item, title: contents };
        } else {
          return item;
        }
      })
    );
  };

---

axios 심화

interceptor

정의: 요청이 처리되기 전, 응답의 성공 또는 실패가 처리되기 전에 가로채서 어떠한 역할을 하는 것

1. 요청 헤더 추가

2. 인증 관리

3. 로그 관련 로직 삽입

4. 에러 핸들링

 

 

1. .env를 통해 url 관리

루트 폴더에 .env 폴더를 만든뒤,
REACT_APP_SERVER_URL = http://localhost:3001 같은 형식으로 url을 관리할 수 있음
그리고 이것은 아래와 같이 접근 가능

const fecthTodos = async () => {
    const { data } = await api.get(
      `${process.env.REACT_APP_SERVER_URL}/todos`
    );
    setTodos(data);
};

 

2. Axios 가공하기

src/ axios / api.js 경로로 파일을 만든 뒤

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
  // timeout: 1,
});

위와 같이 사용할 수 있고 baseURL은 기본 url이기 때문에 component에서 아래와 같이 사용 가능
 const fecthTodos = async () => {
    const { data } = await api.get(
      `/todos`
    );
    setTodos(data);
  };

 

3. interceptors

api.js에서 아래와 같이 사용가능

//요청을 보내기 전 수행되는 함수
axiosInstance.interceptors.request.use(
  // 요청 성공 함수
  function (config) {
    console.log("interceptor 요청 성공");
    return config;
  },
  // 오류 발생 함수
  function (error) {
    console.log("interceptor 요청 오류");
    return Promise.reject(error);
  }
);

//응답을 보내기 전 수행되는 함수
axiosInstance.interceptors.response.use(
  // 성공
  function (response) {
    console.log("interceptor 응답 받음");
    return response;
  },
  // 오류 
  function (error) {
    console.log("interceptor 응답 오류 발생");
    return Promise.reject(error);
  }
);