주요 도전과 해결 과정

1. 캔버스 뷰어의 확대/축소 기능 구현 최적화

도전: 이미지 갤러리의 Canvas API 활용 시 확대/축소(줌) 기능을 최적화하는 과정에서 변환 행렬 적용 방식에 대한 더 깊은 이해가 필요했습니다.

과정:

• Canvas 변환 행렬의 동작 방식과 순서에 대한 연구 진행
• 이미지 비율과 캔버스 비율의 최적 계산 방식 발견
• 다양한 렌더링 접근법 테스트 및 비교

해결 방법:

• 렌더링 순서를 명확하게 구성: 초기화 → 중앙 이동 → 회전 → 확대/축소
• 기본 이미지 크기를 먼저 계산한 후 스케일 적용 로직 최적화
• ctx.scale() 적용 후 추가 계산을 효율적으로 조정

학습 포인트: 캔버스의 변환 행렬 순서가 결과에 큰 영향을 미치며, 스케일링은 모든 후속 드로잉 작업에 영향을 준다는 점을 이해함. 캔버스 API의 심층적인 이해를 통해 더 유연하고 성능이 좋은 구현이 가능해짐.

2. 무한 스크롤 최적화

도전: 무한 스크롤 구현 시 네트워크 요청과 상태 관리의 효율성을 극대화하는 방안이 필요했습니다.

과정:

• 사용자 스크롤 패턴 분석
• 캐싱 전략 수립
• Intersection Observer API 활용 방안 연구

해결 방법:

• 초기 로딩과 페이지 캐싱을 효율적으로 관리하는 참조 시스템 구축