경고
발생 경위
styled-components에서 createGlobalStyle로 글로벌 스타일을 정의하는데 @import로 폰트 스타일을 추가했을 때 위와 같은 경고 문구가 나왔다. 내용은,
createGlobalStyle에 @import 문법을 사용하지 마십시오. 우리가 사용하는 CSSOM APIs는 릴리즈 될 때 정상작동되지 않을 수 있습니다. 대신 react-helmet 같은 라이브러리를 사용할 것을 권고합니다. (전형적인 link 태그같은 곳에 직접 주입시키거나 index.html의 head 태그에 단순히 임베딩하게 되는 식입니다)
@import 문법은 production 단계에서 CSSOM을 컨트롤하기 어려울 수 있다..? styled-components에서 그럴 수 있다고 하니 다른 방법을 찾아보자 👀
📍 CSSOM APIs란?
CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합이다. CSS가 대상인 DOM이라고 생각할 수 있으며, DOM처럼 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법이다. 👉 여기
해결1: 수동으로
createGlobalStyle에서 @import 구문을 추가하였을 때만 해당되는 에러이니, 이외의 전역으로 간단하게 추가해주면 될 것 같다.
google font에서 가져올 때 @import 구문과 link 태그 둘 다 제공하기 때문에, 상황에 맞게 css, html 파일에 적용할 수 있다.
index.css
/* index.css */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap");index.html
본의 아니게 체감 속도 테스트를 진행하게 되었는데, 역시 링크가 조금🤏 빠르게 느껴졌다.
/* public/index.html */
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap" rel="stylesheet">
</head>/* public/index.html */
<head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap");
</style>
</head>해결2: react-helmet
일반적인 <Link> 태그로 스타일시트에 주입해주는 react-helmet 라이브러리를 추천해주고 있다.
<link> 뿐만 아니라 <head>의 title, base, meta, link, script, noscript, style 태그들을 지원하고 있다. SSR을 지원한다고 하는데, 더 알아보면 좋겠다.
전역 폰트를 import 만을 위해서 설치하는 것은 과한 느낌이라서 테스트만 해보았다. 사용방법은 꽤 간단하다.
설치
npm install --save react-helmet
npm install --save @types/react-helmet사용
import { Helmet } from "react-helmet";
// 중략
return (
<Helmet>
<title>Hi! This is Test!</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500&display=swap"
rel="stylesheet"
/>
</Helmet>
)🛑 "UNSAFE_componentWillMount in strict mode" 에러 발생
Warning: Using UNSAFE_componentWillMount in strict mode is not recommended...
helmet으로 title 및 메타 태그 적용시 다음과 같은 에러가 떴다. 👉여기를 참고하여 해결했다.
# react-helmet-async 설치
npm i react-helmet-async// index.tsx에 Provider로 감싸고,
import { HelmetProvider } from "react-helmet-async";
// Coins.tsx helmet이 필요한 페이지에 동일하게 적용.
import { Helmet } from "react-helmet-async";더 공부해 볼 것
- react-helmet으로 React SEO 최적화가 가능할까?
- react-helmet은 어떤 원리로 동작하는지??
- 매 페이지마다 SEO를 적용해 SPA의 단점을 보완할 수 있을지?
출처
Updated
- 2022.01.15 helmet 에러 및 해결 추가
