타입스크립트 세팅하기
1. Create React App 프로젝트
(1) TypeScript로 프로젝트 생성하기
Create React App에서는 "템플릿"이라는 게 있다. 템플릿은 만들 프로젝트의 형태들을 미리 세팅해 놓은 틀이라고 할 수 있다. 여러 가지 템플릿들이 있는데, 타입스크립트 템플릿을 선택해서 프로젝트를 생성하도록 하겠다. 참고로 공식적으로 제공하는 타입스크립트 템플릿 말고도 다른 개발자들이 만든 템플릿을 NPM 사이트에서 찾아볼 수 있다.
1. 터미널에 익숙하지 않은 경우
프로젝트를 위한 폴더를 하나 만들어라. 그리고 그 폴더를 VSCode에서 열고, 터미널을 연다. 터미널에서 npx create-react-app . --template typescript을 입력한다. 마침표(.)는 현재 폴더라는 의미이다. VSCode에서는 기본적으로 터미널을 열면 현재 열린 폴더에서 터미널을 열어주기 때문에, 마침표를 입력하면 현재 폴더, 즉 VSCode가 열어 놓은 폴더에 프로젝트를 생성하게 된다. --template은 유닉스 커맨드에서 옵션을 사용하는 부분이다. template라는 옵션으로 typescript를 사용하겠다는 의미이다. 잘 생성했으면 tsconfig.json 파일과 함께 프로젝트가 생성된다.
2. 터미널에 익숙한 경우
npx create-react-app 원하는_폴더_이름 --template typescript(2) JavaScript 프로젝트를 TypeScript로 마이그레이션 하기
IT 분야에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 걸 마이그레이션(Migration)이라고 부른다. Create React App으로 이미 생성한 자바스크립트 프로젝트가 있다면, 프로젝트를 마이그레이션을 하는 가장 쉬운 방법은 타입스크립트 템플릿으로 새로운 프로젝트를 생성한 다음, 기존 소스코드 파일들을 복사해 오는 것이다.
1. 새로운 프로젝트를 타입스크립트 템플릿으로 생성하기
위의 프로젝트 생성하는 방법을 참고하여 원하는 위치에 프로젝트를 생성해라. 필요한 파일을 복하는 용도이기 때문에 위치는 크게 상관없다.
2. 기존 소스코드 파일 복사하기
새롭게 생성한 프로젝트의 src 폴더에서 아래 파일들을 제외하고 모두 지워라.
src/react-app-env.d.ts
src/reportWebVitals.ts
src/setupTests.ts만약 성능 측정 기능(reportWebVitals.ts 파일) 그리고 테스트 기능(setupTests.ts 파일)을 사용하지 않는다면 이것도 지워도 괜찮다. 하지만 src/react-app-env.d.ts 파일은 반드시 남겨두어야 한다. 이 파일은 Create React App에서 미리 세팅해 높은 타입들을 불러오는 파일이기 때문이다.
기존 프로젝트의 소스코드에서 src 폴더에 있는 파일들을 복사해서 새로운 프로젝트의 src 폴더로 붙여 넣는다. 마찬가지로 새로운 프로젝트의 public 폴더에 있는 파일들을 지우고, 기존 프로젝트의 코드도 옮겨준다.
3. 파일 확장자 바꾸기
src 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꾸면 된다. JSX 문법이 있다면 .tsx로, 일반적인 파일이라면 .ts로 바꿔주면 된다.
4. 내가 쓴 코드가 바로 실행이 안 된다
기존 자바스크립트 파일을 타입스크립트 파일로 바꿨지만 아직 자바스크립트 문법으로 작성된 코드라서 당장은 타입 오류가 날 수 있다.
2. Vite 프로젝트
2023년을 기준으로 요즘은 React 개발자들도 Vite라는 프로젝트 생성 도구를 많이 사용한다. Create React App과 비교했을 때 좀 더 라이트한 기능의 프로젝트를 만들어주고, 빌드 속도가 조금 더 빠르다고 알려져 있다. 그리고 리액트 프로젝트 말고도 다양한 프로젝트를 생성하는 데 사용할 수 있다는 장점도 있다.
(1) TypeScript로 프로젝트 생성하기
Vite에도 템플릿이 있다. 리액트뿐만 아니라 Vue, Svelte 등 여러 프로젝트의 템플릿을 제공한다. 그중에서도 타입스크립트를 위한 템플릿을 선택해 프로젝트를 생성할 것이다. 기본적으로 제공하는 템플릿은 공식 문서에서 확인할 수 있고, 개발자들이 만든 템플릿은 awesome-vite라는 레포지토리에서 확인할 수 있다.
1. 터미널에 익숙하지 않은 경우
프로젝트를 위한 폴더를 하나 만들어라. 그리고 그 폴더를 VSCode에서 열고, 터미널을 연다. 터미널에서 npx create-vite-app . --template react-ts을 입력한다. 마침표(.)는 현재 폴더라는 의미이다. VSCode에서는 기본적으로 터미널을 열면 현재 열린 폴더에서 터미널을 열어주기 때문에, 마침표를 입력하면 현재 폴더, 즉 VSCode가 열어 놓은 폴더에 프로젝트를 생성하게 된다. --template은 유닉스 커맨드에서 옵션을 사용하는 부분이다. template라는 옵션으로 react-ts를 사용하겠다는 의미이다. 잘 생성했으면 tsconfig.json 파일과 함께 프로젝트가 생성된다.
Vite는 Create React App과 달리 패키지를 직접 설치해 주어야 한다. npm install을 통해 패키지를 설치하면 된다. 제대로 패키지를 설치했으면 node_modules 폴더가 생겼을 것이다.
2. 터미널에 익숙한 경우
npx create-vite-app 원하는_폴더_이름 --template react-ts
npm install(2) JavaScript 프로젝트를 TypeScript로 마이그레이션 하기
IT 분야에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 걸 마이그레이션(Migration)이라고 부른다. Vite로로 이미 생성한 자바스크립트 프로젝트가 있다면, 프로젝트를 마이그레이션을 하는 가장 쉬운 방법은 타입스크립트 템플릿으로 새로운 프로젝트를 생성한 다음, 기존 소스코드 파일들을 복사해 오는 것이다.
1. 새로운 프로젝트를 타입스크립트 템플릿으로 생성하기
위의 프로젝트 생성하는 방법을 참고하여 원하는 위치에 프로젝트를 생성해라. 필요한 파일을 복하는 용도이기 때문에 위치는 크게 상관없다.
2. 기존 소스코드 파일 복사하기
새롭게 생성한 프로젝트의 src 폴더에서 src/react-app-env.d.ts 파일을 제외하고 모두 지우면 된다. src/react-app-env.d.ts 파일은 반드시 남겨두어야 한다. 이 파일에는 Vite 프로젝트에서 미리 세팅해 높은 타입 정의가 적혀있다.
기존 프로젝트의 소스코드에서 src 폴더에 있는 파일들을 복사해서 새로운 프로젝트의 src 폴더로 붙여 넣는다. 마찬가지로 기존 프로젝트이 소스코드에서 index.html 파일과 index.html에서 사용하는 favicon.ico 같은 파일들이 있다면 같이 복사해서 새로운 프로젝트로 옮겨준다.
3. 파일 확장자 바꾸기
src 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꾸면 된다. JSX 문법이 있다면 .tsx로, 일반적인 파일이라면 .ts로 바꿔주면 된다.
4. 내가 쓴 코드가 바로 실행이 안 된다
기존 자바스크립트 파일을 타입스크립트 파일로 바꿨지만 아직 자바스크립트 문법으로 작성된 코드라서 당장은 타입 오류가 날 수 있다.
3. Next.js 프로젝트
(1) TypeScript로 프로젝트 생성하기
1. 터미널에 익숙하지 않은 경우
npx create-next-app .타입스크립트를 사용할 거냐옥 물어보는데, Yes를 선택하고 엔터를 입력하고, 프로젝트 생성을 진행하면 된다.
2. 터미널에 익숙한 경우
npx create-next-app 원하는_폴더_이름(2) 프로젝트를 TypeScript로 마이그레이션 하기
1. 파일 확장자 바꾸기
src 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꾸면 된다. JSX 문법이 있다면 .tsx로, 일반적인 파일이라면 .ts로 바꿔주면 된다.
2. 개발모드 실행하기
터미널에서 npm run dev를 입력해 Next.js 개발모드를 실행한다. 한 번 실행하면 타입스크립트 파일을 인식해 알아서 tsconfig.json 같은 필요한 파일들을 생성한다.
3. 내가 쓴 코드가 바로 실행이 안 된다
기존 자바스크립트 파일을 타입스크립트 파일로 바꿨지만 아직 자바스크립트 문법으로 작성된 코드라서 당장은 타입 오류가 날 수 있다.
4. 기존 패키지에서 타입을 찾을 수 없을 때
기존에 프로젝트에서 리액트 말고도 다른 패키지를 쓴 게 있다면, 추가로 타입을 설치해줘야 할 수도 있다.
(1) @types 타입 설치하기
사용하던 패키지 중에 타입스크립트 파일로 바꾸고 나면 가끔 아래 이미지처럼 import 구문에서 주의 표시가 나오는 경우가 있다.
에러 메시지를 읽어보면 타입 정의 파일이 없다고 한다. @types/react-modal이라는 패키지를 설치하라고 가이드하고 있다. 이 때 타입스크립트는 개발할 때만 사용하는 거니까 --save-dev 옵션으로 설치해야 한다는 점도 주의해야 한다.
npm install --save-dev @types/패키지_이름참고로 모든 패키지를 이렇게 설치해야 하는 건 아니다. 어떤 패키지들은 @types 패키지를 사용하고 어떤 패키지는 사용하지 않아도 된다. 타입을 찾을 수 없다고 오류가 난다면 @types/를 패키지 이름 앞에 붙여서 설치해주면 된다. @types를 사용하는 이유가 궁금하면 타입스크립트에서 @types 패키지를 사용하는 이유에서 더 자세히 알아보면 좋다.
