1. 에러 처리 아키텍처 구축

배경과 맥락

퀴즈존 기능 개발이 진행되면서, 다양한 에러 상황에 대한 체계적인 처리의 필요성이 대두되었습니다. 특히 비동기 작업과 컴포넌트 렌더링 과정에서 발생하는 에러들을 일관되게 처리하고, 사용자에게 적절한 피드백을 제공하는 것이 중요한 과제였습니다.

진행 과정

처음에는 단순히 try-catch문을 사용하여 개별적으로 에러를 처리하려 했으나, 이는 코드 중복을 발생시키고 유지보수를 어렵게 만든다는 것을 깨달았습니다. 이에 React의 Error Boundary 패턴을 활용하여 선언적이고 재사용 가능한 에러 처리 시스템을 구축하기로 했습니다.

주요 구현 내용은 다음과 같습니다:

1. ErrorBoundary 컴포넌트 구현
   • 클래스 컴포넌트를 활용하여 하위 컴포넌트의 에러를 캐치하고 관리
   • CustomAlertDialog를 통해 사용자 친화적인 에러 메시지 표시
   • fallback UI의 커스터마이징을 통한 유연성 확보
2. AsyncBoundary 컴포넌트 개발
   • Suspense와 ErrorBoundary를 결합하여 비동기 작업의 상태 관리 통합
   • 로딩 상태와 에러 상태의 일관된 처리 제공
3. 퀴즈존 전용 에러 처리 시스템
   • HTTP 상태 코드와 비즈니스 로직에 따른 에러 타입 정의
   • ValidationError 클래스를 통한 구조화된 에러 정보 관리

기술적 구현

가장 핵심적인 부분인 AsyncBoundary 컴포넌트의 구현 예시입니다:

const AsyncBoundary = ({
  children,
  onError,
  onReset,
  fallback
}: AsyncBoundaryProps) => {
  return (
    <ErrorBoundary onError={onError} onReset={onReset} fallback={fallback}>
      <Suspense fallback={<LoadingSpinner />}>
        {children}
      </Suspense>
    </ErrorBoundary>
  );
};

회고와 교훈

잘된 점:

• 선언적이고 재사용 가능한 에러 처리 시스템 구축
• 사용자 경험을 고려한 에러 UI 설계
• 비동기 작업과 렌더링 에러의 통합적 처리

개선이 필요한 점:

• 일부 에러 타입의 세분화 필요
• 에러 복구 메커니즘의 강화