🚨 api 모듈화 계기 🚨
이전에 폴더 구조가 꽤 복잡한 프로젝트를 진행하며 고생을 한 결과 폴더 구조는 최대한 간단하게 만드는 것이 좋겠다고 생각하게 되었다. 이에 페이지와 컴포넌트 디렉토리 외에는 크게 다른 디렉토리를 두지 않았다.
하지만 intercepter를 사용하게 되며 api를 대거 수정해야 하는 일이 생겼고 안타깝게도 이 일은 아주 비효율적으로 처리할 수밖에 없었다. 모든 페이지 코드를 열어서 api를 수정하다 보니 api는 모듈화를 시켜두는 것이 좋겠다는 생각이 들었다.
이에 리팩토링을 진행하며 api를 모듈화하기로 하였다.
사실 api 호출부가 중복되는 것이 마음에 들지 않아 커스텀 훅으로 만들어서 수정하고 있었는데, api 관리하기에는 모듈화가 더 나은 것 같아서 모듈화를 하게 되었다.
🚑🚑 디렉토리 구조 🚑🚑
이전에 사용하던 그 복잡한 프로젝트와 api 구조가 같아졌다.
api 폴더에는 기능을 기준으로 여러 개의 파일을 두었고, 각 파일에는 그 기능과 관련된 api를 요청하는 함수들을 작성하였다.
이 프로젝트의 경우에는 search.tsx, brand.tsx, perfume.tsx 등이 있다.
services에는 응답 결과를 정제해주는 함수들이 들어가는데, 아직까지는 사용할 일이 없었다.
utils에는 api를 호출할 때 공통적으로 사용하는 부분을 넣어두었다. 이 프로젝트의 경우에는 axios 인스턴스와 인터셉터를 넣어주었다.
이건 대체 어떻게 만든 거지?