항해99 50일차 TIL : API URL은 따로 파일로 관리하기의 필요성!

미니프로젝트를 진행하면서 프론트엔드에서 클라이언트-서버 통신을 하면서 axios를 이용하면서 API는 아래 이미지에 나오는 코드를 작성해 이용했다.

하지만 이렇게 하면 대단히 불편하다. 주석처리한데서 알 수 있듯이 백엔드와 통신 점검할 때 담당하는 백엔드분이 다르면 그때마다 API를 주석처리했다가 풀었다가 하면서 나랑 일하는 분의 API로 바꿔야 하기 때문이다. 그래도 저런게 하나면 귀찮은 일 한번으로 끝나지만, 리덕스 모듈 파일을 작성하며 미들웨어 함수 코드를 짜본 사람이면 누구나 알듯이 저런 API가 한 둘이 아니다. 

 

그래서 API를 매번 저렇게 입력하는 수고를 덜고 편하게 하기 위해서는 API만 관리하는 파일을 만드는게 좋다. 예를들면 아래 이미지처럼 해야 한다.

 

출처 : 이대호님 git, github.com/leedaeho1188/hh99_smallProject

이렇게 API를 관리하는 파일을 만들고,

 

이 파일을 import 해서 가져온다.

그런 다음 api를 가져다가 쓴다.

 

이런 로직으로 파일들을 구성하면 API URL를 관리하는 파일에 들어가서 API URL 주소만 한번 바꿔놓으면 끝이다. 사실 리덕스 모듈 파일에서 귀찮더라도 API URL을 다 바꾸는 방법도 있지만 다른 것도 신경써야 해서 머리에 과부하가 걸린 상태에서 그런 것을 해서 머릿속작업용량 더 잡아 먹는 일은 없게 하는 것이 좋다. 그리고 일일히 바꾸다 실수가 생겨서 서버랑 통신이 안 되면 안 된 부분 찾는다고 아까운 시간과 체력을 낭비하게 되는데, 그런 일을 방지할 수 있다. 앞으로는 이런식으로 일을 해야겠다. 

 

예시로 가져온 이미지들은 리액트 고수분의 깃에서 가져왔다. 역시 일잘러들은 일잘하는 비결이 있는 법이고, 일못러인 나는 이런 것들을 벤치마킹해서 일잘러가 되어 갈 것이다.