경고 확인하기
React 프로젝트 진행 중
콘솔 창에 다음과 같은 에러가 발생하는 것을 확인했다.
Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical <link> meta tag to the stylesheet, or simply embedding it manually in your index.html <head> section for a simpler app.
현재는 createGlobalStyle에서 @import CSS 구문을 사용하지 마세요. 프로덕션에서 사용하는 CSSOM API가 이를 잘 처리하지 못하기 때문입니다. 대신, React-helmet과 같은 라이브러리를 사용하여 일반적인 <link> 메타 태그를 스타일시트에 삽입하거나, 간단한 앱을 위해 index.html <head> 섹션에 수동으로 삽입하는 것이 좋습니다.
createGlobalStyle 내에서 @import 구문을 적을 경우 제대로 적용되지 않을 수도 있다는 경고
프로젝트를 뜯어보면 나는 다음과 같이 구글폰트를 연결해서 사용하고 있었다.
친절하게도 해결 방법을 바로 제시해 준다! 따라서 해결해 보자
해결 방법 1. React-helmet
https://www.npmjs.com/package/react-helmet
react-helmet
A document head manager for React. Latest version: 6.1.0, last published: 3 years ago. Start using react-helmet in your project by running `npm i react-helmet`. There are 4283 other projects in the npm registry using react-helmet.
www.npmjs.com
리액트 헬멧은 문서에서 <head></head> 사이에 들어가는 <link>나 <title> 등의 요소를 커스텀 하고 싶은 경우 사용하는 라이브러리다.
@import로 불러오던 구글폰트를 제거하고 <link>로 연결하는 방법을 이용해 보자.
react-helmet을 우선 설치해 준 뒤
$ npm install react-helmet@import 구문을 제거하고 대신에 Helmet을 가져와주자
그리고 <Helmet> 태그로 감싸 <link rel="stylesheet" href="폰트경로"> 를 지정해 준다.
import { Helmet } from "react-helmet";
<Helmet>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap" />
</Helmet>
이렇게 적용해 준 뒤 브라우저를 확인해 보면 <head> 내에 다음과 같이 적용되는 것을 확인할 수 있다.
콘솔창에 뜨던 경고창 역시 사라졌다!
해결 방법 2. public/index.html
public 폴더에 있는 index.html을 직접 수정할 수도 있다.
마찬가지로 createGlobalStyle 내에 작성한 @import 구문은 제거하고
<link rel="stylesheet" href="폰트경로"> 를 public/index.html 파일 내 <head> 내에 추가해 준다.
확인해 보면 해결 방법 1과 마찬가지로 경고가 사라지면서 폰트도 무사히 적용되는 모습을 볼 수 있다.
해결 끝! 😙
'REACT' 카테고리의 다른 글
| [REACT] React Query(TanStack Query) 직접 적용해보며 알아가기 (0) | 2023.11.14 |
|---|---|
| [REACT] React Hooks 탐구하기 (0) | 2023.10.15 |
| [REACT] TDD 와 리액트 테스트 도구 (0) | 2023.09.15 |
| [REACT] ReactDOM.render 과 ReactDOM.createRoot 의 차이점 (0) | 2023.05.17 |
| [REACT] DOM과 Virtual DOM (0) | 2023.04.12 |
