현재 프로젝트의 API 통신 관련 코드는 모두 axios로 진행된다.

따라서 프로젝트 초기 설정 과정에서 npm install axios 를 통해 axios 를 설치하였으며,

현재 fetch API 로 작성되어 있는 API 관련 통신 코드는 API 연결 시 axios로 리팩토링 될 것이다.

이전에 Vue3로 프로젝트를 진행하면서, API 통신 관련 로직을 페이지와 컴포넌트에서 각각 생성했는데, 이 부분을 추후 수정하는 과정에서 문제점이 있었다.

소규모 팀프로젝트에서 백엔드 서버가 배포되지 않은 상태에서 작업할 때, 보통 프론트엔드가 백엔드 서버 코드를 받아 로컬에서 실행하며 테스트하게 되는데 이 경우엔 localhost:XXXX/ 의 경로로 접속하게 된다.

백엔드 서버가 배포된 이후엔, 이 URL 경로가 변경되게 되고 당연히 API 통신 관련 코드에서 URL을 수정해야 한다.

이때, 두 가지 문제를 겪었는데

1. 중구난방으로 흩어진 API 통신 코드를 찾기가 힘들었다.
2. baseURL 설정을 하지 않아, 배포 서버와 로컬 서버에서 번갈아가며 테스트 할 때 일일히 URL을 수정해야 했다.

1번의 경우 프론트엔드를 내가 전부 담당했으므로 사실 그렇게 큰 문제가 되지 않았다.

2번이 문제였는데, 서버를 배포하는 과정에서 네트워크 속도 문제때문에 통신이 제대로 되지 않아 로컬과 배포 서버를 번갈아 사용하는 상황이 필요했고, 이를 위해 그때 그때 URL을 일일히 변경해야 했다.

나중에서야 axios instance 파일을 생성해서 baseURL을 지정하고 .env 로 관리하기 시작했지만, 처음부터 이런 설정을 하고 작업했다면 URL을 변경하느라 시간을 덜 써도 되고, 귀찮은 상황을 막을 수 있었을 것이다.