• 이미지 WebP 변환 (손실률 -q 75 기준, cwebp CLI 사용)

• 폰트 woff2 변환 (Transfonter 사용)

• 불필요한 리소스를 제거하고 용량 최적화를 통해 초기 로딩 속도 향상

• 이미지 용량 5.54MB → 445KB, 약 91.9% 절감

• 폰트 용량 2.0MB → 43KB, 약 97.9% 절감

• 전체 리소스 7.5MB 이상 → 488KB, 약 93.5% 용량 감소

• 초기 로딩 속도와 LCP 크게 개선, 사용자 체감 성능 향상

• WebP와 woff2 변환을 통해 대용량 리소스 최적화 경험

• 웹 성능 개선에서 이미지와 폰트 최적화가 UX와 트래픽 효율에 큰 영향을 미침

• 프론트엔드에서 리소스 효율화 전략을 설계하고 적용하는 실무 경험 습득

• 개선 전: 매 컴포넌트 렌더링 시 useEffect 내에서 번역용 API 호출→ 이미 번역한 데이터도 매번 새로 요청되어 리소스 낭비

• 개선 후: 콘텐츠 별 ID(date) 기반 캐싱 로직 적용 → Supabase `translations` 테이블 생성

• → 요청 시 해당 날짜의 번역 결과가 Supabase에 존재하는지 먼저 조회

• → 없을 경우에만 API 요청 후 Supabase에 저장

• 요청 속도: 평균 2~3초 이상 → 100~200ms 수준

• API 비용: 불필요한 중복 요청 다수 → 약 70% 이상 절감

• UX 반응성: 느림(로딩 빈도 높음) → 대부분 캐시로 빠른 응답

• 코드 유지보수: 중복 요청 처리 로직 필요 → 단순화 및 재사용 용이

• 캐싱 전략을 통해 외부 API 호출 빈도를 줄이면 비용과 성능을 동시에 개선할 수 있음

• 데이터베이스(Supabase) 기반 캐시를 활용하면 중복 호출을 체계적으로 관리 가능

• API 호출 최소화와 UX 반응성 사이의 균형 중요

• 개선 전: 댓글 작성은 클라이언트 상태만 갱신, 조회는 fetchCommentsByPostId(postId)로 별도 요청 → 실시간 반영 불가

• 개선 후: Supabase Realtime 채널 도입

• → INSERT, DELETE 이벤트 구독으로 자동 상태 업데이트

• → 작성자 외 사용자도 새로고침 없이 댓글 확인 가능

• 실시간 댓글 반영으로 커뮤니티 몰입도와 상호작용 개선

• 클라이언트 단 로직 단순화 (자동 상태 업데이트)

• 새로고침 의존도 제거로 UX 전반 개선

• Supabase Realtime은 channel 및 postgres_changes 구독만으로 간단히 실시간 시스템 구축 가능

• 실시간 처리는 사용자 간 상호작용을 강화하고 커뮤니티 경험에 필수적임

• 실시간 로직 적용 시 중복 반영 방지 및 구독 해제(clean-up) 관리가 중요함