API 요청 로직을 core/api.js로 분리하여 코드 중복 줄이기

[leesiha]

이슈 내용:

현재 프로젝트에서 반복적으로 사용되는 API 요청 로직을 여러 파일에서 개별적으로 처리하고 있습니다. 이를 효율적으로 관리하기 위해, 공통적인 API 요청 로직을 core 디렉토리 내에 별도의 파일로 분리해 관리할 것을 제안합니다.

제안 사항:

• core/api.js 파일을 생성하여, 공통 API 요청 로직을 해당 파일에서 관리.
• 중복되는 request 내부의 공통된 헤더 설정(Content-Type, X-CSRF-Token 등)을 하나의 유틸리티 함수로 묶어 다른 파일에서 재사용 가능하도록 수정.

작업 내용:

1. core/api.js 파일 생성

   • 공통 헤더 설정 함수 (getCommonHeaders)
   • 공통 API 요청 함수 (sendApiRequest)

2. 코드 예시:

   // core/api.js
   
   export const getCommonHeaders = () => ({
      'Content-Type': 'application/json',
      'X-CSRF-Token': getCookie('csrftoken'),
   });
   
   export const sendApiRequest = async (url, method, bodyData = null) => {
      const options = {
          method: method,
          headers: getCommonHeaders(),
      };
   
      if (bodyData) {
          options.body = JSON.stringify(bodyData);
      }
   
      const response = await fetch(url, options);
      return response;
   };

3. 각 컴포넌트 파일에서 sendApiRequest 사용: 기존의 반복되는 fetch 호출을 sendApiRequest 함수로 대체하여 코드 중복을 줄이고, 일관된 API 호출 방식으로 수정.

기대 효과:

• 중복 코드가 줄어들어 코드 유지보수성과 가독성이 향상됨.
• 공통 로직을 한 곳에서 관리하게 되어 API 요청 변경 시 일관성 있는 수정 가능.
• 향후 추가적인 API 호출 로직 확장이나 수정이 필요할 때 유연하게 대처 가능.

작업 후 변경 사항:

• 각 컴포넌트에서 공통 API 요청 함수 사용.
• core/api.js 파일을 통해 API 호출 로직 관리.

[mingkyeongg]

확인했습니다. 코드 분리하는게 더 깔끔하고 좋은 것 같습니다!

[sunsetfactory]

저도 코드를 분리하자는 생각에 동의합니다!

[leesiha]

별도 브랜치에서 작업한 뒤 PR 올리겠습니다