CRA,Typescript 환경에서 craco로 import alias 설정하기

pds·2023년 1월 5일

React TIL

TIL

목록 보기

28/60

상대경로의 지옥

최종 프로젝트를 시작 하기 전 했었던 두번의 프로젝트를 겪으면서 느낀 것이 있었다.

프로젝트가 점점 복잡해지고 컴포넌트나 함수들을 다양한 이름이나 계층의 폴더에 두고 import 해서 사용하다보니

import 경로 깊이가 너무 깊어져 사용이 힘들고 알아보기도 힘들었다.

그리고 가끔 ide 삑사리나면 자동완성 안떠서 직접 넣을 때 있는데 짜증난다.

nextjs를 공부할 때는 이것저것 참고하다보니 설정하는게 있어서 설정하고 사용했었는데

CRA에서는 어떻게 해야할지 몰라 조사해보았다.

찾아보니 ts.config와 webpack설정을 바꾸면 된다고 하는데 이는 복잡하다고 하였고

craco라는 라이브러리를 알게되어 설정할 수 있었다!

Craco란

Create React App Configuration Override 즉 CRA를 위한 라이브러리인데

config설정을 CRA에 상속하여 따로 뭘 건드리지 않고 추가적인 설정을 부여할 수 있게 해주는 것이다.

루트경로에 craco.config.js를 추가함으로 eslint, babel 등을 쉽게 설정할 수 있다고 한다.

alias 적용하기

설치

npm i @craco/craco // craco 라이브러리
npm i -D craco-alias // directory alias

tsconfig에 넣을 설정 json 파일 작성하기

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@yourdir/*": ["./yourdir/*"],
        }
    }
}

craco.config.js 파일 작성하기

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './적용할루트폴더(ex: src)',
        tsConfigPath: './앞에서만든파일.json',
      },
    },
  ],
};

tsconfig.ts 파일에 override 설정

"extends": "./tsconfig.paths.json"

package.json에서 실행 스크립트 수정

 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

사용하기

import usePopState from '@hooks/usePopState';
import { useAppDispatch, useAppSelector } from '@redux/hooks';
import { clearAllGamePlayState } from '@redux/modules/gamePlaySlice';
import { addChat, clearScore, updateRoom } from '@redux/modules/gameRoomSlice';
import { clearPlayerStream } from '@redux/modules/playerMediaSlice';
import { clearMedia } from '@redux/modules/userMediaSlice';
import { userApi } from '@redux/query/user';
import { alertToast } from '@utils/toast';

import CamList from '@components/game/CamList';