레거시 API도 걱정 끝! 리액트·스프링에서 Adapter·Facade 패턴으로 우아하게 래핑하기

GoF 구조 패턴(Structural Patterns) 중 Adapter와 Facade는 ‘낡은 인터페이스’와 ‘복잡한 서브시스템’을 한 번에 다루는 만능 열쇠다.

 

1️⃣ 왜 구조 패턴이 필요한가?

• Adapter 패턴은 ‘호환되지 않는 인터페이스’를 일치시켜 기존 코드를 재사용하게 해 준다. 특히 프론트엔드에서 백엔드 응답 형태가 제각각일 때 효과가 크다.
• Facade 패턴은 복잡한 하위 시스템을 단일 진입점으로 숨겨, 클라이언트 코드(컨트롤러·서비스·컴포넌트)의 결합도를 낮춘다.

---

2️⃣ React에서 Adapter로 API 데이터 ‘갈아입히기’

// src/adapters/userAdapter.ts
export interface UserDTO {
  id: string;
  name: string;
  avatarUrl: string;
}

export const userAdapter = (legacy: any): UserDTO => ({
  id: legacy.user_id,
  name: `${legacy.first_name} ${legacy.last_name}`,
  avatarUrl: legacy.profile_img ?? '/fallback.png',
});

 

// 사용 예시: React Query
const { data: user } = useQuery(['user', id], fetchUser, {
  select: userAdapter, // 원본 → UI 전용 DTO
});

팁 : Adapter 함수를 React Query · Redux Toolkit Query의 select 또는 transformResponse 옵션과 함께 쓰면, 컴포넌트 안에서 더 이상 데이터 변환 로직이 필요 없다.

---

3️⃣ Spring Boot에서 Facade로 레거시 서비스 단순화

// Legacy 서비스 다수 호출을 감싸는 간단한 Facade
@Service
@RequiredArgsConstructor
public class OrderFacade {

    private final LegacyInventoryService inventory;
    private final LegacyPaymentGateway payment;
    private final LegacyShippingService shipping;

    @Transactional
    public OrderReceipt placeOrder(OrderRequest req) {
        inventory.reserve(req.items());
        PaymentResult pay = payment.charge(req.paymentInfo());
        shipping.requestPickup(req.customer(), req.items());
        return new OrderReceipt(pay.getId(), "READY");
    }
}

• 컨트롤러는 OrderFacade.placeOrder() 한 줄이면 끝.
• 내부 레거시 서비스가 개선되어도 외부 계약은 변하지 않으므로, 마이크로서비스 전환이나 테스트 코드 유지 보수가 쉬워진다.

---

4️⃣ Adapter + Facade 동시 적용 체크리스트

1. 경계선 명확화 : 프런트엔드는 Adapter로 출력 형식을, 백엔드는 Facade로 입력 파라미터를 통제한다.
2. 의존성 최소화 : Facade에선 레거시 서비스 인터페이스만 의존하고, 구현체는 스프링 빈 주입으로 교체 가능하게 둔다.
3. 에러·로그 통합 : Facade에서 예외를 공통 포맷으로 감싸고, Adapter에서 사용자 친화적 메시지로 변환한다.
4. 점진적 도입 : 새 API → Adapter → Facade 순으로 작은 단위부터 리팩터링한다.

---

5️⃣ 실전 적용 감각 높이는 한 줄 요약

“프런트엔드 Adapter가 데이터 모양새를 맞추고, 백엔드 Facade가 복잡한 프로세스를 숨긴다.”
이 두 패턴만 익혀도 레거시 API와의 갈등은 80% 해결된다!