[React/Typescript] react img 절대경로 적용하는 법 (feat.Carco) (CRA로 만든 React + Typescript 프로젝트)

프로젝트 폴더 구조가 겹겹으로 되어있는 경우, 상대경로의 문제점은 위와같이 코드가 길어지고 지저분해진다는 것이다.

때문에 대부분 절대경로를 사용한다고 한다.

그리고 이미지 경로에도 마찬가지로 위와 같이 불편하고 지저분한 감이 있었다.

(img태그의 src 속성에 require("경로").default를하면 엑박이 뜨지 않는다.)

 

이때 발견한 괜찮은 방법은 Craco라는 모듈과 craco-alias라는 플러그인을 사용해 tsconfig 옵션을 적용하는 것이다.

Craco

Create React App Configuration Override

Create-React-App(CRA)를 쉽게 설정하기 위해 만들어졌다.

craco 모듈을 설치하고 root 폴더에 craco.config.js 파일을 만들고 그곳에 커스텀하게 설정을 해주면 eject를 할 필요 없이 tsconfig.json에 작성한 내용을 빌드 과정에서 적용할 수 있고 webpack이나 babel, postcss 설정도 건드릴 수 있다.

 

다음 방법을 따라하면 쉽게 이미지 경로, import 경로에 절대경로를 사용할 수 있다.

 

1. Carco 설치 및 적용

yarn add @craco/craco
yarn add craco-alias -D

 

 

터미널에 위 명령어를 입력해 craco 모듈과 craco-alias 플러그인을 설치한다.

 

2. package.json 파일 수정

// package.json

"scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
}

craco를 통해 프로젝트를 빌드할 수 있도록 package.json을 수정한다.

 

3. tsconfig.paths.json 파일 생성 및 path설정

tsconfig.json 파일에 extends로 추가할 path 설정 전용 파일인 tsconfig.paths.json파일을 root에 생성한다.(javascript를 사용하면 jsconfig.json을 수정하면 된다.)

 

이렇게 path파일을 분리하면 관리에 용이하기 때문에 생성해서 따로 관리해주는게 좋다.

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@img/*": ["src/assets/img/*"],
      "@components/*": ["src/components/*"],
      "@context/*": ["src/context/*"],
      "@firebase/*": ["src/firebase/*"],
      "@pages/*": ["src/pages/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

baseUrl과 paths를 사용자에 맞게 위와같이 커스텀해주면된다.

주의할 것은 맨 마지막 요소에 콤마(,)를 붙이면 안된다.

콤마가 붙어있으면 craco가 .json파일을 파싱하지 못하는 에러가 발생한다.

(참고로 필자의 폴더 구조는 위와 같다.)

 

// tsconfig.json

{
    "extends": "./tsconfig.paths.json",
    "compilerOptions": {
            ...
    },
        ...
}

tsconfig.paths.json 파일 작성이 끝났다면 tsconfig.json파일에 이 파일을 extends로 등록해준다.

 

4. craco.config.js 파일 생성

const cracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: cracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json",
      },
    },
  ],
};

craco.config.js 파일을 생성하고 craco 설정을 작성한다.

craco-alias 플러그인을 적용해서 아까 작성했던 path를 절대경로로 사용할 것이므로 위와 같이 적어준다.

 

🧐 추가적인 options 설정 설명

• source: default 값은 options이고 프로젝트 구성에 따라 jsconfig, tsconfig 선택 가능
• baseUrl: default 값은 ./로 root 폴더를 가리킴
• aliases: default 값은 {}이고 alias 이름과 경로를 나타냄
• tsConfigPath: 만약 source가 tsconfig라면 해당 파일 이름 작성
• debug: default 값은 false이고 버그가 생기는 경우, 해당 값을 true로 바꾸어 console에서 내용을 확인할 수 있게함.

 

5. tsconfig.json에 extends 추가

// tsconfig.json

{
	"extends": "./tsconfig.paths.json",
	"compilerOptions": {
    		...
	},
        ...
    	"include": [
		"src",
		"craco.config.js"
	],
}

"include"에 "craco.config.js"를 추가해준다.

 

✅ 적용하기

이제 적용할 수 있게 되었다!

 

 

(p.s. 왜인지 svg는 위처럼 했을 때 불러와지지만 png나 jpg파일의 경우 엑박이 뜬다.. 이 경우엔 그냥 이미지 파일을 import하고 src에서 불러오면 엑박안뜬다! import할 때 절대경로 설정한 걸 이용하면 된다)