-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
이미지 압축 패키지를 Browser Image Compression에서 upload-images-converter로 변경 #684
Conversation
upload-image-converter은 이미지를 비율대로가 아닌 지정한 값으로 자르는 옵션만 설정할 수 있어서 직접 비율대로 자르기 위해 해당 함수를 구현
⚡️ Lighthouse report!
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
와우~ 패키지 사이즈가 상당히 작아져서 좋군요!!
덕분에 번들링 사이즈를 좀 더 줄일 수 있게 되었네요~ 👍👍👏👏
@@ -7,6 +7,19 @@ import { handlers } from './src/mocks/handlers'; | |||
|
|||
dotenv.config({ path: './.env.test' }); | |||
|
|||
/** | |||
* 이 코드가 없다면 jest에서 upload-images-converter 패키지에 관한 에러가 발생합니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
jest의 신, jest의 자랑, jest의 빛
우스
https://github.com/nrwl/nx/issues/7844#issuecomment-1220559108 | ||
*/ | ||
jest.mock('upload-images-converter', () => ({ | ||
__esModule: true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
height, | ||
}); | ||
|
||
const outputWebpFile = new File([compressedBlob[0]], `${Date.now().toString()}.webp`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[compressedBlob[0]
은 무슨 값인가요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이미지 파일입니다 패키지를 바꾸면서 기존에는 이미지 파일을 사용하다가 바꾼 패키지에서는 이미지 파일 배열을 반환해서 [0]으로 사용하게 되었어요
const maxSize = Math.max(originWidth, originHeight); | ||
|
||
if (maxSize <= maxWidthOrHeight) { | ||
return { width: originWidth, height: originHeight }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오 이미지 원본의 너비/높이가 너비/높이 제한값
이하이면, 원본의 너비/높이를 그대로 사용하는 로직 맞나요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네 맞습니다 👍
|
||
if (originWidth === maxSize) { | ||
const width = maxWidthOrHeight; | ||
const height = Number(((originHeight * maxWidthOrHeight) / originWidth).toFixed(1)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이거 혹시 무슨 계산인지 한번에 안 와닿아서 그러는데 예시로 설명해주실 수 있나요..?🤔😂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
궁금한 부분은 대면으로 해결했습니다!
갓우스
🔥 연관 이슈
close: #683
📝 작업 요약
⏰ 소요 시간
1시간
🔎 작업 상세 설명
처리하는 시간
네트워크 부하 (자바스크립트 코드로 처리하기 때문에 네트워크 속도와는 관련이 없음)
처리 속도 : 6ms
맥북 에어(cpu 6배 부하)
처리 속도: 20ms
웹팩 번들 크기 비교
####Browser Image Compression
크기: 55kb
upload-images-converter
크기: 5kb
🌟 논의 사항
크루들과 이야기 해보고 싶은 부분을 적어주세요.