CRA(Create-React-App)을 이용해 TypeScript로 React 앱 만들기

　CRA(Create-React-App)을 이용하여 TypeScript로 React 앱을 만들어보겠습니다. 아주 간단하기 때문에 쉽게 따라하실 수 있습니다. CRA를 이용하는 방법에는 여러 가지 방법이 있겠습니다만, 여기서는 공식 문서에 나온 방법대로 진행하겠습니다.

　먼저, 기존에 사용하던 방법인 create-react-app-typescript를 이용한 방법입니다.

$ # npm을 이용한 방법
$ npx create-react-app my-app --scripts-version=react-scripts-ts
$ cd my-app
$ npm start
$ # yarn을 이용한 방법
$ yarn create react-app my-app --scripts-version=react-scripts-ts
$ cd my-app
$ yarn start

　끝입니다! 위의 방법대로 진행하면 아래와 같은 파일들이 생성되며, 그대로 TypeScript를 이용하여 프로젝트를 진행하시면 됩니다.

　다음은 기본 스크립트를 이용하여 만드는 방법입니다. 이 방법이 더 간단합니다.

$ # npm을 이용한 방법
$ npx create-react-app my-app --typescript
$ # yarn을 이용한 방법
$ yarn create react-app my-app --typescript

　첫 번째로 소개한 커맨드보다 짧으며, 공식 지원이 되는 스크립트입니다. 결과는 아래와 같습니다! 아직 프로젝트에서 위 커맨드를 사용하여 리액트 앱을 생성해본 적은 없지만, 앞으로는 위 커맨드를 사용하여 진행할 듯 합니다. ㅎㅎ

　이미 기존에 CRA로 프로젝트를 생성한 상태에서 TypeScript를 추가하고 싶다면 어떻게 해야 할까요? 다 방법이 있습니다. 다만 이 방법은 creat-scripts 2.1.0 버전 이상이 필요합니다.

$ # CRA로 리액트 앱을 먼저 생성
$ yarn create react-app my-app
$ # 필요한 패키지를 설치
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

　위 방법으로 TypeScript 관련 패키지를 설치하신 후, .js 파일들을 모두 .tsx로 확장자를 변경해줍니다. 그런 다음 다시 개발 서버를 시작해주시면 됩니다. 다시 시작하시면 자동으로 tsconfig.json 파일이 생성됩니다. 아래와 같습니다.

　끝입니다! 리액트를 Visual Studio Code와 함께 사용하니 TypeScript를 사용하는 게 엄청 편하더라고요. 가능하다면 앞으로 되도록이면 프로젝트는 모두 TypeScript를 사용해 진행하지 않을까 싶습니다. JavaScript에서 사용할 수 있는 타입 체커인 Flow가 있긴 하지만 써보니 TypeScript가 훨씬 편하더라고요. ㅎㅎ

　어쨌든 오늘도 글 봐주셔서 감사합니다. 앞으로는 이런 개발 관련 글도 자주 써볼 수 있도록 하겠습니다!