CRA 없이 웹팩을 사용하여 로컬 폰트 적용하기

CRA 없이 React+TS 환경세팅하기에 이어지는 글이라고 할 수 있겠다.

현재 진행하는 개인 프로젝트인 "항공권 가격 변동 추적 프로젝트"에서 로컬 폰트와 글로벌 스타일, framer-motion을 사용한 화면을 꾸며 보았다.

Create-React-App의 소중함

CRA에서는 웹팩, 바벨, 로더, 린트 등 모든 것을 세팅 해 주니까 참 편하다. 이번 프로젝트를 진행할 때 CRA를 사용하지 않고 전부 세팅하기로 마음 먹고 부딪혔다. 모든 것을 새로 배우다 보니 내용도 어렵고, 머리속에 잘 남지도 않을 것 같아서 블로그 포스팅을 택했다!

개고생을 해 봐야 왜 소중한지 깨닫게 되는건 현실이나 개발이나 똑같다..ㅜㅜ 큐시즘에서 이번에 진행하는 내 첫 팀프로젝트인 기업프로젝트에서는, 무조건 CRA를 쓰리라 다짐했다. 난 아직 초보니까!!

1. GlobalStyle 설정하기

프론트 개발하기 전에 제일 먼저 할 일은 무엇일까?

브라우저마다 user-agent라는 기본 css를 가지고 있다. css공부하다 보면 스타일 적용이 안돼서 스트레스를 받은 적이 있을 것이다. 그래서 GlobalStyle을 설정해 주어서 css를 초기화 해 주어야 한다.

styled-reset 라이브러리를 사용하여 기본 css를 초기화 해 주고, styled-components의 createGlobalStyle을 사용하여 글로벌 스타일을 적용한다.

위 과정은 CRA를 사용하든 웹팩을 사용하든 똑같고, 구글에 넘쳐나는 자료니까 생략한다.

2. 로컬 Font 설정하기 ★

이거 때문에 애를 엄청 많이 먹었다 증말.😠😠
참고 사이트 1
참고 사이트 2

CRA를 사용한 일반적인 프로젝트의 경우 구글링하면 나오는 방법으로 문제 없이 적용 가능하다. 나는 위의 두 사이트를 참고하면서 진행했고, 폰트.woff 파일을 읽어오는 과정에서 에러가 고쳐지지 않았다.

1. declaration file 추가

타입스크립트를 사용하는 경우, woff 파일을 포함한 폰트 형식의 파일을 읽어올 수 없다. font.d.ts 파일을 생성하여 해당 확장자의 파일을

2. url-loader 설치

웹팩을 사용하여 개발 환경을 세팅하는 포스팅에서, 로더의 역할을 다음처럼 설명했다.

로더는 웹팩과 같은 모듈 번들러에서 사용되는 도구로써, 웹 어플리케이션의 소스코드나 파일을 모듈로 해석하고 변환하는 역할을 한다.

그러니까 로컬에 다운한 폰트를 웹팩에 사용하기 위해서는, url-loader를 통해 모듈로써 사용할 수 있도록 하는 과정이 추가로 필요하다...!

근데 file-loader를 설치할 때 이미지와 폰트를 모듈로 변환하는 라이브러리라고 했는데, 왜 추가적인 라이브러리가 필요한지 의문이 들었다. 여기를 참고하여 의문점을 해결하도록 하자!

설치 후 웹팩 설정 파일에 다음처럼 추가해 주었더니, 정상적으로 woff 확장자를 읽어오고 사용할 수 있었다.

 {
        test: /\.woff?$/,
        loader: "url-loader",
 },

참고 사이트 이 분의 블로그를 보고 알게 되었다.

3. 적용

// GlobalFont.ts
import reset from "styled-reset";
import { createGlobalStyle } from "styled-components";
import DOHYUN from "../assets/BMDOHYEON_ttf.woff";

const GlobalFont = createGlobalStyle`    
     @font-face {
        font-family: "DOHYUN";
        src: local("DOHYUN"), url(${DOHYUN}) format('woff'); 
    }
  
`;

export default GlobalFont;

---

// GlobalStyle.ts
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyle = createGlobalStyle`
  ${reset}

  body {   
    background-color:#ecf0f1;
    font-family: "DOHYUN";
  }
`;

export default GlobalStyle;

이런식으로 적용하면 된다. 그리고 GlobalStyle과 폰트를 styles 폴더에서 관리하는 법도 배웠다.

로고 텍스트 애니메이션은 framer-motion을 사용했다. 노마드코더 강의에서 보고 조금 응용했는데, 나는 멋있다고 생각함...

---

결론!!

CRA의 소중함을 두번 세번 네번 깨달았다...

post api에서 503에러 뜨는걸 해결하느라 프론트 개발을 이제서야 시작한다. 바쁘게 살자 진우야