타입스크립트 vite 로 설정할때 어떻게 해야되나요??

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

타입스크립트 리액트 시작하기

해결된 질문

작성

139

타입스크립트 리액트 시작하기 듣고 있습니다
vite로 설정할때도 tsconfig.json 똑같이 해줘야할까요?

tsconfig.app.json과 tsconfig.node.json 이렇게 두개가 더 있고 이 두파일로 설정하는 것 같은데 둘중 어느 파일을 설정해야되는 건지 잘 모르겠네요... 그리고 강의에서 추가해주시는 옵션 vite (React+ TypeScript) 로 할때도 똑같이 tsconfig 설정 추가해줘야할까요?

tsconfig.app.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
  },
  "include": ["src"]
}

tsconfig.node.json 파일

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

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

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

typescript

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다. AI 인턴의 답변이 정확하네요! 중요한 핵심 부분을 발췌해 드리겠습니다.

tsconfig.app.json은 주로 클라이언트 사이드, 즉 브라우저에서 실행되는 코드를 대상으로 합니다. 여기에서는 React 및 DOM 관련 라이브러리를 포함하는 경우가 많습니다.
tsconfig.node.json은 Node.js에서 실행되는 서버 사이드 코드나 빌드 도구 설정 파일에 대해 사용됩니다. 이에 따라, Vite와 같은 도구의 설정 파일(vite.config.ts)에는 tsconfig.node.json의 설정이 적용됩니다.

결론적으로 src 폴더 내부에 존재하는 클라이언트 사이드에서만 동작할 코드(컴포넌트, 유틸 함수 등)을 위한 규칙은 tsconfig.app.json에 작성하시는걸 권장드립니다

two678

질문자

넵 감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이지현님.

타입스크립트와 Vite 설정과 관련하여 궁금증을 풀어드리겠습니다.

Vite를 사용하여 React와 TypeScript 프로젝트를 설정할 때, tsconfig.json 파일은 여전히 중요한 역할을 합니다. 다만, Vite와 같이 여러 환경에서 사용할 수 있는 프로젝트에서는 tsconfig.app.json과 tsconfig.node.json 등으로 환경별로 설정 파일을 분리해서 사용할 수도 있습니다.

tsconfig.app.json과 tsconfig.node.json의 역할:
- tsconfig.app.json은 주로 클라이언트 사이드, 즉 브라우저에서 실행되는 코드를 대상으로 합니다. 여기에서는 React 및 DOM 관련 라이브러리를 포함하는 경우가 많습니다.
- tsconfig.node.json은 Node.js에서 실행되는 서버 사이드 코드나 빌드 도구 설정 파일에 대해 사용됩니다. 이에 따라, Vite와 같은 도구의 설정 파일(vite.config.ts)에는 tsconfig.node.json의 설정이 적용됩니다.
옵션 설정:
- Vite (React+TypeScript) 프로젝트에서도 타입 체크와 빌드에 관련된 설정은 tsconfig.app.json에 주로 포함됩니다. 강의에서 추가로 제공된 옵션이나 설정이 있다면, 그것이 브라우저 환경에서 사용되는 것이라면 tsconfig.app.json에 적용하는 것이 맞습니다.
- 두 파일 모두에서 공통적으로 필요한 설정이 있다면, 해당 설정은 메인 tsconfig.json 파일로 관리하고, 각 환경별로 특화된 설정은 각각의 설정 파일에서 오버라이드하는 것이 가능합니다.
Vite와 함께 하는 경우:
- Vite는 내장된 현대적인 모듈 시스템과 빠른 빌드를 제공하므로 위의 설정을 통해 최적화할 수 있습니다. 라이브러리와 모듈의 분리된 설정은 프로젝트의 유지보수성과 성능을 크게 향상시켜줍니다.

참고 자료

Managing TypeScript Settings에 대한 기존 질문 및 답변에서 유사한 설정 및 최적화 방법에 대한 자세한 설명이 있으니 참고하시면 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

타입스크립트 vite 로 설정할때 어떻게 해야되나요??

참고 자료