성장 목표
- 구현하고자 하는 기능에 필요한 기술 스펙을 정확히 알아보자!
- 왜 그 기술을 사용해야했는가를 명확하게 설명해보자!
- 클린코드까지는 못하더라도 코드리뷰하기 좋은 코드를 작성하자!
기술적 고민거리
-
무한 스크롤, 이미지 렌더링 최적화
- 어떤 확장자를 사용할 것인가? → 일단 png는 다른 확장자에 비해 사이즈가 크기 때문에 배제한다.
- 이미지 손실 압축을 사용하여 이미지를 압축하여 CDN 서버에 저장
- 몇 % 압축시 SSIM 값은 최대화하면서 사용자 경험은 최대화 할 수 있을까?
- 각 방탈출 브랜드별, 테마별 포스터 이미지의 화질이 제 각각 인데 같은 압축률을 적용했을 경우 화질이 안 좋은 이미지의 경우 UX에 안좋은 영향을 미칠 수 있을 것 같은데, 이것을 해결할 수 있는 방법?
→ 위의 경우, 이미지 리소스를 크기별로 각각 저장해야하고, 이미지의 출처가 모두 다르기 때문에 해상도도 달라, 같은 압축률을 적용했을때 각각 해상도가 일관적이지 않기 때문에 하나의 원본 이미지로 이미지 최적화를 할 방법을 고려해야함
- PWA로 만들 예정이라 모바일의 경우 반응형 웹이 렌더링하는데 약 2배 이상 지연되는 것으로 인해, 웹 환경에 따라 적합한 이미지를 서빙해줘야 한다.
트러블 슈팅 경험
- 개발환경에서만 필요한, 폴더는 빌드에서 제외시켜야한다.
- 관련 이슈
[Fix] build시 오류 발생 · Issue #8 · boostcampwm2023/web03-LockFestival
Config/FE/#8: build 버그 수정 by seonye-98 · Pull Request #9 · boostcampwm2023/web03-LockFestival
‣
피어세션 질문 & 피드백
- 그룹끼리 공유 일기를 작성한다고 해도, 사용자가 캡처한 화면을 외부에 공유하면 비밀 유지 조약이 깨지기 때문에 캡처 방지도 고려해보면 좋을 것 같다고 피드백 받았다.