[Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기 #465
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
|
eonseok-jeon
force-pushed
the
design/#457_unsupported
branch
from
4c8de77 to
412ecbc
Compare
eonseok-jeon
force-pushed
the
feat/#456_pre-render
branch
from
92e7df3 to
99a3eff
Compare
Deploying sopt-recruiting-frontend-test with
|
| Latest commit: |
0ab668b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e8376b0d.sopt-recruiting-frontend-test.pages.dev |
| Branch Preview URL: | https://feat--456-pre-render.sopt-recruiting-frontend-test.pages.dev |
eonseok-jeon
force-pushed
the
feat/#456_pre-render
branch
from
99a3eff to
0ab668b
Compare
wuzoo
approved these changes
Oct 11, 2024
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 #457
🧑🎤 Summary
🧑🎤 Comment
🧑🏻🔧 실행법
🧑🏻🔧 pre-render
사실상 해당 페이지는 거의 보여질 필요가 없을 텐데 매번 번들링 과정에 포함되는 건 불필요하다 생각했어요
따라서 build 시에 html 파일을 추출하여 성능 저하가 되지 않도록 해줬어요 (pre-render)
vite에서 ssr, ssg을 지원하고 있더라고요
안내 페이지에는 별다른 인터렉션 요소가 없기에
renderToStaticMarkup를 이용하여 정적 페이지를 생성해줬어요🧑🏻🔧 script 추가
번들링 과정에 포함시키지 않았기에 script를 별도로 생성해줬어요
script를 head 안에 async로 두어 비동기적으로 바로 실행되도록 해줬어요
🧑🏻🔧 빌드 명령어
yarn build와 yarn build:sopt 안에 html 파일을 추출하는 명령어도 같이 넣어주어
매 빌드 시 html 파일이 추출되도록 해줬어요
sopt용과 makers용을 분리하여 배포하고 있는데 어느 배포판인지에 따라 로고가 달라져야 해서 그랬습니다!
html 파일을 sopt용 makers용 2개 만들까도 했지만
100kb 파일 2개는 비효율적인 거 같아서
비록 빌드 시간이 5초 정도 늘었지만 해당 방법을 택하게 되었어요!
그렇기에 매 빌드 마다 unsupported.html 파일이 생성되게 되었는데 .gitignore에 추가해주어 커밋이 안 되게 해줬어요
🧑🏻🔧 css 파일 추출
vanillaExtractPlugin()가 설치되어 있기에 빌드 시 css 파일이 자동으로 추출되었어요
이때 unsupported 페이지에 적용되는 css요소들만 묶어서 추출하기 위해 manualChunks를 이용해줬어요
이렇게 하면
dist/assets/unsuppretd-**.css파일이 생성되어 이를 바로 이용해주면 되거든요다만 css name이 DESK, TAB, MOB 이런 식으로 나와서, 이를 media query로 변환해주는 과정이 필요했어요
이는 gpt를 이용해서 빠르게 처리해줬습니다
이에 대한 더 자세한 내용은 언석 공부방 - browserslist에 적어놨습니다! :)