VIte를 이용한 React + TypeScript 세팅

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

해결된 질문

작성

355

안녕하세요 강사님, 리액트 강의에 이어서 타입스크립트 강의까지 덕분에 열심히 공부하고 있습니다!

Vite를 이용해서 React + TypeScript를 세팅하려고 하는데 질문이 있어서 여쭤봅니다!

1. npm i @types/node @types/react @types/react-dom @types/jest 처럼 타입 선언 패키지를 따로 설치해야 하나요?

2. 혹시 tsconfig.json과 tsconfig.node.json의 차이를 알려주실 수 있나요?

3. tsconfig.json과 tsconfig.node.json를 수정하려면 둘다 동일하게 수정해야 하나요?

4. tsconfig.json의 컴파일러옵션에서 target옵션의 ES2020을 ES5로 수정하면 lib 또한 ES5로 수정해야하나요?

/* tsconfig.node.json */
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": ["vite.config.ts"]
}

/* tsconfig.json */
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

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

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

typescript

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

AI 인턴의 응답에 몇자 덧붙이자면 ...

보통은 따로 설치해주는게 일반적이지만 typescript가 이미 적용된 템플릿을 사용하실 경우 자동으로 설치되어 있는 경우도 많습니다.
tsconfig.node.json의 메인 역할을 Node.js 환경을 대상으로 하는 코드의 TypeScript 설정입니다. Node.js 백엔드 어플리케이션 또는 Next.js 어플리케이션에서 사용하곤 합니다.

무조건 그렇다고 말씀드리긴 어렵습니다. 그러나 보통은 그렇지 않습니다. 대게 tsconfig.node.json을 추가로 사용하는 경우 몇몇 옵션을 다르게 설정하거나 추가적인 옵션을 더하게 됩니다. 그렇기 때문에 보통은 그렇지 않다고 보는게 맞을 것 같습니다.

넵 맞춰주시는게 가장 좋습니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

네, Vite를 이용해서 React와 TypeScript를 세팅할 때, @types/node, @types/react, @types/react-dom, @types/jest와 같은 타입 선언 패키지를 따로 설치하는 것이 일반적입니다. 이러한 타입 선언 패키지들은 TypeScript 컴파일러에게 해당 라이브러리의 타입 정보를 제공하여, 더 나은 타입 체킹과 자동완성 기능을 활용할 수 있게 해줍니다.
tsconfig.json은 TypeScript 프로젝트의 루트 설정 파일로, 프로젝트 전체에 대한 컴파일 옵션을 정의합니다. 반면, tsconfig.node.json은 특정 부분 또는 서브 프로젝트의 컴파일 설정을 오버라이딩하기 위해 사용됩니다. 예를 들어, 백엔드 코드와 프론트엔드 코드를 동일한 프로젝트 내에서 관리하면서 각기 다른 컴파일 옵션을 적용할 때 유용할 수 있습니다.
tsconfig.json과 tsconfig.node.json을 수정할 때 동일하게 수정해야 하는지는 프로젝트의 구성과 요구 사항에 따라 달라집니다. 일반적으로, tsconfig.node.json은 tsconfig.json의 설정을 상속받거나 특정 설정만 오버라이드하여 사용합니다. 따라서, 두 파일에 중복되는 설정이 있다면 프로젝트의 명확성과 유지보수성을 위해 고려하여 조정하는 것이 좋습니다.
tsconfig.json의 compilerOptions에서 target 옵션을 ES2020에서 ES5로 수정할 경우, lib 옵션도 그에 맞게 수정하는 것이 좋습니다. 특히, 최신 JavaScript 기능을 구형 브라우저에서도 지원하기 위해서는 lib 옵션에서 ES5와 함께 필요한 추가적인 폴리필(polyfill) 라이브러리를 명시해야 할 수 있습니다. 예를 들어, ES2020 특성을 사용하려면 관련 폴리필이 필요할 수 있으므로, lib 옵션을 적절히 조정해야 합니다.

질문에 대한 답변이 도움이 되었길 바랍니다. 추가적인 궁금증이 있으시면 언제든 질문해 주세요.

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

VIte를 이용한 React + TypeScript 세팅