도전 과제와 개선 과정

1. 상태 관리 복잡성 문제

문제 상황: 개발자 도구를 껐다 켜면 도장이 보이지 않는 현상이 발생했습니다. 코드를 수정하면 도장이 일시적으로 보이다가 다시 사라지는 일관성 없는 동작이 관찰되었습니다.

원인 분석:

• usePdfDownloader 훅이 너무 많은 역할을 담당하며 상태 관리가 복잡해졌습니다.
• 프론트엔드 상태와 UI 렌더링 사이의 동기화 문제가 있었습니다.
• 변수명 불일치(stampObject와 activeStampObject)로 인한 참조 오류가 있었습니다.

해결 방법:

• 관심사 분리: 하나의 복잡한 훅을 역할별로 4개의 훅으로 분리했습니다.
  • usePdfRenderer: PDF 변환 및 렌더링
  • usePdfStampProcessor: 도장 위치 정보 처리
  • usePdfDownloader: 파일 다운로드 기능
  • usePdfEditor: 통합 인터페이스 제공
• 명확한 상태 관리: 상태 변수명을 통일하고 상태 접근 방식을 개선했습니다.
• 컴포넌트 자동 갱신: 페이지 변경 시 자동으로 캔버스를 새로고침하는 메커니즘을 추가했습니다.

2. PDF 처리 기능 개선

문제 상황: 기존 PDF 변환 함수가 첫 페이지만 처리할 수 있고, 오류 처리와 메모리 관리가 미흡했습니다.

개선 사항:

• 다중 페이지 지원: 특정 페이지 번호를 지정할 수 있도록 개선했습니다.
• 견고한 오류 처리: try-catch-finally 구조로 체계적인 오류 처리를 구현했습니다.
• 메모리 누수 방지: URL.revokeObjectURL()를 사용하여 브라우저 메모리 관리를 개선했습니다.
• 유효성 검사 강화: 페이지 번호의 유효성을 검사하여 예외 상황에 대응했습니다.

3. 기술적 교훈과 모범 사례

React 훅 설계: