[React] vite 빌드 시 config에 대해 알아보고 경로 설정을 해보자

     

목차

 

내가 프로젝트 config 설정을 하면서 헤멨던 부분을 정리하고자 한다.

 

 

tsconfig.json

공통적인 설정을 정의하는 파일로 주로 빌드 설정, 전역 옵션, 참조 파일 목록 등을 포함한다.

 

tsconfig.app.json

주로 브라우저와 관련된 옵션을 포함하고 Jsx 설정, 라이브러리, DOM 관련 옵션을 설정할 수 있다.

 

tsconfig.node.json

Node.js와 관련된 옵션을 포함한다.

 

따라서 tsconfig 파일을세 가지로 나누는 이유는 프로젝트 환경에 따른 타입스크립트 설정을 분리하여

더 유연하게 관리하기 위함이다.

 

tsconfig.json

컴파일할때 path 경로를 설정해주자

{
  "files": [],

  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "types": ["vite/client"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@constant/*": ["src/constant/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@services/*": ["src/services/*"],
      "@store/*": ["src/store/*"],
      "@utils/*": ["src/utils/*"],
      "@types/*": ["src/types/*"],
      "@api/*": ["src/api/*"],
      "@const/*": ["src/const*"]
    }
  }
}

tsconfig.json 파일이 tsconfig.node.json 과 tsconfig.app.json을 참조하고 있음을 나타낸다.

이를 통해 모듈 간의 관계를 명확하게 설정할 수 있다.

 

 

tsconfig.app.json

extends를 통해 tsconfig.json추가하는 거 잊지 말자

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

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

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "extends": "./tsconfig.json",
  "include": ["src", "vite.config.ts"]
}

 

 

 

 

이외에 다른 것들을 간단하게 설명하면 다음과 같다.

strict: true

• 설명: TypeScript의 엄격 모드를 활성화합니다.
• 이 옵션을 사용하면 TypeScript 컴파일러에서 다음과 같은 엄격한 검사 규칙을 한 번에 적용합니다:
  • noImplicitAny
  • strictNullChecks
  • strictFunctionTypes
  • strictPropertyInitialization
  • 기타 여러 엄격한 검사 옵션

"noUnusedLocals": true

• 설명: 사용되지 않는 로컬 변수를 허용하지 않습니다.
• 효과: 코드에 사용하지 않는 변수가 있으면 컴파일러가 에러를 발생시킵니다.

function example() {
    const unused = 42; // 컴파일 에러
}

 

 

"noUnusedParameters": true

• 설명: 사용되지 않는 함수 매개변수를 허용하지 않습니다.
• 효과: 함수의 인자 중 실제로 사용되지 않는 경우 컴파일 에러를 발생시킵니다.

function add(a: number, b: number) {
    return a; // `b`는 사용되지 않아 컴파일 에러
}

 

 

"noFallthroughCasesInSwitch": true

• 설명: switch 문에서 case가 의도적으로 넘어가지 않도록 강제합니다.
• 효과: 명시적으로 break, return, 또는 throw를 사용하지 않는 경우 컴파일 에러가 발생합니다.

switch (value) {
    case 1:
        console.log('One');
    case 2: // 에러 발생 (명시적인 break가 없음)
        console.log('Two');
        break;
}

 

 

"include": ["src", "vite.config.ts"]

• 설명: TypeScript 컴파일러가 컴파일할 파일과 디렉터리를 지정합니다.
• 효과:
  • src 디렉터리와 vite.config.ts 파일만 컴파일 대상에 포함됩니다.
  • 지정되지 않은 파일은 컴파일 대상에서 제외됩니다.
• 일반적으로 프로젝트의 소스 코드 디렉터리와 설정 파일을 포함하는 데 사용됩니다.

 

tsconfig.node.json

Node.js와 관련된 라이브러리 개발 시 사용시 쓰이므로 프론트 개발 시에는 건드릴 일이 특별히 없다.