웹 앱에서 네트워크 호출 조직화: 집중적 호출 방법론

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 앱 개발자 및 팀 리더. 중간 이상의 경험을 가진 개발자에게 유용하며, 네트워크 호출의 중복 및 불일치 문제를 해결하고자 하는 팀에 적합.

핵심 요약

• src/services/verbs.js에 GET, POST, PATCH, PUT, DELETE 등 전체 네트워크 호출을 단일 함수로 통합하여 일관된 관리.
• API별 파일(예: users.js)에서 엔드포인트 함수와 트랜스폼 함수로 분리, 데이터 변환 로직을 컴포넌트에서 분리.
• src/data/README.md를 통해 팀 내 협업 시 네트워크 호출 구조를 명확히 공유 및 강제.

섹션별 세부 요약

1. 네트워크 호출의 문제점

• axios 또는 fetch를 무분별하게 사용할 경우, 중복된 코드와 일관성 없는 구조로 인한 유지보수성 저하.
• 전역 스토어에 네트워크 호출 집중하는 방식도 보일러플레이트 코드와 중복된 로직을 유발.

2. 집중적 호출 방법론의 파일 구조

• src/data/README.md: 팀 내 네트워크 호출 구조를 명확히 문서화하여 협업 시 일관성 유지.
• src/data/apis/users.js:

- Private verb 함수: 해당 파일 내부에서만 사용.

- Endpoint 함수: 엔드포인트 호출 로직.

- Transform 함수: 데이터 변환 로직 (예: getSuperAdminLastNames).

• src/services/verbs.js: GET, POST 등 모든 HTTP 메서드를 단일 함수로 통합.

3. 환경 및 프록시 관리

• src/services/index.js: 환경별 URL 생성 및 프록시 설정.

- 예: inventoryAppUrl, usersApi를 @my-company/network-utilities 라이브러리 사용.

• ProxyMap 및 urlBuilder: 개발, 테스트, 프로덕션 환경에 맞는 URL 생성.

4. 네트워크 호출 중앙 관리

• verbs.js 파일:

- GET 함수: URL, 오류 메시지, 기본 반환 값 등을 처리.

- POST 함수: 요청 본문 및 옵션 처리.

- createApiVerbs: 특정 API의 URL 접두사를 추가한 메서드 생성.

결론

• 모든 네트워크 호출을 verbs.js에서 통합하여 일관성과 유지보수성을 확보.
• 트랜스폼 함수를 사용해 데이터 변환 로직을 컴포넌트에서 분리하고, README.md 문서를 통해 팀 내 협업 가이드라인 공유.
• 환경별 URL 관리를 위한 src/services/index.js 파일 작성.