🤗님 오늘 뭐함?

리액트 토이프로젝트 RunAble

• 목표 : 날씨 설명(description)에 해당하는 아이콘을 화면에 보여주자 (예: 비오는 날 -> 비 내리는 아이콘)
• 문제점 : module parsed failed 에러가 뜬다. 적당한 loader가 없다면서..

왜지??

검색해보니 이미지(내가 사용하려는 확장자는 svg이다) 파일을 로딩하려면 file-loader가 필요하다고 한다. 그래서 webpack.config.js 파일의 rules에 아래의 코드를 추가했다.

// webpack.config.js

 module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader',
      },
     ],
 },

하지만 이 방법은 효과가 없었다. 여전히 에러 메세지를 보여주고 있었다ㅠㅠ

계속 방법을 못 찾아서.. 한 이틀 헤맨 것 같다. 그러다가 문득 이미지 경로에 문제가 있나 싶어서 검색을 했다. 그리고 그게 맞았나보다.

// jsconfig.js

{
 "compilerOptions": {
   "baseUrl": "src"
 },
 "include": ["src"]
}

jsconfig.js라는 파일을 만들고 그 안에 저 코드를 추가한 뒤 다시 컴파일하니 원하던 데로 작동하기 시작했다ㅠㅠ 행복..

결론적으로 file-loader는 이미지 로딩에 필요했던 패키지였고, 저장한 이미지를 가져올 때 경로에 문제가 있어서 오류가 발생한거였다.

문제 해결!!!