[React + Vite] "Failed to load resource: the server responded with a status of 404(not found)" 해결하기

React + Vite에서 Pretendard 폰트를 전역적으로 적용하기 위하여 코드를 작성하였는데 해당 코드에 문제점이 있다는 것을 조금 늦게 발견하였다.

 화면 상으로는 폰트가 정상적으로 적용된 것처럼 보이지만, 콘솔 로그를 살펴보면 'Failed to load resource' 에러가 발생하고 있다. 즉, 적용하고자 하는 폰트 파일들을 불러오는 단계부터 문제가 되고 있다는 뜻.

 

 가장 먼저 해당 파일의 경로가 올바른지, 경로 작성에서 오탈자가 있지는 않은지 확인하였지만 별 다른 문제점은 없었다. 아래는 문제가 되는 코드의 일부이다.

 

문제 코드

const GlobalStyles = createGlobalStyle`
    @font-face {
        font-family: Pretendard;
        src: url('./assets/fonts/Pretendard-Thin.woff');
        font-weight: 100;
        font-style: thin;
    }
    
    ...
    
 }

 

 React에서 이미지, 폰트와 같은 Assets과 관련된 코드를 작성한 적이 있는 경우라면 문제점을 금방 파악할 수 있을 수도 있을 것이다.

 

 

해결 코드

import PretendardThin from "./assets/fonts/Pretendard-Thin.woff";

...

const GlobalStyles = createGlobalStyle`
    @font-face {
        font-family: Pretendard;
        src: url(${PretendardThin}) format('woff');
        font-weight: 100;
        font-style: thin;
	
    ...
    
}

 

 React에서는 경로를 하드 코딩하는 방법이 아닌, import 문을 사용하여 사용하려는 파일(이미지, 폰트 등)을 가져오는 것이 올바른 방법이다.

 따라서, import 문을 사용하여 폰트 파일을 가져온 뒤, url(${import된 폰트 파일 이름})의 형태로 src 속성에 적용해야 정상적으로 폰트 적용이 이루어진다. 추가로 format ('woff') 등을 통하여 폰트 파일의 형식을 명시적으로 지정해줄 수 있다.

 

---

 

 그렇다면 React에서는 import를 사용하여 사용 자원을 가져오는 이유는 무엇일까?

 

1. 모듈 번들링

-> 리액트 프로젝트에서는 일반적으로 모듈 번들러를 사용하여 소스 코드를 번들링하는데, 모듈 번들러는 import 문을 사용하여 필요 파일들을 자동으로 가져와서 번들에 포함시킨다. 이 과정을 통하여 파일 의존성을 관리하고 필요 파일들만 번들링하는 것으로 최적화를 진행한다.

 

2. 경로 문제 해결

-> import 문을 사용하는 과정에서 상대 경로, 절대 경로를 모두 사용할 수 있는데 이를 통하여 경로를 명확하게 지정 가능하며, 파일의 위치에 무관하게 일관된 방식으로 파일을 참조하여 사용할 수 있다.

 

3. 코드 가독성

-> import 문을 사용하면 코드의 가독성을 높일 수 있다(해당 파일이 어디에서 가져와졌는지 등). 또한, IDE에서 import 문을 통하여 모듈을 가져오는 것을 인식하여 자동 완성이나 코드 제안 등의 편의성도 제공받을 수 있다.

 

 

 

 위와 같은 다양한 이유들로 React에서는 파일들을 가져올 때 import 문을 사용하는 것이 권장되는 방법이며, 개발자들을 이를 통하여 모듈 번들링, 경로 해결, 타입 검사가 가능하다는 이점을 취할 수 있다.

 

 

---

 

 

 최근 프로젝트에서는 Flutter를 이용하고 있는데 각종 Asset들을 참조하는 과정에서는 경로를 하드 코딩하는 경우가 많았고, 가능했다. 이러한 부분 때문에 React 프로젝트를 오랜만에 사용하면서 잠시 망각하고 있었지만 각 라이브러리 및 프레임워크에서 권장하는 방법들을 명확히 이해하는 것도 자잘한 개발 과정에서의 삽질을 줄이는데 큰 도움이 되지 않을까 생각한다.