[React] Axios 인스턴스 임시 엔드포인트(?) #post 메서드

axios 로직을 유지보수, 확장성 등의 이유로 인스턴스를 생성해서 만들 수 있다. 이 때 create를 이용해서 만드는데 (만드는 방식은 생략) 엔드포인트까지 넣어서 만든 경우 `get` 요청은 매개변수의 생략이 가능하다. 

 

단 `body` 등 옵션이 필요한 그 외의 메서드들은 매개변수를 생략할 수 없는데 이때 첫 번째 매개변수로 `'/'`를 넣어주면 된다. 

 

💡 예시

get

const api = axios.create({
  baseURL: "http://localhost:4000/posts",
})

const getPosts= async () => {
  await api.get();
  /* 생략 */
}

• `get` 메서드로 모든 게시글을 가져오는 경우 `api.get()`만 호출하면 된다. 

 

post  잘못된 예시 🚨

const createPost = async (post) => {
  await api.post(post);
}

• `api.post`로 호출할 때 첫 번째 매개변수로 무조건 url이 들어가야하는데 생략이 되어있다.

 

post 올바른 예시 📍

const createPost = async (post) => {
  await api.post('/', post);
}

• `api` 자체에 엔드포인트를 작성했지만 필수로 url이 필요하기 때문에 `'/'` 을 넣어주었다.

 

💡 정리

아무 생각 없이 엔드포인트를 만들어놨기 때문에 생략해도 되려나 싶어서 했는데 역시 안된다. axios 함수 내부에서는 첫 번째 매개변수는 무조건 `url` 로 인식을 하기 때문인 것 같다. (아마도?) 따라서 생략은 가능하지만, 추가적인 데이터가 필요할 경우 첫 번째 매개변수에는 임시 경로(`'/'`)를 지정해주고 데이터를 전달해주어야 한다.

 

경로를 생략하고 api 요청을 보낼 경우 에러 메시지도 띄워주지 않아서 어디가 잘못됐는지 디버깅도 어렵기 때문에 주의하도록 하자.