이 강좌는 전적으로 JavaScript로 작성되었지만, React Three Fiber와 함께 TypeScript를 사용할 수도 있습니다.

TypeScript는 JavaScript의 상위 집합으로 언어에 타입을 추가합니다. 오류를 조기에 발견하고 자동 완성과 문서화로 더 나은 개발자 경험을 제공하는 훌륭한 방법입니다.

TypeScript를 사용할지 여부는 여러분에게 달려 있습니다. 결정을 돕기 위해 고려해야 할 질문은 다음과 같습니다:

• 구축하려는 프로젝트 종류: 3D 경험을 초안으로 작성 중입니까, 아니면 출시할 의도로 빌드하고 있습니까? 작은 프로젝트입니까, 큰 프로젝트입니까? 오랫동안 유지해야 합니까?
• 팀: 혼자 작업합니까, 아니면 다른 사람과 함께 작업합니까? 주석과 마찬가지로, 타입은 다른 사람이 코드를 더 쉽게 이해하도록 만드는 훌륭한 방법입니다.

옳고 그른 답은 없으며, 프로젝트에 가장 적합한 것을 선택하는 것은 여러분의 몫입니다. 라이브러리가 TypeScript로 작성되어 있기 때문에, JavaScript를 사용하더라도 그로부터 혜택을 누릴 수 있습니다.

이제 함께 시작 프로젝트를 TypeScript로 쉽게 변환하고 React Three Fiber와 함께 사용하는 방법을 알아보겠습니다.

하지만 이 강좌는 TypeScript 튜토리얼이 아니므로, 경험이 없고 더 배우고 싶다면 여기에서 시작하세요.

설정

setup 레슨에서는 Vite를 사용하여 새 프로젝트를 처음부터 만들었습니다. 새 프로젝트를 시작하는 경우, 동일한 단계를 따르고 JavaScript 대신 TypeScript 변형을 선택하여 프로젝트를 설정할 수 있습니다. (설정 후 여기로 돌아와서 어떻게 사용하는지 확인하는 것을 잊지 마세요 🤭)

이제 기존 프로젝트를 TypeScript로 변환하는 방법을 알아보겠습니다.

시작 프로젝트는 setup 레슨의 최종 결과와 동일하지만, 모든 프로젝트에 대해 단계는 동일합니다.

TypeScript 설치

먼저 프로젝트에 TypeScript를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

Copy
yarn add -D typescript

-D는 TypeScript를 개발 의존성으로 설치합니다. (최종 프로덕션 빌드에서는 필요하지 않기 때문입니다)

TypeScript는 빌드 과정에 새로운 단계를 추가합니다. 프로젝트를 실행하기 전에 TypeScript 파일을 JavaScript로 컴파일해야 합니다. 이를 위해 package.json의 빌드 스크립트를 다음과 같이 업데이트해야 합니다:

Copy
"build": "tsc && vite build"

tsc 명령어는 TypeScript 파일을 JavaScript로 컴파일하고, vite build 명령어는 프로젝트를 일반적으로 빌드합니다.

파일 확장자는 .jsx 대신 .tsx, .js 대신 .ts로 변경됩니다. package.json 파일에서 lint 스크립트도 이를 반영하여 조정할 수 있습니다:

Copy
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

TypeScript 설정

프로젝트 루트에 tsconfig.json 파일을 만들어 TypeScript를 구성해야 합니다:

Copy
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* 번들러 모드 */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

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

그리고 tsconfig.node.json을 만듭니다:

Copy
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

이 설정은 Vite를 사용하는 React 프로젝트의 기본 옵션입니다. 자세한 내용은 컴파일러 옵션 문서 페이지에서 확인할 수 있습니다.

ESLint 설정

TypeScript를 고려하여 .eslintrc.cjs 파일을 업데이트해야 합니다:

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parser: "@typescript-eslint/parser",
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

두 개의 새로운 패키지가 필요합니다:

Copy
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser