React js(`CRA`)에서 모듈 별칭을 사용하는 방법

TLDR,

$ npx create-react-app testing-alias --template typescript
# Or 
$ yarn create react-app testing-alias --template typescript

$ npm i craco
#Or
$ yarn add craco

$ yarn add tsconfig-paths-webpack-plugin
#Or
$ npm i tsconfig-paths-webpack-plugin

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: {
    plugins: [new TsconfigPathsPlugin()],
  },
};

{
 "compilerOptions":{
    "baseUrl": "./src",
    "paths": {
      "@component/*": ["./src/@components/*"],
      "@pages/*": ["./src/@pages/*"],
      "@utils/*": ["./src/@utils/*"],
      "@hooks/*": ["./src/@hooks/*"],
      "@app:state/*": ["./src/state/*"]
    }
  },
  "include": ["src"]
}

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