비동기 호출을 위한 서비스 레이어 분리
date
Dec 31, 2023
slug
service
status
Published
tags
summary
type
Post
코드 블록이 보이지 않는 경우, 페이지를 새로고침해주세요.
시작하며
회사에서 프로젝트를 진행하면서, 비동기 호출을 처리하는 현재의 시스템 구조에서 여러 불편함과 한계점을 경험하게 되었습니다. 이에 따라 구조적인 개선이 필요함을 인식하게 되었습니다.
이러한 문제점을 해결하기 위해 취한 접근 방법으로, 비동기 서비스 레이어를 분리 과정에 대해 공유하고자 합니다.
과정
1. 초기 형태
비동기 호출을 처리하는 현재의 방식에는 몇 가지 단점이 있음을 인지하였습니다.
- 외부 변수의 의존성:
현재 구현에서는
appSet이라는 외부 변수에 크게 의존하고 있습니다. 이는 appSet의 변경에 따라 call 함수의 동작이 영향을 받을 수 있으며, 이러한 외부 의존성은 코드의 안정성을 저하시킬 수 있습니다.- 규모 확장 문제:
배열이 계속 커지면서
appSet 파일이 거대해지고 있습니다. 이는 관리와 유지보수 측면에서 문제를 일으킬 수 있습니다.- 함수 매개변수 및 로직의 증가:
새로운 요구사항에 따라 추가되는 매개변수와 로직으로 인해
call 함수가 점점 복잡해지고 있습니다. 이는 함수의 가독성과 유지보수성을 저하시켰습니다.위에서 언급된 문제들을 해결하기 위한 방안으로, Axios 구성 로직의 일부를 인터셉터로 옮기고,
TanStack Query를 활용하여 서버 상태 관리를 관리를 위해 서비스 레이어의 분리를 결정했습니다. 이 과정에서 서비스 레이어의 구조를 다음과 같이 세 가지 주요 계층으로 나누어 관리하는 방식을 고안했습니다.- Instance:
이 단계에서는 HTTP 통신을 위한 기본 Axios 인스턴스를 생성합니다. 이 인스턴스는 전체 애플리케이션에 걸쳐 일관된 네트워크 요청 설정을 제공합니다.
- Services:
서비스 계층에서는 API 호출 로직을 구현합니다. 이곳에서 각 API 엔드포인트에 대한 요청 처리를 다룹니다.
- Hooks:
마지막으로,
TanStack Query를 사용한 상태 관리 로직을 구현하는 커스텀 훅스를 개발합니다. 이 훅스는 데이터 페칭, 캐싱 및 상태를 관리합니다.2. 서비스 레이어 분리
- QueryKeys:
postKeys는 게시물 관련 쿼리의 키를 관리합니다. 이러한 키는 캐시된 데이터를 식별하고 무효화하는 데 사용됩니다.- useQuery:
useQuery 훅을 사용하여, 고유한 queryKey와 비동기 데이터를 가져오는 함수를 인자로 받아 데이터를 조회합니다.- useMutation:
useMutation 훅을 사용하여, 데이터를 생성, 수정, 삭제 등을 수행하는 비동기 함수를 호출합니다. 추가적으로 queryKey를 이용해서 캐시된 데이터를 무효화시키고, options를 통해 사용자 정의 옵션을 설정할 수 있습니다.3. Builder Pattern
Builder Pattern은 객체 지향 프로그래밍에서 복잡한 객체를 구축하는 과정을 단계별로 분리하는 설계 패턴입니다.
"우아한 타입스크립트 with 리액트"라는 책에서 Builder Pattern을 사용하여 API 클래스를 구성하고 호출하는 과정에 대해 소개합니다.
마치며
이번 포스트를 통해 비동기 호출을 위한 서비스 레이어 분리에 대해 살펴보았습니다. 이 과정에서 코드의 구조를 개선하고, 비동기 처리를 효율적으로 관리할 수 있었습니다. 이 글이 여러분의 프로젝트에 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
