새로운 Create React App 프로젝트에 TypeScript를 적용하는 방법과 기존 프로젝트에 추가하는 방법을 설명한다. 단계별로 따라하면 초급 개발자도 쉽게 TypeScript 환경을 구축할 수 있다.
새로운 프로젝트 생성
새로운 React 프로젝트를 생성할 때 TypeScript 템플릿을 사용하여 즉시 TypeScript를 적용할 수 있다. 다음 명령어를 실행한다.
이 명령어는 'my-app'이라는 이름의 새 React 프로젝트를 TypeScript가 미리 구성된 상태로 생성한다. 'my-app' 대신 원하는 프로젝트 이름을 사용한다.
기존 프로젝트에 TypeScript 추가
이미 존재하는 Create React App 프로젝트에 TypeScript를 추가하는 방법이다. 먼저 필요한 TypeScript 및 타입 정의 패키지를 설치한다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행한다.
npm 사용 시:
Yarn 사용 시:
패키지 설치가 완료되면, 모든 `.js` 파일을 `.ts`로, 모든 `.jsx` 파일을 `.tsx`로 변경한다. 예를 들어, `src/index.js`는 `src/index.ts`로, `src/App.js`는 `src/App.tsx`로 변경해야 한다. 파일 확장자 변경 후, 개발 서버를 다시 시작하여 변경 사항이 적용되었는지 확인한다. 대부분의 경우 별도의 설정 없이 TypeScript가 자동으로 인식되고 컴파일된다. 이 과정으로 기존 React 프로젝트를 TypeScript 환경으로 전환할 수 있다.
새로운 프로젝트 생성
새로운 React 프로젝트를 생성할 때 TypeScript 템플릿을 사용하여 즉시 TypeScript를 적용할 수 있다. 다음 명령어를 실행한다.
npx create-react-app my-app --template typescript이 명령어는 'my-app'이라는 이름의 새 React 프로젝트를 TypeScript가 미리 구성된 상태로 생성한다. 'my-app' 대신 원하는 프로젝트 이름을 사용한다.
기존 프로젝트에 TypeScript 추가
이미 존재하는 Create React App 프로젝트에 TypeScript를 추가하는 방법이다. 먼저 필요한 TypeScript 및 타입 정의 패키지를 설치한다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행한다.
npm 사용 시:
npm install --save typescript @types/node @types/react @types/react-dom @types/jestYarn 사용 시:
yarn add typescript @types/node @types/react @types/react-dom @types/jest패키지 설치가 완료되면, 모든 `.js` 파일을 `.ts`로, 모든 `.jsx` 파일을 `.tsx`로 변경한다. 예를 들어, `src/index.js`는 `src/index.ts`로, `src/App.js`는 `src/App.tsx`로 변경해야 한다. 파일 확장자 변경 후, 개발 서버를 다시 시작하여 변경 사항이 적용되었는지 확인한다. 대부분의 경우 별도의 설정 없이 TypeScript가 자동으로 인식되고 컴파일된다. 이 과정으로 기존 React 프로젝트를 TypeScript 환경으로 전환할 수 있다.
댓글
댓글 쓰기