React에 TypeScript 적용방법

 

useEffect

 

 

 

 

 

npm install --save-dev @typed/패키지_이름

TypeScript로 프로젝트 생성하기

npx create-react-app . --template typescript

 

여기서 마침표(.)는 현재 폴더라는 의미

npx create-react-app 폴더명 --template typescript

 

JavaScript 프로젝트를 TypeScript로 마이그레이션 하기

새롭게 생성한 프로젝트의 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 폴더에 있는 파일들을 지우고, 기존 프로젝트의 코드도 옮겨줍니다.

파일 확장자 바꾸기
이제 src 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꾸면 됩니다. 파일에 JSX 문법이 있다면 .tsx로 확장자를 바꾸고, 일반적인 자바스크립트 파일이라면 .ts로 확장자를 바꿔주세요.

혹시 react-app-env.d.ts 파일의 내용이 궁금하신 분들은 파일을 열고 react-scripts라는 부분에 마우스 커서를 가져가 보세요. Windows에서는 Ctrl + 클릭, macOS에서는 Cmd + 클릭해 보시면 타입 정의를 볼 수 있습니다. 프로젝트에서 사용하는 여러 파일 확장자에 대한 타입이 정의되어 있습니다. 지금은 일단 넘어갈게요. 이런 타입 정의에 대해서는 나중에 CSS 파일, 이미지 파일 등의 타입을 다룰 때 다시 살펴보도록 하겠습니다.

 

 

 

 

 

인데요. VS Code에서는 기본적으로 터미널을 열면 현재 열린 폴더에서 터미널을 열어주기 때문에, 마침표를 입력하면 현재 폴더, 즉 VS Code가 열어 놓은 폴더에 프로젝트를 생성하게 됩니다. --template은 유닉스 커맨드에서 옵션을 사용하는 부분인데요. template라는 옵션으로 typescript를 사용하겠다는 의미입니다. 명령어를 풀어서 표현하자면 "Create React App이라는 걸 사용해서 현재 폴더에 프로젝트를 만드는데, 템플릿은 타입스크립트 템플릿을 사용하겠다"라고 할 수 있겠죠?

 

Create React App에서는 "템플릿"이라는 게 있습니다. 

템플릿은 만들 프로젝트의 형태들을 미리 세팅해 놓은 틀이라고 할 수 있는데요. 여러 가지 템플릿들이 있는데, 이번 레슨에서는 그중에 타입스크립트 템플릿을 선택해서 프로젝트를 생성할 겁니다. 참고로 공식적으로 제공하는 타입스크립트 템플릿 말고도 다른 개발자들이 만든 템플릿을 NPM 사이트에서 찾아볼 수 있어요.

 

 

React와 Next.js 프로젝트를 생성할 때 자주 사용하는 방법들을 위주로, 프로젝트에 타입스크립트를 세팅하는 방법에 대해 알아보겠습니다. Create React App, Vite, Create Next App라는 도구들을 위주로 다룰 건데요. 내용을 골라서 들을 수 있도록 구성했으니까, 필요한 부분이나 궁금한 부분만 골라서 들으시면 됩니다.

그리고 기존에 자바스크립트로 만든 프로젝트를 타입스크립트로 바꾸다 보면, 종종 외부 패키지에서 타입을 찾을 수 없는 경우가 있는데요. 이번 챕터 마지막에서는 이런 경우에 대처하는 방법을 설명하고 있으니까, 꼭 알고 넘어가시는 걸 추천드릴게요.

 

요즘은 React 개발자들도 Vite라는 프로젝트 생성 도구를 많이 사용하는데요. Create React App과 비교했을 때 좀 더 라이트한 기능의 프로젝트를 만들어주고, 빌드 속도가 조금 더 빠르다고  알려져 있습니다. 그리고 리액트 프로젝트 말고도 다양한 프로젝트를 생성하는 데 사용할 수 있다는 장점도 있죠. 이번 레슨에서는 Vite로 리액트 타입스크립트 프로젝트를 만드는 방법에 대해서 알아보겠습니다.

