TypeScript 절대 경로 설정 시 주의 사항

타입스크립트에서 절대경로 설정 시 src/hooks 와 같이 경로가 one path인 경우 아래 방식으로 설정 시 불러오지 못하는 오류가 발생한다.

    "paths": {
      "@/*": [
        "./src/*"
      ],
      "@components/*": [
        "./src/components/*"
      ],
      "@hooks/*": [
        "./src/hooks/*"
      ]
      "@type/*": [
        "./src/types/*"
      ],
      "@utils/*": [
        "./src/utils/*"
      ],
    },
  },
  "include": [
    "src"
  ],

우선 이 방법을 해결하기 위해서는 깔끔한 방법은 아니지만 아래 방식을 사용하여 해결이 가능하다.

   "paths": {
      "@*": [
        "./src/*",
        "./src"
      ],
      "@api*": [
        "./src/api/*",
        "./src/api"
      ],
      "@assets*": [
        "./src/assets/*",
        "./src/assets"
      ],
      "@components*": [
        "./src/components/*",
        "./src/components"
      ],
      "@containers*": [
        "./src/containers/*",
        "./src/containers"
      ],
      "@contexts*": [
        "./src/contexts/*",
        "./src/contexts"
      ],
      "@hooks": [
        "./src/hooks/*",
        "./src/hooks"
      ],
      "@pages*": [
        "./src/pages/*",
        "./src/pages"
      ],
      "@store*": [
        "./src/store/*",
        "./src/store"
      ],
      "@type*": [
        "./src/types/*",
        "./src/types"
      ],
      "@utils*": [
        "./src/utils/*",
        "./src/utils"
      ],
    },
  },
  "include": [
    "src"
  ],

우선 위 방법은 디렉토리 구조 설계 시 겹치지 않게 잘 설정이 필요하다.
예시를 들자면, @type 의 경로를 설정해 준 이후 @typeFolder2 이런식으로 하면 또 경로상의 문제가 생길것 이다.

위 사항만 잘 피해서 설계한다면 절대경로 설정 후 가져다 사용 시 상대경로 보다 쓰기 편하고 보기도 좋을 것이다.