[Feat] 지원 안 되는 브라우저 안내 페이지 pre render 하기

[eonseok-jeon]

Related Issue : Closes #457

---

🧑‍🎤 Summary

• 지원 안 되는 브라우저 안내 페이지 pre render 로직 구현

🧑‍🎤 Comment

🧑🏻‍🔧 실행법

yarn build && yarn dev
yarn build:sopt && yarn dev:sopt

🧑🏻‍🔧 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에 적어놨습니다! :)

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend-test with    Cloudflare Pages

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

View logs

[wuzoo]

고생하셨습니다 !!

미지원 브라우저에 대한 검사 로직은 한 번도 해본 적이 없어서 신기하네용 ! 👍

[lydiacho]

언석공부방 꼼꼼히 작성해주신 덕분에 지끈지끈한 내용 천천히 이해하면서 읽을 수 있었습니다
고생하셨습니다 :) 👍 👍