TypeScript로 프로젝트 생성하기
Vite에서는 템플릿이라는 게 있는데요, 생성할 프로젝트의 형태들을 미리 세팅해 놓은 틀이라고 생각하시면 됩니다. 리액트뿐만 아니라 Vue, Svelte 등 여러 프로젝트의 템플릿을 제공합니다. 우리는 그중에서도 타입스크립트를 위한 템플릿을 선택해서 프로젝트를 생성할 겁니다. 기본적으로 제공하는 템플릿은 공식문서에서 확인할 수 있고요, 개발자들이 만든 템플릿은 awesome-vite라는 리포지토리에서 확인할 수 있습니다.

 

npx create-vite-app . --template react-ts

여기서 마침표(.)는 현재 폴더라는 의미인데요. VS Code에서는 기본적으로 터미널을 열면 현재 열린 폴더에서 터미널을 열어주기 때문에, 마침표를 입력하면 현재 폴더에 프로젝트를 생성하게 됩니다. --template은 유닉스 커맨드에서 옵션을 사용하는 부분인데요. template라는 옵션으로 react-ts를 사용하겠다는 의미입니다. 명령어를 풀어서 표현하자면 "Create Vite App"이라는 걸 사용해서 현재 폴더에 프로젝트를 만드는데, 템플릿은 리액트 타입스크립트 템플릿을 사용하겠다"라고 할 수 있겠죠?

 

npx create-vite-app 원하는_폴더_이름 --template react-ts

npm install

 

JavaScript 프로젝트를 TypeScript로 마이그레이션 하기
아이폰에 있던 주소록을 안드로이드로 옮기는 것처럼 프로그래밍에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 걸 마이그레이션(Migration)이라고 합니다. Vite로 이미 생성한 프로젝트가 있다면, 마이그레이션을 하는 가장 쉬운 방법은 리액트 타입스크립트 템플릿으로 새로운 프로젝트를 생성한 다음, 필요한 파일들을 복사해 오는 건데요. 기존 프로젝트에서 필요한 패키지를 설치하고, 새 프로젝트를 생성한 다음에 파일을 복사해 오는 방식으로 진행해 볼게요.

새로운 프로젝트를 타입스크립트 템플릿으로 생성하기
위쪽의 "TypeScript로 프로젝트 생성하기"를 참고해서 원하는 위치에 프로젝트를 생성해 주세요. 필요한 파일을 복사하는 용도이기 때문에 위치는 크게 상관없습니다.

기존 소스코드 파일 복사하기
새롭게 생성한 프로젝트의 src 폴더에서 src/react-app-env.d.ts 파일을 제외하고 모두 지워주세요.

src/react-app-env.d.ts 파일은 반드시 남겨두어야 합니다. 이 파일에는 Vite 프로젝트에서 미리 세팅해 놓은 타입 정의가 적혀있습니다. 프로젝트에서 사용하는 여러 파일 확장자에 대한 타입이 정의인데, 지금은 일단 넘어갈게요. 이런 타입 정의에 대해서는 나중에 CSS 파일, 이미지 파일 등의 타입을 다룰 때 다시 살펴보도록 하겠습니다.

기존 프로젝트의 소스코드에서 src 폴더에 있는 파일들을 복사해서 새로운 프로젝트의 src 폴더로 붙여 넣습니다.

 

마찬가지로 기존 프로젝트의 소스코드에서 index.html 파일과 index.html 에서 사용하는 favicon.ico 같은  파일들이 있다면 같이 복사해서 새로운 프로젝트로 옮겨줍니다.

파일 확장자 바꾸기
이제 src 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꾸면 됩니다. 파일에 JSX 문법이 있는 .jsx 파일은 .tsx로 확장자를 바꾸고, 일반적인 .js 자바스크립트 파일이라면 .ts로 확장자를 바꿔주세요.

