각종 설치Issue & Solution & Enlightenment

리엑트 이미지, 폰트 loader문제 해결

NandaNanda 2024. 3. 18. 23:48

리엑트를 사용하여 나만의 프로젝트를 하는중 아래와 같은 에러를 만났다.

ERROR in ./src/img/timeTable.jpg 1:4
Module parse failed: Unexpected character '�' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

요약하면 이미지를 사용하기위해서는 loader가 필요하다는 것이다. 어떻게 문제를 해결해야 할지 gpt에게 물어 보았고 그 결과는 아래와 같았다.

이에 따라

"리엑트 이미지 loader" 라고 구글링하였고 그 결과 아래 글에서 해결책을 얻을 수 있었다.

https://deku.posstree.com/ko/react/image-and-font/

요약하면 리엑트 라이브러리에서 이미지 파일을 사용하려면 그에 맞는 loader를 npm으로 설치하고 webpack설정까지 마쳐야 한다.