[#34] 수동 저장 -> 자동 저장으로 변경

[Ujaa]

🔗 Linked Issue (이슈)

#34

🙋‍ Summary (요약)

• 전역 상태 변경에 따라 저장 로직 호출
• html2canvas ignoreElements 옴션을 사용해 불필요한 스타일 계산 축소
• offscreenCanvas와 web worker를 사용해 main thread 블로킹 감소

bandicam.2025-01-24.15-22-45-372.mp4

😎 Description (변경사항)

전역 상태 변경에 따라 저장 로직 호출

• zustand 상태 관리 라이브러리를 활용하여 작업 변경 여부를 전역 상태에서 Boolean 값으로 관리, 변경이 감지되면 저장 로직 수행.

html2canvas ignoreElements 옴션을 사용해 불필요한 스타일 계산 축소 + offscreenCanvas와 web worker를 사용해 main thread 블로킹 감소

• 자동 저장 적용 후에도 UI 멈춤 현상 지속.(평균 1.5 ~ 1.7초 소요, 최대 6 ~ 9초 이상 발생)
• 개발자 도구의 Performance 탭을 활용해 JS 작업이 main thread를 블로킹하는 것을 확인
• 어떤 JS 작업이 블로킹하는지 파악하기 위해 performance.now()로 저장 과정의 각 단계별 소요 시간 분석
• 저장 과정 중 썸네일 생성을 위해 html2canvas를 활용한 웹페이지 캡처가 가장 큰 성능 저하 요인(평균 1.5초 소요). html2canvas 최적화: 라이브러리 옵션을 사용해 불필요한 DOM 요소의 스타일 계산 제외
• 캡쳐 이미지 만들기 위해 canvas -> blob으로 변환 과정이 두 번째로 많은 시간 소모(평균 0.3초 소요). Web Worker 및 OffscreenCanvas 도입, blob 변환 및 이미지 생성 작업을 별도 스레드에서 처리

🔥 Trouble Shooting (해결된 문제 및 해결 과정)

글 작성중입니다.

🤔 Open Problem (미해결된 문제 혹은 고민사항)

• html2canvas 이미지 저장 실패: 이미지 CORS 설정을 추가해야할 것 같다고 생각했습니다.
• 저장 로직이 수행되는 중에 home page로 이동하면 데이터가 날라가는 버그가 발생하고 있습니다...추가로 수정하겠습니다.

[inhachoi]

조금 더 깊은 개념인 web worker까지 학습해서 잘 정리해주신 점이 인상깊네요!
CS적으로 많은 학습을 하신것 같아서 좋네요!
수고하셨습니다 ❤️

[lee0jae330]

자동저장 기능을 통해 사용성을 향상시킨 것 되게 좋네요 ㅎㅎ html2canvas 관련 문제 해결하시느라 고생하셨습니다 <3