본문 바로가기

Code/web-frontend

craco 사용하기

cra 로 react app 을 작성하게 되면, 경로가 마음에 드는대로 안된다. |
자세히는
1. 상대경로 됨
2.  src/dfdf/dfdf/dfdf src 부터 타고 내려와야해 

 

이런 귀찮음을 줄이기 위해서는 crago 를 사용하면 된다. 

 

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.extend.json",
      },
    },
  ],
};

craco.config.js 

 

내가 했던 컨피그 파일 

 

 

-------

 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@app": ["./App.tsx"],
      "@pages/*": ["./pages/*"],
      "@components/*": ["./components/*"],
      "@utils/*": ["./utils/*"],
      "@styles/*": ["./styles/*"],
	    "@assets/*": ["./assets/*"],
	    "@config/*": ["./config/*"]
    }
  }
}

tsconfig.extend.json 

파일이다.

craco 설치랑 뭐 그런 과정은 검색해서 찾아보고

쫌 오래 됐지만, 내 기억으로는 마지막에 , 콤마 쓰면 에러없이 작동안되고 그랬던 것 같다.