성장 목표

• 구현하고자 하는 기능에 필요한 기술 스펙을 정확히 알아보자!
• 왜 그 기술을 사용해야했는가를 명확하게 설명해보자!
• 클린코드까지는 못하더라도 코드리뷰하기 좋은 코드를 작성하자!

기술적 고민거리

• 무한 스크롤, 이미지 렌더링 최적화

  • 어떤 확장자를 사용할 것인가? → 일단 png는 다른 확장자에 비해 사이즈가 크기 때문에 배제한다.
  • 이미지 손실 압축을 사용하여 이미지를 압축하여 CDN 서버에 저장
  • 몇 % 압축시 SSIM 값은 최대화하면서 사용자 경험은 최대화 할 수 있을까?
  • 각 방탈출 브랜드별, 테마별 포스터 이미지의 화질이 제 각각 인데 같은 압축률을 적용했을 경우 화질이 안 좋은 이미지의 경우 UX에 안좋은 영향을 미칠 수 있을 것 같은데, 이것을 해결할 수 있는 방법?

  → 위의 경우, 이미지 리소스를 크기별로 각각 저장해야하고, 이미지의 출처가 모두 다르기 때문에 해상도도 달라, 같은 압축률을 적용했을때 각각 해상도가 일관적이지 않기 때문에 하나의 원본 이미지로 이미지 최적화를 할 방법을 고려해야함

  • PWA로 만들 예정이라 모바일의 경우 반응형 웹이 렌더링하는데 약 2배 이상 지연되는 것으로 인해, 웹 환경에 따라 적합한 이미지를 서빙해줘야 한다.

트러블 슈팅 경험

• 개발환경에서만 필요한, 폴더는 빌드에서 제외시켜야한다.
• 관련 이슈

[Fix] build시 오류 발생 · Issue #8 · boostcampwm2023/web03-LockFestival

• 관련 PR

Config/FE/#8: build 버그 수정 by seonye-98 · Pull Request #9 · boostcampwm2023/web03-LockFestival

‣

피어세션 질문 & 피드백

• 그룹끼리 공유 일기를 작성한다고 해도, 사용자가 캡처한 화면을 외부에 공유하면 비밀 유지 조약이 깨지기 때문에 캡처 방지도 고려해보면 좋을 것 같다고 피드백 받았다.