Next.js에서는 공식적으로 프로젝트를 생성하는 도구인 Create Next App을 제공합니다. 이번 레슨에서는 이걸 사용해서 타입스크립트를 사용하는 프로젝트를 만드는 방법과 기존 자바스크립트 프로젝트를 타입스크립트로 옮기는 방법에 대해 알아보겠습니다. 공식 문서에서 제공하는 가이드에 따라서 하면 어렵지 않게 할 수 있습니다.

TypeScript로 프로젝트 생성하기
터미널에 익숙하지 않은 경우
만약 터미널에 익숙하지 않은 분들이라면, 우선 프로젝트를 위한 폴더를 하나 만드세요. 그리고 그 폴더를 VS Code에서 열어주세요. 단축키(Ctrl+```)를 사용해서 터미널을 켭니다. 터미널에서 아래 명령어를 입력해서 프로젝트를 생성하면 됩니다.

 

npx create-next-app .

 

 

여기서 마침표(.)는 현재 폴더라는 의미인데요. VS Code에서는 기본적으로 터미널을 열면 현재 열린 폴더에서 터미널을 열어주기 때문에, 마침표를 입력하면 현재 폴더에 프로젝트를 생성하게 됩니다. 명령어를 풀어서 표현하자면 "Create Next App"이라는 걸 사용해서 현재 폴더에 프로젝트를 만든다는 의미입니다.

 

그럼 이렇게 타입스크립트를 사용할 거냐고 물어보는데요. Yes를 선택하고 엔터를 입력하고, 프로젝트 생성을 계속 진행하면 됩니다.

터미널에 익숙한 경우
만약 터미널을 사용하는데 익숙한 분들이라면, 터미널에서 프로젝트를 생성할 경로로 들어간 다음 아래와 같은 명령어로 생성할 수 있습니다. 마찬가지로 TypeScript를 사용할 거냐고 물어볼 때 Yes를 선택해서 프로젝트를 생성하세요.

 

npx create-next-app 원하는_폴더_이름

 

프로젝트를 TypeScript로 마이그레이션 하기
아이폰에 있던 주소록을 안드로이드로 옮기는 것처럼 프로그래밍에서 데이터나 소프트웨어 같은 걸 한 시스템에서 다른 시스템으로 옮기는 걸 마이그레이션(Migration)이라고 합니다. Next.js에서는 마이그레이션도 편리하게 제공합니다.

파일 확장자 바꾸기
우선 폴더에 있는 자바스크립트 파일의 확장자를 타입스크립트로 바꿔줍니다. 파일에 JSX 문법이 있는 .jsx 파일은 .tsx로 확장자를 바꾸고, 일반적인 .js 자바스크립트 파일이라면 .ts로 확장자를 바꿔주세요.

개발모드 실행하기
터미널에서 아래 명령어를 입력해 Next.js 개발모드를 실행합니다. 한 번 실행하면 타입스크립트 파일을 인식해고 알아서 tsconfig.json 같은 필요한 파일들을 생성해 줍니다.

npm run dev

 

설치하기

npm install --save-dev @typed/패키지_이름

 

 

 

[인터랙티브 자바스크립트]
HTML DOM 노드 개념
이벤트 핸들러 개념과 사용하는 방법
[타입스크립트 기본기]
타입스크립트 기초 문법
인터페이스
제네릭
tsconfig.json
[React 웹 개발 시작하기]
컴포넌트 만드는 방법
Props, State 개념
[React로 데이터 다루기]
입력폼을 다루는 방법
Hook, Context 개념
다음은 Next.js 관련 내용을 수강하고자 할 때 필요한 선이수 토픽입니다.

(옵션) [Next.js로 웹사이트 만들기]
커스텀 App 컴포넌트
프리렌더링
준비 환경
Node.js v18.0 이상 버전을 설치해 주세요.
참고: Node.js 튜토리얼(Windows), Node.js 튜토리얼(macOS)
VS Code를 설치해 주세요.
참고: VS Code 튜토리얼(Windows), VS Code 튜토리얼(Mac)
Chrome 웹 브라우저를 사용합니다.