[Feat] browserslist 추가

[eonseok-jeon]

Related Issue : Closes #451

---

🧑‍🎤 Summary

• browserslist 추가
• 지원 안되는 브라우저 판단 로직 추가

🧑‍🎤 Screenshot

Firefox는 126~99 사이에서만 지원을 허용하고 있었기에 96버전에서는 unsupported 안내 문구가 뜨는 걸 확인할 수 있었어요
디자인은 아직 안나와서 임시로 구현했어요
새로운 issue 파서 작업하며 될 거 같아요

🧑‍🎤 Comment

🦹🏼‍♀️ browserslist 추가

지원되는 browsers를 나타내는 browserslist를 추가했어요
기준은 google이 설정한 Baseline의 폭넓게 사용 가능으로 잡았어요
실제로 browserslist에서도 Baseline을 지원하는 query를 설정하는 작업을 시작하고 있고 있는 걸 확인할 수 있습니다!

Baseline에 대한 query는 browserslist issue에서 찾을 수 있었어요
하지만 browserslist를 보면 defulats가 아닌 custom으로 browsers를 설정할 경우 last 2 versions, not dead, > 0.2%를 추가하는 걸 권장하고 있었기에 해당 요소들도 추가해줬습니다
이때 이미 2.5years로 체크를 해주고 있었기에 last 2 versions는 넣을 필요가 없었고 그 외 나머지 not dead와 퍼센트 비율을 추가해줬어요 이때 퍼센트 비율은 제한을 더 줘도 괜찮을 거 같아서 0.3으로 올렸습니다 :)

🦹🏼‍♀️ 지원 안되는 브라우저 판단 로직 추가

browserslist-useragent-regexp를 이용해서 browserslist에 대한 regex를 얻었어요
실행법은 yarn supportedBrowsers입니다

이를 이용하여 지원 가능한 browser인지 판단하는 함수를 만들었고 이를 index.html에 script로 삽입했어요
Vite에서 번들링 과정에 포함되지 않고 브라우저 지원 체크가 빠르게 이루어지게 하기 위해서요
현재는 window.location.href = '/unsupported';처럼 unsupported 페이지로 이동시켜서 페이지를 새로고침한다는 단점이 있는 거 같아요 따라서 다른 방법으로 바꿔줄 생각입니다
이건 너무 길어질까봐 다음 pr에 올릴게요!

더 자세한 내용이 궁금하다면 언석 공부방 - 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.

[wuzoo]

미지원 브라우저에 대한 처리는 저도 처음 보는 것 같아요 ! 신기하네용

고생하셨습니다 ~ 🚀🚀🚀

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend-test with    Cloudflare Pages

Latest commit:	e794826
Status:	✅  Deploy successful!
Preview URL:	https://6581210f.sopt-recruiting-frontend-test.pages.dev
Branch Preview URL:	https://design--457-unsupported.sopt-recruiting-frontend-test.pages.dev

View logs

[lydiacho]

고생하셨습니다! 🚀 🚀