[Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소 #466
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
|
Deploying sopt-recruiting-frontend-test with
|
| Latest commit: |
de4fdb6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b2a0849b.sopt-recruiting-frontend-test.pages.dev |
| Branch Preview URL: | https://refactor--459-lottie-react.sopt-recruiting-frontend-test.pages.dev |
lydiacho
approved these changes
Oct 14, 2024
eonseok-jeon
added a commit
that referenced
this pull request
Jan 28, 2025
* [Refactor] context provider를 컴포넌트로 분리 (#437) * refactor: device type provider component로 분리 * chore: alias 추가 * refactor: useDeviceType 적용 * refactor: recruiting info provider component로 분리 * refactor: useRecruitingInfo 적용 * refactor: theme provider component로 분리 * refactor: useTheme 적용 * docs: 기존 파일 제거 * chore: 에러 메세지 수정 * chore: 변수명 통일 * chore: 불필요한 export 제거 * [Refactor] 번들 크기 개선 - 1 (#434) * buil: bundle size visualizer 설치 * refactor: lottie 관련 필요 기능만 구현하기 * build: light 버전 import * chore: lottie file size 줄이기 * [Refactor] 번들 크기 개선 - 2 (#435) * build: date-fns locale import 범위 좁히기 * chore: 코드 복구 * [Refactor] 번들 크기 개선 - 3 (#432) * refactor: lazy loading 적용 * refactor: dialogs들에도 lazy import 적용 * build: manual chunk 적용 * chore: visualizer 자동 open option 제거 * [Feat] 테스트 코드 초기 세팅 (#439) * build: library 설치 * feat: lint 설정 * feat: config 설정 * feat: custom render 생성 * build: library 추가 설치 * feat: test setup 파일 추가 * chore: alias 추가 * fix: custon render option 속성 optional 하게 받기 * chore: 주석 제거 * build: test library 버전업 * fix: custom render type 수정 * feat: custom render에 memory router 추가 * feat: custom render에 query client provider 추가 * fix: fillStyle을 null로 설정할 수 없는 에러 해결 * fix: test 환경에 modal div 생성 * fix: custom render에 form provider 추가 * fix: window 함수 선언 * docs: README 수정 * [Chore] reviewer에 주용이 추가 (#443) * chore: 주용이 추가 * [Refactor] token 필요없는 fetch custom hook 만들기 (#445) * feat: 기존 axios instace -> fetch instance로 대체 * refactor: 기존 코드 fetch instance로 변경 * refactor: headers type 제한 * feat: instace option method type 제한 * [Refactor] ApplyPage 로직 분리 - 1 (#441) * chore: 관심사 끼리 분류 * refactor: 페이지 이탈 alert custom hook으로 분리 * refactor: isReview 전역 변수로 빼기 * refactor: apply page loading 제거 * feat: useDialog hook 생성 * refactor: useDialog 적용 * chore: dialog들 Form Provider 바깥으로 빼기 * chore: 오타 제거 * refactor: isReview 전역변수 제거 * feat: useEventListener custom hook 제작 * refactor: useEventListener 적용 * [Feat] env 개발 환경 분리하기 (#448) * feat: env 분리 * feat: build 명령어 분리 * fix: build 명령어 수정 * [Feat] 환경변수를 활용한 동적 메타태그 구현 (#455) * install: react-helmet-async 설치 * feat: provider 추가 * feat: index.html에서 helmet으로 이동 * feat: URL 추가 * fix: isMakers context->env로 가져오기 * chore: 테스트용 연산자 제거 * fix: 환경변수 말고 MODE 활용 * fix: useDate 내부 isMakers도 수정 * [Refactor] fetch instance 기능 보강 (#450) * feat: error 처리 로직 세분화를 위한 custom error 생성 * feat: params 처리 * feat: form data 처리 * refactor: instance 적용 * chore: fetcher로 이름 변경 * [Feat] browserslist 추가 (#452) * feat: browserslist 추가 * feat: 지원되는 browser 파악하는 regex 생성 * design: 지원 안 되는 브라우저 안내 페이지 생성 * feat: browser 판단 로직 구현 * fix: supported browsers ts로 변경 * [Design] 지원 안 되는 브라우저 안내 페이지 퍼블리싱 (#464) * design: 지원되지 않는 페이지 퍼블리싱 * fix: icon들 png -> svg 변경 * desing: 반응형 구현 * design: 중앙 정렬 * fix: 문의하기 링크 수정 * design: 높이 수정 * design: header 추가 * design: layout 추가 * design: css 수정 * design: sopt logo 변경 * fix: 비교 연산자 수정 * [Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기 (#465) * feat: unsupported page html 파일 생성하기 * fix: 지원 안되는 브라우저 경로 수정 * design: 문장 사이 공백 추가 * refactor: script 위치 수정 * design: css 파일 추출 * refactor: build 명령어 수정에 따른 html, css 파일 수정 * refactor: renderToStaticMarkup으로 변경 * feat: gitignore에 unsupported.html 추가 * design: css 수정 * [Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소 (#466) * chore: 사용 안되는 컴포넌트 제거 * refactor: lottie-react로 변경 * refactor: patch를 이용하여 lottie-web/light 버전 이용 * docs: read me 수정 * [Feat] MSW 도입 (#453) * install: msw 설치 * feat: generate worker script * feat: msw 기본 코드 테스트 * chore: amplitude 주석처리 * chore: 주석 해제 * [Refactor] date-fns 라이브러리 제거 (#469) * feat: isBefore, isAfter 함수 구현 * feat: differenceInSeconds 함수 구현 * feat: subMinutes 함수 구현 * feat: format 함수 구현 * remove: Intl 덜어내기 * feat: string -> Date 형변환 처리 추가 * remove: test 용 파일 삭제 * remove: date-fns 라이브러리 삭제 * feat: EEEE RegExp 추가 * fix: toDate 함수 분리 * fix: 요일 인덱스 버그 픽스 * fix: toDate 적용 및 throw Error -> console error로 수정 * fix: throw Error 코드 복구 * fix: chrome 판단 regex 수정 (#470) * [Refactor] OpenAPI를 이용하여 api interface 추출하기 (#472) * feat: openapi spec을 이용한 api interface 생성 * feat: api interface를 가지는 fetcher 생성 * feat: 각 api에 맞는 interface 추출하기 위한 명령어 작성 * chore: 명령어 실행 * feat: gitattributes 설정 * fix: 명령어 폴더명 수정 * fix: 빌드 에러 수정 * [Refactor] Amplitude tracking 로직 컴포넌트로 분리 (#473) * feat: amplitude event track component 생성 * feat: Button component에 Amplitude event track component 감싸기 * refactor: amplitude event track component 적용 * fix: build error * fix: build error * fix: 지원되지 않는 브라우저 로직 수정 --------- Co-authored-by: lydiacho <[email protected]>
eonseok-jeon
added a commit
that referenced
this pull request
Jan 28, 2025
* [Refactor] context provider를 컴포넌트로 분리 (#437) * refactor: device type provider component로 분리 * chore: alias 추가 * refactor: useDeviceType 적용 * refactor: recruiting info provider component로 분리 * refactor: useRecruitingInfo 적용 * refactor: theme provider component로 분리 * refactor: useTheme 적용 * docs: 기존 파일 제거 * chore: 에러 메세지 수정 * chore: 변수명 통일 * chore: 불필요한 export 제거 * [Refactor] 번들 크기 개선 - 1 (#434) * buil: bundle size visualizer 설치 * refactor: lottie 관련 필요 기능만 구현하기 * build: light 버전 import * chore: lottie file size 줄이기 * [Refactor] 번들 크기 개선 - 2 (#435) * build: date-fns locale import 범위 좁히기 * chore: 코드 복구 * [Refactor] 번들 크기 개선 - 3 (#432) * refactor: lazy loading 적용 * refactor: dialogs들에도 lazy import 적용 * build: manual chunk 적용 * chore: visualizer 자동 open option 제거 * [Feat] 테스트 코드 초기 세팅 (#439) * build: library 설치 * feat: lint 설정 * feat: config 설정 * feat: custom render 생성 * build: library 추가 설치 * feat: test setup 파일 추가 * chore: alias 추가 * fix: custon render option 속성 optional 하게 받기 * chore: 주석 제거 * build: test library 버전업 * fix: custom render type 수정 * feat: custom render에 memory router 추가 * feat: custom render에 query client provider 추가 * fix: fillStyle을 null로 설정할 수 없는 에러 해결 * fix: test 환경에 modal div 생성 * fix: custom render에 form provider 추가 * fix: window 함수 선언 * docs: README 수정 * [Chore] reviewer에 주용이 추가 (#443) * chore: 주용이 추가 * [Refactor] token 필요없는 fetch custom hook 만들기 (#445) * feat: 기존 axios instace -> fetch instance로 대체 * refactor: 기존 코드 fetch instance로 변경 * refactor: headers type 제한 * feat: instace option method type 제한 * [Refactor] ApplyPage 로직 분리 - 1 (#441) * chore: 관심사 끼리 분류 * refactor: 페이지 이탈 alert custom hook으로 분리 * refactor: isReview 전역 변수로 빼기 * refactor: apply page loading 제거 * feat: useDialog hook 생성 * refactor: useDialog 적용 * chore: dialog들 Form Provider 바깥으로 빼기 * chore: 오타 제거 * refactor: isReview 전역변수 제거 * feat: useEventListener custom hook 제작 * refactor: useEventListener 적용 * [Feat] env 개발 환경 분리하기 (#448) * feat: env 분리 * feat: build 명령어 분리 * fix: build 명령어 수정 * [Feat] 환경변수를 활용한 동적 메타태그 구현 (#455) * install: react-helmet-async 설치 * feat: provider 추가 * feat: index.html에서 helmet으로 이동 * feat: URL 추가 * fix: isMakers context->env로 가져오기 * chore: 테스트용 연산자 제거 * fix: 환경변수 말고 MODE 활용 * fix: useDate 내부 isMakers도 수정 * [Refactor] fetch instance 기능 보강 (#450) * feat: error 처리 로직 세분화를 위한 custom error 생성 * feat: params 처리 * feat: form data 처리 * refactor: instance 적용 * chore: fetcher로 이름 변경 * [Feat] browserslist 추가 (#452) * feat: browserslist 추가 * feat: 지원되는 browser 파악하는 regex 생성 * design: 지원 안 되는 브라우저 안내 페이지 생성 * feat: browser 판단 로직 구현 * fix: supported browsers ts로 변경 * [Design] 지원 안 되는 브라우저 안내 페이지 퍼블리싱 (#464) * design: 지원되지 않는 페이지 퍼블리싱 * fix: icon들 png -> svg 변경 * desing: 반응형 구현 * design: 중앙 정렬 * fix: 문의하기 링크 수정 * design: 높이 수정 * design: header 추가 * design: layout 추가 * design: css 수정 * design: sopt logo 변경 * fix: 비교 연산자 수정 * [Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기 (#465) * feat: unsupported page html 파일 생성하기 * fix: 지원 안되는 브라우저 경로 수정 * design: 문장 사이 공백 추가 * refactor: script 위치 수정 * design: css 파일 추출 * refactor: build 명령어 수정에 따른 html, css 파일 수정 * refactor: renderToStaticMarkup으로 변경 * feat: gitignore에 unsupported.html 추가 * design: css 수정 * [Refactor] lottie-react 재도입 및 patch를 이용한 번들 사이즈 감소 (#466) * chore: 사용 안되는 컴포넌트 제거 * refactor: lottie-react로 변경 * refactor: patch를 이용하여 lottie-web/light 버전 이용 * docs: read me 수정 * [Feat] MSW 도입 (#453) * install: msw 설치 * feat: generate worker script * feat: msw 기본 코드 테스트 * chore: amplitude 주석처리 * chore: 주석 해제 * [Refactor] date-fns 라이브러리 제거 (#469) * feat: isBefore, isAfter 함수 구현 * feat: differenceInSeconds 함수 구현 * feat: subMinutes 함수 구현 * feat: format 함수 구현 * remove: Intl 덜어내기 * feat: string -> Date 형변환 처리 추가 * remove: test 용 파일 삭제 * remove: date-fns 라이브러리 삭제 * feat: EEEE RegExp 추가 * fix: toDate 함수 분리 * fix: 요일 인덱스 버그 픽스 * fix: toDate 적용 및 throw Error -> console error로 수정 * fix: throw Error 코드 복구 * fix: chrome 판단 regex 수정 (#470) * [Refactor] OpenAPI를 이용하여 api interface 추출하기 (#472) * feat: openapi spec을 이용한 api interface 생성 * feat: api interface를 가지는 fetcher 생성 * feat: 각 api에 맞는 interface 추출하기 위한 명령어 작성 * chore: 명령어 실행 * feat: gitattributes 설정 * fix: 명령어 폴더명 수정 * fix: 빌드 에러 수정 * [Refactor] Amplitude tracking 로직 컴포넌트로 분리 (#473) * feat: amplitude event track component 생성 * feat: Button component에 Amplitude event track component 감싸기 * refactor: amplitude event track component 적용 * fix: build error * fix: build error * fix: 지원되지 않는 브라우저 로직 수정 * 배포 전 점검 (#475) * fix: build 명령어 수정 * fix: 오티 날짜 수정 * refactor: 기수 배열 자동으로 계산 * fix: 이름, 이메일, 전화번호 자동으로 안 채워지는 에러 해결 * fix: 파일 업로드 실패 시 업로드 상태 초기화 * refactor: 불필요한 props 제거 * fix: 임시저장 안 불러와지는 에러 해결 * fix: makers일 경우 knownPath에 빈 값 실어보내기 * fix: 빌드 에러 해결 * fix: 서류 결과 확인 에러 수정 * fix: 최종 결과 페이지 날짜 에러 해결 * chore: 코드 원상복구 --------- Co-authored-by: lydiacho <[email protected]>
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.
Related Issue : Closes #459
🧑🎤 Summary
🧑🎤 Screenshot
[수정 전 전체 번들사이즈]
[수정 후 전체 번들사이즈]
[수정 전 lottie 번들사이즈]
[수정 후 lottie 번들사이즈]
🧑🎤 Comment
lottie-web/light 버전을 이용하기 위해 lottie-react에서 lottie-web으로 migration을 해줬는데요
그럴 필요 없이 patch를 이용해서 library를 수정할 수 있더라고요
yarn v2 이상에선 yarn patch를 이용해주면 되었지만
yarn v1를 사용하고 있었기에 patch-package를 이용해줬어요
node_modules/lottie-react 에 있는 파일을 수정해준 뒤
yarn patch-package lottie-react를 통해 patch 해주었어요똑같이 300KB 정도 세이브 해줄 수 있었습니다 :)