net::ERR_ABORTED 404 (Not Found)

문제 상황

 

폰트를 불러오는데 있어서 콘솔 창에 이런 오류가 떴다. 

 

해당 오류의 원인은 크게 3가지가 될 수 있다.

1. 잘못된 경로
2. 파일이 없는 경우
3. 빌드 설정 문제

 

나의 경우 1 + 3번이 결합되며 발생한 문제라고 할 수 있다..

 

---

 

기존 세팅

tsconfig 파일에 baseUrl을 src로 지정해놨기 때문에 폰트를 import 할 때 절대경로의 시작이 src 폴더라고 생각해 src > assets > fonts 폴더에 폰트들을 두었다.

  @font-face {
    font-family: "Pretendard";
    font-weight: 400;
    src: url("../assets/fonts/Pretendard-Regular.woff") format("woff");
  }

src > assets > fonts > *.woff

 

---

 

문제 원인

1. 잘못된 경로

폰트와 같은 정적 파일은 웹팩이나 개발 서버에 의해 제공되기 때문에 public 폴더 내에 두고 절대 경로로 접근하는 것이 일반적이다.

또한 이 설정은 tsconfig 파일의 baseUrl 설정과는 무관하게 동작한다.

즉, 폰트가 public 폴더 하위에 있지 않았기 때문에 브라우저가 해당 폰트 파일들을 찾지 못해 에러를 발생시킨 것이다.

 

2. 빌드 설정 문제

public 폴더에 두지 않은 정적 파일은 빌드된 React 애플리케이션에서 접근할 수 없다. (src 폴더에 있는 파일들은 빌드 시 정적 파일로 자동 복사되지 않음)

그렇기 때문에 정적 파일은 public 폴더에 두어야 한다.

 

 

---

 

 

해결 방법

1. 폰트 파일들을 public 하위로 이동

 

2. import 경로 변경

 @font-face {
    font-family: "Pretendard";
    font-weight: 400;
    src: url("/fonts/Pretendard-Regular.woff") format("woff");
  }

public > fonts > *.woff