[FE] feat: Brotli 압축 적용 #680
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Brotli를 지원하지 않는 브라우저를 대비 해, 원본 파일을 삭제하지 않도록 함
BadaHertz52
commented
Sep 24, 2024
| quality: 11, // 최대 압축률 (0~11 사이, 기본값: 11) | ||
| deleteOriginalAssets: false, // 원본 파일을 삭제하지 않음 | ||
| }), | ||
| //new BundleAnalyzerPlugin(), |
There was a problem hiding this comment.
Threshold (896 bytes, 즉 8KB)
8KB 이상의 파일만 압축하는 이유는, 작은 파일은 압축했을 때 파일 크기가 크게 줄어들지 않으며, 오히려 압축하는 데 드는 시간이 파일 전송 시간보다 오래 걸릴 수 있어요. 이로 인해, 너무 작은 파일은 압축하지 않고 그대로 전송하는 것이 더 효율적일 수 있어요.
webpack GitHub
minRatio (0.8)
압축 후 파일 크기가 원본의 80% 이하로 줄어드는 경우에만 압축하는 설정이에요. 이 값은 압축했을 때 실질적인 크기 감소가 이루어지지 않으면 압축을 하지 않도록 하는 역할을 해요. 예를 들어, 1000바이트 파일을 압축해서 800바이트 이하로 줄어들지 않으면 압축을 적용하지 않아요. 이는 압축을 했을 때 얻는 이점이 없을 경우 불필요한 작업을 피하기 위해 사용해요(
GitHub PixelFreeStudio Blog
There was a problem hiding this comment.
1KB=1024Byte이기 때문에 8KB를 threshold로 잡으려면 threshold=8192로 잡아야 할 것 같아요!
ImxYJL
approved these changes
Sep 24, 2024
frontend/webpack.config.js
Outdated
Comment on lines
63
to
68
| asset: '[path].br[query]', // .br 확장자 설정 | ||
| test: /\.(js|jsx|ts|tsx|css|html|svg|ico)$/, // 압축할 파일 유형 | ||
| threshold: 896, // 8KB 이상의 파일만 압축 | ||
| minRatio: 0.8, // 압축 후 80% 이하로 줄어든 파일만 압축 | ||
| quality: 11, // 최대 압축률 (0~11 사이, 기본값: 11) | ||
| deleteOriginalAssets: false, // 원본 파일을 삭제하지 않음 |
chysis
approved these changes
Sep 24, 2024
soosoo22
approved these changes
Sep 24, 2024
skylar1220
added a commit
that referenced
this pull request
Sep 26, 2024
* refactor: 리뷰의 답변 매핑 시, 필수가 아닌 질문 중 작성되지 않은 질문을 매핑하지 않도록 변경 * refactor: 사용하지 않는 상수 제거 * test: 필수가 아닌 질문이 답변되지 않을 경우 매핑 로직에 대한 테스트 작성 * [FE] feature: 리뷰 연결, 목록, 상세 페이지의 반응형 레이아웃 구현 (#630) * feat: ReviewZonePage 미디어 쿼리 적용 * feat: Footer에 미디어 쿼리 적용 * refactor: ReviewGuide 사이즈 조절 * feat: 리뷰미 Topbar 로고에 미디어 쿼리 적용 * feat: PasswordModal에 미디어 쿼리 적용 * feat: ContentModal에 미디어 쿼리 적용 * refactor: AlertModal의 확인 버튼 minWidth를 % 단위로 수정 * feat: DetailedReviewPage에 반응형 도입 * feat: ReviewListPage에 반응형 도입 * refactor: DetailedReviewPage의 Description에 반응형 padding 추가 * refactor: 변경된 media 유틸 형식에 맞게 미디어 쿼리 코드 수정 및 사이즈 내림차순 정렬 * refactor: 누락된 파일 업로드 * refactor: ContentModal에 스타일 prop 추가 * refactor: PasswordModal 스타일 수정 - maxWidth 설정 및 디테일 조절 * fix: 공통 컴포넌트인 ContentModal에서 특정 모달 스타일을 위한 코드 제거 * refactor: ContentModal에 style prop 추가 * refactor: ContentModal의 미디어 쿼리 적용에 따른 padding 감소를 무효화하기 위한 PasswordModal 코드 추가, 에러 메세지를 보여주는 스타일 개선 * [FE] refactor: scrollToTop을 유틸함수로 분리 (#637) * refactor: scrollToTop을 유틸 함수로 변경 * refactor: scrollToTop 유틸 함수 적용 * refactor: scrollToTop 관련 파일명 변경 및 export 방식 변경 * refactor: debounce 함수 선언문을 함수 표현문으로 변경 및 export 방식 변경 * refactor: isExistentElement export 방식 변경 * [BE] refactor: 패키지 `mapper`, `validator` 분리 (#598) * refactor: 패키지 `mapper`, `validator` 분리 * refactor: TemplateMapper 패키지명 변경 * refactor: PreviewGenerator 사용되는 패키지로 이동 * [FE] feat: 리뷰 홈 페이지 반응형 구현 (#633) * feat: 320px 이하 화면 크기를 위한 xxSmall 반응형 구현 * refactor: 상위 컨테이너에서 자식 요소로 스타일 지정 이동 * feat: 425px 이하 화면 크기를 위한 xSmall 반응형 구현 * feat: 768px 이하 화면 크기를 위한 small 반응형 구현 * refactor: 캐러셀 height 조정 * feat: 1024px 이하 화면 크기를 위한 medium 반응형 구현 * design: 캐러셀 position 제거 및 위치 조정 * feat: 화면 크기에 따른 홈 페이지 내 AlertModal 반응형 구현 * refactor: 수정된 media 유틸 적용 * design: URL 복사하기 버튼을 "리뷰 요청 URL" 텍스트 옆으로 이동 * design: 캐러셀 영역과 리뷰 폼 사이 간격 증가 * [FE] design : body에 단어 단위로 줄 바꿈 되는 속성 추가 (#635) * design: body에 word-break:kepp-all 적용 * design : body에 단어 단위 줄 넘기 추가로 인해 이전에 적용된 word-break 삭제 * design:ReviewZoneURLModal data에 word-break: break-all 적용 * [FE] fix: 리뷰 제출 확인 모달 border, border-radius 복원 (#647) * design: ReviewWritingCardLayout 에 border 속성 적용 * design : CardSlider에 border 속성 삭제 * refactor: ReviewWritingCard에 children props 추가 - ReviewWritingCardLayout에 적용한 border를 리뷰 작성 폼에 맞추어서 넣기 위해서, 이전/다음/제출/제출전 확인 버튼을 담은 ButtonContainer를 ReviewWritingCard의 children으로 주어야함 * [FE] feature: Breadcrumb 컴포넌트에 반응형 추가 (#645) * feat: Breadcrumb 컴포넌트에 반응형 코드 추가 * chore: 폰트 크기에 theme 반영 * [BE] refactor: DB 접근을 최소화 하도록 개선 (#617) * refactor: ReviewDetailMapper DB 쿼리 접근을 줄일 수 있도록 리팩토링 * refactor: ReviewListMapper DB 쿼리 접근을 줄일 수 있도록 리팩토링 * refactor: ReviewListMapper stream 연산 개선 * refactor: ReviewDetailMapper 불필요한 검증 로직 제거 * refactor: 사용하지 않는 쿼리 삭제 및 left join 제거 * refactor: optionGroup -> optionGroup 대신 Function::identity 사용 * test: 네이티브 쿼리 테스트 작성 및 사용하지 않는 쿼리 테스트 삭제 * style: 주석 제거 * Revert "refactor: ReviewListMapper stream 연산 개선" This reverts commit d472d1f. * refactor: ReviewCategoryResponse 매핑 구조 변경 * [FE] fix : 리뷰 제출 페이지에서 리뷰 대상(프로젝트,리뷰이)사라지는 오류 해결 (#651) * fix: CardFormWrapper 스타일을 만들어서 CardForm overflow로 인한 스타일 오류를 수정 * design: 320px에서 리뷰 제출 버튼 폰트 사이즈 수정 * design: 리뷰 작성 폼 버튼 반응형 스타일 변경 * fix: 리뷰 카드 border가 사라지는 오류 수정 * fix: 320px 에서 마지막 카드에 대한 캐러셀 오류 수정 - 오류: 마지막 카드로 넘길 때, 320px 뷰포트에서 카드가 다 넘어가지 않는 오류 - 오류 원인: 마지막 카드 순서에서 캐러셀의 카드 width가 CardForm의 width보다 작아짐 - 해결: Slide 스타일 컴포넌트에 width를 부모의 100%로 지정 * style: styelint 적용되지 않은 코드에 이를 적용 (#657) * [FE] fix : 반응형 오류 및 디자인 수정, 리뷰 목록 페이지 Description border-radius 오류 수정 (#655) * fix: ContentModal min-height 단위를 vh에서 %로 수정 - 모바일 브라우저 네이티브 바에 의해 동적으로 변하는 뷰포트 높이에 맞추기 위해 vh가 아닌 %를 사용 * fix: 리뷰 상세 페이지 Description 스타일 컴포넌트의 border radius 오류 수정 * [FE] feat: 리뷰 목록 페이지에서, 받은 리뷰가 없을 때 보여주는 널 페이지에 반응형 적용 및 그에 따른 기존 스타일 일부 수정 (#653) * feat: 리뷰 목록 페이지에서, 받은 리뷰가 없을 때 보여주는 널 페이지에 반응형 적용 및 그에 따른 기존 스타일 일부 수정 * fix: min-height을 상속받도록 변경 * [FE] feat: 모바일 환경에서 홈 페이지 캐러셀 드래그 기능 구현 (#658) * feat: 모바일 환경에서 캐러셀 드래그 기능 구현 * refactor: 이전, 다음 화살표 이미지 추가 후 적용 * refactor: MouseEvent 제거 * chore: 설명이 필요한 구간 주석 추가 * refactor: translate3d px을 rem으로 단위 변경 * refactor: 캐러셀 버튼에 대한 이미지 내용임을 알려주기 위해 alt 수정 * [FE] fix : ErrorAlertModal 가운데 정렬 오류 수정 (#662) * style: styelint 적용되지 않은 코드에 이를 적용 * fix: ErrorAlertModal의 가운데 정렬 오류 수정 - Contents에 width를 부모 너비로 설정하지 않아 오류가 발생 * design: SubmitErrorModal의 Message width 지정 * design: 425px이하에서 ErrorAlerModal 느낌표 아이콘 사이즈 조정 * chore: CardForm 모바일에서 margin:0 auto 삭제 - 부모에서 flex로 가운데 정렬하고 있어서 필요 없음 * fix: SubmitCheckModal에서 줄넘김 되도록 width 설정 변경 * [FE] refactor: Footer 반응형 경계값을 small(태블릿 세로 모드)로 수정 (#660) * refactor: Footer 반응형 경계값을 small(태블릿 세로 모드)로 수정 * refactor: Footer 반응형 경계를 xSmall(모바일)로 수정 * chore: stylelint 적용 * [FE] feat: 리뷰 작성 완료 페이지 반응형 구현 (#672) * feat: 작성 완료 페이지에 사용될 스마일 이미지 추가 * feat: 리뷰 작성 완료 페이지에 스마일 이미지 적용 및 반응형 구현 * feat: 리뷰 작성 완료 페이지 반응형 max-width 425px 기준으로 적용 * chore: 불필요한 코드 제거 * [FE] feat: Brotli 압축 적용 (#680) * ci: brotli-webpack-plugin 설치 * fix: 웹팩 설정에 중복된 sentry 속성 삭제 * feat: Brotli 압축 적용 - Brotli를 지원하지 않는 브라우저를 대비 해, 원본 파일을 삭제하지 않도록 함 * feat: 파비콘도 Brotli로 압축 * fix: Brotli threshold 수정 * [BE] fix: `Internal server error` 오타 수정 (#648) * design: 체크 선택 시, AlertModal 내 버튼 색상을 primary 색상으로 변경 (#678) * [BE] infra: 어플리케이션 도커로 배포 (#673) * infra: 어플리케이션 도커로 배포 Co-authored-by: Kimprodp <145949635+kimprodp@users.noreply.github.com> * infra: APPLICATION_DIRECTORY 경로 수정 * infra: 오타 수정 --------- Co-authored-by: Kimprodp <145949635+kimprodp@users.noreply.github.com> Co-authored-by: KIMGYUTAE <kiimwf0819@gmail.com> * [BE] fix: CD 스크립트 수정 (#688) * [BE] chore: remove swagger-related files (#686) * [BE] fix: remove unintended character in configuration file (#689) * infra: matrix 설정을 통해 다중 runner 적용 (#694) * infra: prod cd 스크립트를 도커 활용하도록 변경 (#696) * [BE] infra: 운영 환경 DB에 Replication 적용 (#687) * feat: replication을 위한 config 추가 * refactor: read, write 요청 분리를 위한 readOnly 적용 * refactor: profile 적용 * style: 개행 추가 * refactor: readOnly 변수명 변경 * refactor: dataSourceType enum 적용 및 상수화 * chore: osiv 해제 * infra: 테스트 환경에서 flyway 적용하지 않도록 변경 * [BE] feat: 세션을 활용해 리뷰 조회 (#666) * feat: 뼈대 코드 추가, deprecation 어노테이션 추가 * feat: 세션을 활용하도록 기반 코드 작성 * feat: 세션쿠키 필터 추가 * feat: 가짜 세션 Mockmvc에 주입 * refactor: 세션을 적용하도록 API 수정 및 API 문서 적용 * style: 개행 * docs: 사용되지 않는 문서 부분 삭제 * fix: 쿠키 전달을 위한 `allowCredentials` 설정 * refactor: v2로 변경 및 테스트 수정 * refactor: 사용하지 않는 메서드/테스트 제거 * chore: 쿠키 명시적으로 설정, 보안 설정 * test: CORS 테스트 작성 * chore: remove unused files * refactor: 주소 외부에서 관리 * refactor: 메시지 수정 * chore: 예외 주석 수정 * [BE] infra: flyway를 통한 인덱스 적용 (#690) * infra: 리뷰, 리뷰 그룹 테이블에 인덱스 추가 * infra: 테스트 환경에서 flyway 적용하지 않도록 변경 * infra: 변경 사항 설명을 위한 링크 주석 추가 * infra: 주석 기호 오류 수정 * [FE] fix: threshold 오타 수정 (#685) * ci: brotli-webpack-plugin 설치 * fix: 웹팩 설정에 중복된 sentry 속성 삭제 * feat: Brotli 압축 적용 - Brotli를 지원하지 않는 브라우저를 대비 해, 원본 파일을 삭제하지 않도록 함 * feat: 파비콘도 Brotli로 압축 * fix: Brotli threshold 수정 * fix: threshold 오타 수정 * [FE] feat: 프로그레스 바 반응형으로 구현 (#642) * design: medium 이상의 프로그레스 바를 container로 감싸서 화면 중앙 정렬 * feat: 모바일 프로그레스 바 컴포넌트 작성 * feat: 작성 폼 카드를 이동할 때마다 모바일 프로그레스 바도 함께 이동하도록 구현 * feat: 리뷰 작성 페이지의 해상도에 따라 다른 프로그레스 바를 보여주도록 구현 * design: 모바일에서 아직 완료되지 않고, 현재 위치가 아닌 stepButton에 border 설정 * fix: 스크롤이 작동하지 않는 문제 수정 * chore: alt 속성 한국어로 작성 * refactor: 자동 스크롤 로직에 requestAnimationFrame 적용 * chore: map으로 반복되는 요소의 최상단에 key prop 설정 * fix: 중복되는 UI 제거 * fix: 모바일 환경에서 프로그레스 바가 넘어가지 않는 문제 수정 * fix: 카드 이동 시 프로그레스 바 애니메이션과 충돌하는 문제 완화 * chore: 꾸미는 용도의 이미지에서 alt 속성 제거 * design: 불필요한 margin 제거 * chore: 프로그레스 바 연결선 변경 * design: stepButton min-width, max-width 수정 * [FE] refactor: 비밀번호 확인, 리뷰 목록 및 리뷰 상세 정보 요청 API 변경에 따른 리팩토링 (#695) * refactor: 리뷰 목록 페이지 및 상세 리뷰 페이지 url에 reviewRequestCode 추가 * refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 api 호출 함수 및 리액트 쿼리 훅 변경 * refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 리액트 쿼리 훅 테스트 변경 * refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 mocking handler 변경 * refactor: 리뷰 목록, 상세 리뷰 페이지 URL 변경에 따른 breadCrumb Path 수정 * refactor: ErrorSuspenseContainer가 fallback을 optional 매개변수로 받을 수 있게 변경 및 네비게이션 함수의 이름을 보다 일반적으로 수정 * feat: 리뷰 목록, 리뷰 상세 페이지를 위한 AuthAndServerErrorFallback 및 section 작성 * refactor: 리뷰 목록, 상세 리뷰 페이지에 새 ErrorSuspenseContainer와 API 호출 함수 반영 * refactor: ErrorSuspenseContainer의 기본 인자로 기본 fallback 할당 * chore: 불필요한 훅과 atom 삭제 * chore: LoginRedirectModal 삭제 * chore: 삭제 파일에서 누락된 파일 삭제 * test: 간헐적으로 실패하는 테스트의 expect 함수를 waitFor 내부로 이동 * [FE] feat : 목 서버에서 세션 쿠키 사용하는 추가 및 확인하는 기능 추가 (#698) * refactor: 리뷰 목록 페이지 및 상세 리뷰 페이지 url에 reviewRequestCode 추가 * refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 api 호출 함수 및 리액트 쿼리 훅 변경 * refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 리액트 쿼리 훅 테스트 변경 * refactor: 비밀번호 검증, 리뷰 목록 요청, 상세 리뷰 요청 API 변경에 따른 mocking handler 변경 * refactor: 리뷰 목록, 상세 리뷰 페이지 URL 변경에 따른 breadCrumb Path 수정 * refactor: ErrorSuspenseContainer가 fallback을 optional 매개변수로 받을 수 있게 변경 및 네비게이션 함수의 이름을 보다 일반적으로 수정 * feat: 리뷰 목록, 리뷰 상세 페이지를 위한 AuthAndServerErrorFallback 및 section 작성 * refactor: 리뷰 목록, 상세 리뷰 페이지에 새 ErrorSuspenseContainer와 API 호출 함수 반영 * refactor: ErrorSuspenseContainer의 기본 인자로 기본 fallback 할당 * chore: 불필요한 훅과 atom 삭제 * chore: LoginRedirectModal 삭제 * chore: 삭제 파일에서 누락된 파일 삭제 * test: 간헐적으로 실패하는 테스트의 expect 함수를 waitFor 내부로 이동 * feat: 비밀번호 조회 목 핸들러에 mockAuthToken 생성하는 기능 추가 * feat: 목록, 상세 페이지 목 핸들러에 쿠키 확인하는 기능 추가 * fix: 리뷰 목록 목 데이터에서 reviewId 중복 수정 * fix: 목 핸들러에서 쿠키 없을 때 response status 변경 * fix: 리뷰 목록/상세 페이지 테스트에 쿠키 설정 추가해 테스트 오류 수정 * refactor: useGetDetailedReview에서 불필요한 코드 삭제 * refactor: review 목 핸들러 if문 코드 개선 --------- Co-authored-by: ImxYJL <allensain14@gmail.com> * refactor: 서술형, 객관식 질문의 빈값 검증 수정 * style: 괄호 위치 및 개행 수정 * refactor: 리뷰의 답변 매핑 시, 필수가 아닌 질문 중 작성되지 않은 질문을 매핑하지 않도록 변경 * refactor: 사용하지 않는 상수 제거 * test: 필수가 아닌 질문이 답변되지 않을 경우 매핑 로직에 대한 테스트 작성 * refactor: 서술형, 객관식 질문의 빈값 검증 수정 * style: 괄호 위치 및 개행 수정 --------- Co-authored-by: ImxYJL <111052302+ImxYJL@users.noreply.github.com> Co-authored-by: badahertz52 <badahertz52@gmail.com> Co-authored-by: Donghoon Lee <aru0504@naver.com> Co-authored-by: sooyeon <lllllh00@naver.com> Co-authored-by: Hyeonji <110809927+skylar1220@users.noreply.github.com> Co-authored-by: Fe <64690761+chysis@users.noreply.github.com> Co-authored-by: ImxYJL <allensain14@gmail.com> Co-authored-by: hyeonjilee <skylar12200@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 어떤 기능을 구현했나요 ?
🔥 어떻게 해결했나요 ?
왜 Brotli로 압축했나요?
CloudFront에서 클라이언트 Accept-Encoding 헤더에 따라 압축을 하는 것보다, S3에 압축된 파일을 올리면 리소스 로딩 시 압축 시간이 제외되니 로딩 속도가 더 빨라요.
Gzip이 아닌 Brotli를 사용한 이유는 Brotli는 Gzip에 비해 압축률이 20-25%더 높고 압축해제도 더 빠르며, 리뷰미 서비스 대상 브라우저에서 다 지원하고 있어요
(해당 브라우저의 아주~옛날 버전은 미지원, 지원 범위 확인:https://caniuse.com/brotli)
Brotli로 압축하고 압축되지 않은 파일은 유지한 이유?
리뷰미 서비스 대상 브라우저는 Brotli를 지원하지만, 그렇지 못한 상황도 대비하기 위함이에요. 원본 파일을 같이 S3에 올려서 클라이언트의 Accept-Encoding 값에 따라 CloudFront가 알아서 리소스를 압축해 제공하도록 했어요.
Brotli 압축 결과
📝 어떤 부분에 집중해서 리뷰해야 할까요?
📚 참고 자료, 할 말