Refactor: 이미지 압축 #379 - Githubissues

nailedReact / bokgungom-market

멋쟁이사자처럼 프론트엔드 스쿨 3기 15조 득근득근 복근곰마켓 레포지토리

https://bokgungom-market.vercel.app/

6 stars 5 forks source link

Refactor: 이미지 압축 #379 #380

Closed SEMINSEMINSEMIN closed 1 year ago

SEMINSEMINSEMIN commented 1 year ago

핵심

browser-image-compression 사용
이미지 압축 정도를 페이지마다 달리함(ex. 프로필 이미지의 경우 크기가 작기 때문에 압축을 더 많이 하는 방식으로)

이미지 요소에 width와 height 명시

이미지 요소에 명시적인 너비 및 높이를 설정하여 레이아웃 변경 횟수를 줄이고 누적 레이아웃 변경을 개선하기 위해
적용 파일: PostCard.jsx

중복 줄임

utils 폴더 하에 imgCompressHandle.js 추가: 코드 중복 줄이기 위해
UploadPost.jsx와 PostEdit.jsx에서 ImageUpload 컴포넌트를 사용함으로써 ImageUpload 컴포넌트 재사용성을 높임
PostEdit과 UploadPost를 UploadEditPost로 통합, 폴더 구조 바꿈

스타일

회원가입시 프로필 설정 페이지에서 img 태그에 object-fit: cover 스타일 추가
프로필 페이지의 ProfileCard 컴포넌트에서 이미지 태그에 object-fit: cover 스타일 추가
상품 업로드 페이지의 미리보기 이미지에 object-fit: cover 스타일 추가
이미지 삭제 버튼 위치 조정

접근성

UploadEditPost내 Contentimg의 alt를 '게시글 첨부 사진'으로 변경

한계점

gif를 browser-image-compression으로 압축시 움직이는 gif가 아닌 정지된 gif로 나옴 일단 gif는 압축하지 않는 것으로 처리했으나 gif 용량이 클 경우를 대비해 대책 마련 필요

netlify[bot] commented 1 year ago

Deploy Preview for bokgungom-market ready!

Name	Link
Latest commit	2e816dd7e6d0cf7e3d43b816d0c2675d41a333b4
Latest deploy log	https://app.netlify.com/sites/bokgungom-market/deploys/63c3c9b3d6dc540008cf92f3
Deploy Preview	https://deploy-preview-380--bokgungom-market.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.