Axios 사용하기

Axios

자바스크립트에서 Http 요청을 간편하게 처리하는 라이브러리

get vs post

1) 요청 목적

• GET : 서버로부터 데이터를 조회하거나 리소스를 가져오는데 사용됨
  => 서버에 변경을 가하지 않고 단순 조회

• POST: 서버에 데이터를 전송하고 리소스를 생성하거나 업데이트 하는 데 사용
  => 서버에 변경을 가하는 경우

2) 데이터 전송 방식

• GET: 요청 URL에 쿼리 매개변수 형태로 전송
  ex) /users?id=1234
  주의사항: 보안상 민감한 데이터를 url에 포함하지 않아야함.

• POST: 요청 본문에 JSON 또는 폼데이터 형태로 데이터를 전송

3) 브라우저 캐싱:

• GET: 일반적으로 브라우저에 캐싱되어 반복적인 요청을 줄일 수 있습니다.
• POST: 기본적으로 캐싱되지 않지만, 캐싱 헤더를 사용하여 캐싱을 설정할 수 있습니다.

axios로 http 요청 보내기

get 요청

axios.get('https://jsonplaceholder.typicode.com/posts')
     .then(response => setData(response.data))
     .catch(error => console.error(error));

post요청

axios.post('/api/users', {
      username,
      email,
      password
    })
      .then(response => {
        console.log('등록 성공!');
        // 성공 처리 로직
      })
      .catch(error => {
        if (error.response) {
          setErrorMessage(error.response.data.message);
        } else {
          setErrorMessage('서버 오류 발생!');
        }
      });