[환경구성] vscode + Typescript + React + Craco

1. tsconfig.paths.json 파일 생성

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

2. tsconfig.json

{
  "include": ["src"],
  "extends": ["./tsconfig.paths.json"],
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  }
}

3. craoco.config.js 파일 생성

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
}

4. package.json scriptss 명령어 변경

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

추가 상황
모든 설정을 완료하고 나니 @를 쓰면 내가 작성한 alias가 뜨지만,
컴포넌트 이름으로 호출하려고 하니 intelliSense가 ../.. 형태의 상대 경로로 컴포넌트를 import 하는 문제가 발생했다.

setting.json 파일에서

  "typescript.preferences.importModuleSpecifier": "non-relative"

마지막 설정문을 추가해주니, 자동으로 컴포넌트 호출 시 별칭 명으로 import 해온다 😊