[TypeScript] 절대경로 설정 오류 해결 1/2

나범수·2024년 6월 24일

오류/트러블슈팅

목록 보기

4/5

📋1. 개요

TypeScirpt 설정 중 tsconfig.json 파일이 app과 node를 기준으로 나눠지는 문제를 해결.

👿2. 상황설명

팀스터디의 일환으로 조원들마다 1인프로젝트를 개발하기로 하였고 나는 상품 판매 사이트를 제작하기로 하였다. 그래서 react 기반의 vite와 typescrip를 이용해서 기본 CRA를 구성했고 css는 tailwind와 Shadcn을 사용해 기본 셋업을 준비하고 있었다.

typeScript와 tailwind까지는 설치가 완만했는데 Shadcn을 이용해 ui 컴포넌트를 설치하자마자 문제가 발생했다!.

1. tailwind.css에서 module을 찾을 수 없다는 문제 발생

2. Shadcn에서 '모듈 또는 해당 형식 선언을 찾을 수 없습니다.'

TS(2307)오류가 발생한 것.

우선 나는 TS와 vite를 이용해 프로젝트를 생성한게 처음이기 때문에 엄청나게 당황했다. ui 컴포넌트를 사용하기 전까지는 좋았다가 갑자기 이런 오류가 생기니 당황한 것이다.

😢3. 해결하기 위한 시도

환경설정을 진행하면서 ESlint, prettir등 다양한 유틸툴을 사용했기 때문에 코드가 엉켜있을 것이라 예상. 모든 프로젝트를 삭제하고 다시 설치 → 똑같은 문제가 발생. 유틸툴 설치의 문제가 있는 것이 아님.
해당 문제점에 대해서 구글링을 통해 해결법을 찾아다님 → .eslintrc.cjs에서 env 경로에 ‘node:true’를 작성하면 해결된다는 글을 발견.

처음 환경을 세팅할 때 .eslintrc.cjs의 초기상태는 이렇게 되어 있었다.
글을 찾아보니 TS는 node12가 아니면 기본적으로 ES 문법을 취한다는 설명을 들었다. 그래서 위와 같은 문제가 생긴 것이며

env: { browser: true, es2020:true, node:true}

이렇게 설정을 하면 TS가 node를 기본 문법으로 처리하기 때문에 해결된다고 한다.

==> 1번 문제는 해결 되었지만 여전히 2번 경로에 대한 문제가 남아 있었다.

UI에 대한 문제를 해결하기 위해 공식 사이트를 확인해보았다.
https://ui.shadcn.com/docs

그러나 공식 사이트에서는 마땅한 해결책을 찾을 수 없었고

chatGpt를 이용한 결과 예상 외의 답변이 나왔다.

tsconfig.app.json
{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "@/*"
      ]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["**/*"]
}

각각 기본 경로와 inclde에서 경로를 수정하면 된다고 하더라.
그래서 해봤더니 왠걸?

기적처럼 코드가 정상적으로 작동을 하였다!
왜 그런지는 몰랐다. 그냥 하란대로 되던데? 이해가 안되긴 했지만 그래도 일단 정상적으로 작동을 하면 됬으니.... 이유는 나중에 알고 우선 다음 할일이나 하러갔다....

코드가 작성되고 다음 코스인 환경설정과 라우팅을 하러 갔답니다... 라고 하면 좋았을 것이다.