Create React App 프로젝트
TypeScript로 프로젝트 생성하기
Create React App에는 템플릿이라는게 있다. 템플릿은 만들 프로젝트의 형태들을 미리 세팅해 좋은 틀이라고 할 수 있다.
npx create-react-app . --template typescript
npx create-react-app 원하는_폴더_이름 --template typescript
JavaScript 프로젝트를 TypeScript로 마이그레이션 하기
IT 분야에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 걸 마이그레이션이라고 부른다. 프로젝트를 마이그레이션 하는 가장 쉬운 방법은 타입스크립트 템플릿으로 새로운 프로젝트를 생성한 다음, 기존 소스코드 파일들을 복사해 오는 것이다.
1. 새로운 프로젝트를 타입스크립트 템플릿으로 생성하기
위쪽의 "TypeScript로 프로젝트 생성하기"를 참고해서 원하는 위치에 프로젝트를 생성한다. 필요한 파일을 복사하는 용도이기 때문에 위치는 크게 상관없다.
2. 기존 소스코드 파일 복사하기
새롬게 생성한 프로젝트의 src 폴더에서 아래 파일들만 남기고 모두 지운다.
src/react-app-env.d.ts
src/reportWebVitals.ts
src/setupTests.ts
기존 프로젝트의 소스코드에서 src 폴더에 있는 파일들을 복사해서 새로운 프로젝트의 src 폴더로 붙여 넣는다. 마찬가지로 새로운 프로젝트의 public 폴더에 있는 파일들을 지우고, 기존 프로젝트의 코드도 옮겨준다.
3. 파일 확장자 바꾸기
이제 src 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꾸면 된다. 파일에 JSX 문법이 있다면 .tsx로 확장자를 바꾸고, 일반적인 자바스크립트 파일이라면 .ts로 확장자를 바꾸면 된다.
Vite 프로젝트
Vite는 Create React App과 비교했을 때 좀 더 라이트한 기능의 프로젝트를 만들어주고 빌드 속도가 더 빠르다고 알려져 있다. 그리고 리액트 프로젝트 말고도 다양한 프로젝트를 생성하는데 사용할 수 있다는 장점도 있다.
TypeScript로 프로젝트 생성하기
Vite에서는 템플릿이라는 게 있는데, 생성할 프로젝트의 형태들을 미리 세팅해 놓은 틀이라고 생각하면 된다. 리액트뿐만 아니라 Vue, Svelte 등 여러 프로젝트의 템플릿을 제공한다.
npx create-vite-app . --template react-ts //VsCode로 설치하는 경우
npx create-vite-app 원하는_폴더_이름 --template react-ts //터미널로 직접 설치하는 경우
npm install
Vite는 Create React App과 달리 패키지를 직접 설치해 주어야 하므로 npm install도 해줘야 한다.
JavaScript 프로젝트를 TypeScript로 마이그레이션 하기
- 원하는 위치에 타입스트립트 프로젝트를 생성한다. (TypeScript로 프로젝트 생성하기 참고)
- 새롭게 생성한 프로젝트의 src 폴더에서
src/react-app-env.d.ts파일을 제외하고 모두 지운다. - 기존 프로젝트의 소스코드에서 src 폴더에 있는 파일들을 복사해서 새로운 프로젝트의 src 폴더에 붙여넣는다.
- 파일 확장자를 타입스크립트로 바꾼다. (.jsx 파일은 -> .tsx로 확장자를 바꾸고, .js -> .ts)
Next.js 프로젝트
Next.js에서는 공식적으로 프로젝트를 생성하는 도구인 Create Next App을 제공한다.
TypeScript로 프로젝트 생성하기
npx create-next-app . //VsCode로 설치하는 경우
npx create-next-app 원하는_폴더_이름 //터미널로 직접 설치하는 경우,프로젝트를 생성할 경로로 들어간 후 명령어 입력
프로젝트를 TypeScript로 마이그레이션 하기
1. 파일 확장자 바꾸기
자바스크립트 파일의 확장자를 타입스크립트로 바꿔준다. (.jsx 파일은 -> .tsx로 확장자를 바꾸고, .js -> .ts)
2. 개발모드 실행하기
터미널에서 아래 명령어를 입력해 Next.js 개발모드를 실행한다. 한 번 실행하면 타입스크립트 파일을 인식해 알아서 tsconfig.json 같은 필요한 파일들을 생성해준다.
npm run dev
기존 패키지에서 타입을 찾을 수 없을 때
@types 타입 설치하기
사용하던 패키지 중에 타입스크립트로 바꾸고 나면 import 구문에서 주의 표시가 나오는 경우가 있다.
가이드에 따라 설치하면 해결된다. 개발할 때만 사용하므로 --save-dev 옵션으로 설치
npm install --save-dev @types/패키지_이름
