[FE] 폰트를 최적화하는 코드를 추가한다. #639
Conversation
| <link | ||
| href="https://cdn.jsdelivr.net/gh/sun-typeface/SUITE@2/fonts/variable/woff2/SUITE-Variable.css" | ||
| rel="preload" | ||
| as="style" | ||
| /> | ||
| <link | ||
| href="https://cdn.jsdelivr.net/gh/sun-typeface/SUITE@2/fonts/variable/woff2/SUITE-Variable.css" | ||
| rel="stylesheet" |
There was a problem hiding this comment.
아래에 폰트 로드 태그가 있는데 두번 호출하신 다른 이유가 있을까요?
preload, stylesheet 두개를 모두 사용하고 싶다면 아래처럼 작성해도 작동되는거 같습니다!
rel="preload, stylesheet"
혹시 다른 이유가 있다면 알려주세요~!
There was a problem hiding this comment.
제가 알기론 해당 코드가 안되는 걸로 알고 있는데, 혹시 레퍼런스를 알 수 있을까요??
틀릴수도 있지만, 저는 하나의 rel 에는 하나의 속성만 써야 되는 걸로 알고 있습니다!
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
There was a problem hiding this comment.
https://stackoverflow.com/questions/1878657/multiple-values-for-rel-attribute
관련 자료를 찾았습니다! , 가 아닌 ' ' 로 하면 해당 rel 속성을 한번에 쓸 수 있는게 맞는 것 같습니다.
하지만 개인적으로는 코드 중복이 되더라도 공식 문서대로 쓰는 것이 안전하다고 생각하는데,
헤일리의 의견은 어떠신가요? 코드가 줄어드는게 더 이점이 있다고 생각하시나요?
There was a problem hiding this comment.
그렇네요! 이전 성능 미션에서 해당 태그로 호출하여 작동이 잘 되었는데 그땐 왜 되었는지 알수가없네요,,? 신기할 다름입니다~
There was a problem hiding this comment.
제이드랑 미리 상의해 봤는데, 위에 preload 하는 코드는 preload 담당만 하게 하고, 밑에 코드는 적용시키는 것으로 분리를 해야할 것 같습니다.
이유는 두 속성을 같이 쓰게 되면 preload 뿐만 아니라 적용도 같이 되버리기 떄문에, 해당 스타일시트를 '미리 불러만 온다' 라는 preload의 제기능을 사용할 수 없을 거라고 생각합니다.
물론 현재 상황에서는 prelaad 와 link 태그가 1개 뿐이라서 차이가 없지만,
나중에 preload 하는 link 가 많아질 경우, 이 폰트 스타일 시트가 미리 불러와지고 적용이 같이 되어, 그 뒤에 link의 preload 를 막는 블로킹 문제가 생길 수 있을 것 같습니다!
그래서 원래 코드를 유지하고자 하는데, 헤일리의 의견이 궁금합니다!
❗ Issue
✨ 구현한 기능
📢 논의하고 싶은 내용
🎸 기타