LEVEL UP to React 이후 웹폰트와 SCSS 스타일시트는 어떻게 사용하나요?

당신이 나와 같은 초보자라면 두 가지 질문이 있습니다.

HTML, CSS 및 JavaScript를 처음 배웠을 때:

귀하의 페이지에서 Google 글꼴의 Roboto를 어떻게 사용하셨습니까? 아마도 <link> 의 index.html 태그나 CSS 스타일 시트의 @import 문을 통해?

CSS 대신 SCSS를 사용하려면 어떻게 합니까? 아마도 SCSS를 CSS로 변환하기 위해 일부 컴파일러가 필요할 것입니다. 그런 다음 <link>에 index.html 태그가 있는 컴파일된 CSS 파일을 포함해야 합니까?

나는 위에서 설명한대로 일을하도록 배웠습니다. 내가 React로 "레벨 업"했을 때, 나는 계속 같은 일을 했다. 웹 글꼴을 로드하고 SCSS 스타일시트를 가져오는 이러한 "고전적인"방법은 React의 모범 사례가 아닙니다.

create-react-app 프로젝트에 SCSS 스타일시트를 어떻게 추가하나요?

create-react-app documentation에 따르면:

먼저 npm 또는 yarn을 통해 명령줄에 node-sass를 설치해야 합니다.

  # example from create-react-app documentation

  $ npm install node-sass --save
  $ # or
  $ yarn add node-sass

그런 다음 다음과 같이 @import 문을 통해 직접 JS에서 SCSS 파일을 가져올 수 있습니다.

  // app.js

  import "./app.scss"

즉, "전통적인"접근 방식(처음에 언급한 대로)과 달리 Live Sass Compiler과 같은 컴파일러가 더 이상 필요하지 않습니다.

create-react-app guide on "adding a style sheet"에서 인용:

This project setup uses Webpack for handling all assets.

즉, Webpack이 컴파일을 처리하므로 컴파일러를 사용하여 직접 수행할 필요가 없습니다.

create-react-app 프로젝트에서 웹 글꼴을 로드하는 방법은 무엇입니까?

다음 예에서는 Google Fonts Roboto 을 사용합니다.

Google 글꼴의 두 가지 선택 항목에 익숙할 것입니다.

<link> 의 index.html 태그를 통해 다음 그림의 왼쪽 라디오 버튼에서 선택할 수 있습니다.

@import 콘텐츠를 복사하여 다음 그림의 오른쪽 라디오 버튼에서 선택한 SCSS 또는 CSS 파일에 붙여넣습니다.

그렇다면 어떤 것을 선택해야 하며 어떤 것이 더 나은 방법일까요? 하나씩 토론해 보자:

1. SCSS/CSS 파일의 @import 문

SCSS/CSS 파일에서 @import 문을 사용하는 경우 다음과 같이 해당 SCSS/CSS 파일을 JavaScript 파일로 가져와야 합니다(SCSS의 경우 먼저 node-sass를 설치하는 것을 잊지 마십시오).

// app.scss or app.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

  // app.js

  import "./app.scss"   // if you are using SCSS
  import "./app.css"    // if you are using CSS

this StackOverflow answer에 따르면 @import 문을 통해 SCSS/CSS 파일로 웹 글꼴을 가져오면 "글꼴이 빌드 파이프라인을 통과하는지 확인"합니다. 즉, 컴파일할 때 Webpack이 "(글꼴) 파일이 실제로 존재하는지 확인"한다는 의미입니다. , 따라서 이 답변에 따라 권장되는 방법입니다.

2. 공용 폴더 내 index.html의 <link> 태그

위의 동일한 StackOverflow answer에 따르면. "클래식"방식으로도 할 수 있지만 이 방식으로 로드된 글꼴이 "빌드 파이프라인을 통과하지 않기"때문에 권장되지 않습니다.

이제 명확해야 합니다. 항상 @import를 사용합니다. 맞습니까? 아직 결론을 내리기에는 그리 빠르지 않습니다. <link> 태그를 사용하면 속도상의 이점이 있습니다.

Google Developers의 this article에 따르면:

Google Fonts provides the option to load fonts via <link> tags or an @import statement. The <link> code snippet includes a preconnect resource hint and therefore will likely result in faster stylesheet delivery than using @import version.

그럼 우리는 어느 쪽을 따라야 할까요?

지금 내 결론

저는 아직 이 시점에서 최적화에 대해 생각할 만큼 충분히 "레벨 업"되지 않았습니다. 그래서 지금은 내 SCSS에서 링크와 사용@import 모두에서 조언을 받고 있습니다.

웹 글꼴을 로드하는 다른 방법

위에서 설명한 두 가지 방법은 결코 완전하지 않습니다. 다음과 같이 내가 포함하지 않은 웹 글꼴을 로드하는 다른 방법이 있습니다.

@font-face

Webfont npm 또는 yarn을 통해 설치할 수 있는 패키지입니다.

나는 내가 알지 못하는 일을 하는 다른 (더 나은) 방법이 있다고 확신합니다. 더 잘 알고 있다면 아래에 제안을 남겨주세요.

글꼴은 광범위한 주제입니다.

이 기사를 조사할 때 글꼴이 광범위한 주제라는 것을 알았습니다. 때로는 답변/기사가 서로 충돌하여 내가 쓴 내용이 100% 정확하다고 확신할 수 없습니다. 그러니 잘못된 부분이 있으면 지적해주시면 감사하겠습니다.

리소스 및 추가 정보

How to add fonts to create-react-app based projects?

3 quick ways to add fonts to your React app

Difference between @font-face and @import url?

Using @font-face

Best way to add a custom font to my site?

Best practices for fonts