리액트 : 타입스크립트 절대경로 설정하기

https://velog.io/@shin6403/React-Typescript-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0feat.React-CRA

타입스크립트를 사용하면 절대경로를 사용할 수 있음.
nest를 사용할 때는 별 부담없이 절대경로를 사용했는데 리액트의 경우에는 이야기가 좀 달랐다.
링크의 블로그를 확인해보면

이러한 내용을 읽어볼 수 있었는데 tsconfig.json의 paths가 없어진다고 하고, 웹팩설정을 바꾸기에는 아직 리액트에 대한 이해가 많이 부족하기 때문에 블로그를 참조하여 절대경로를 설정했다.

---

Craco(Create React App Configuration Override)는 create-react-app(CRA)을 쉽게 설정하기 위해 만들어졌다.

CRA에서 eject를 하지 않아도, root 폴더에 craco.config.js를 추가함으로 eslint, babel, postcss 등을 쉽게 설정할 수 있다.

CRA 3.*, Yarn, NPM, Lerna, custom react-scripts에서 사용가능하다.

---

라고 하여 크라코를 사용하면 쉽게 리액트 프로젝트 관련 설정을 할 수 있는 것 같았다.
애를 먹고 있던 절대경로 설정을 쉽게 해결할 수 있었다.

const path = require("path");

module.exports = {
  webpack: {
    alias: {
      "@root": path.resolve(__dirname, "src/"),
    },
  },
  jest: {
    configure: {
      moduleNameMapper: {
        "^@(.*)$": "<rootDir>/src$1",
      },
    },
  },
};

위와 같이 웹팩에 경로를 설정해 줄 수 있는 듯 했다.