리액트에서 타입스크립트로 마이그레이션 하기 II -절대경로설정 with craco

 절대경로 설정 해주기 with craco

---

 

1. tsconfig.json파일에 해당 내용 추가

 

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

 

 

이 의미는 ./src에있는 모든 파일들을 @/로 변경하겠다는 의미

 

 

 

2. craco 설치

 

npm install @craco/craco --save-dev

 

 

 

3. craco.config.js파일 추가

 

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

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

 

 

 

4. package.json 파일 수정

 

 

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

 

 

5. tsconfig.paths.json파일 생성

 

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@assets/*": ["./assets/*"],
      "@components/*": ["./components/*"],
      "@hooks/*": ["./hooks/*"],
      "@pages/*": ["./pages/*"],
      "@utils/*": ["./utils/*"]
    }
  }
}

 

 

6. tsconfig.json에 extends추가 

 

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

 

 

 

 

 

 

참고사이트 

 

https://velog.io/@dikum98/React-with.-CRA-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-Typescript-%EC%A0%81%EC%9A%A9%EC%8B%9C%ED%82%A4%EA%B8%B0-fdetxw7h 

https://velog.io/@alstnsrl98/React-Typescript-%EC%A0%88%EB%8C%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-Craco