typescript 로 된 프로젝트를 만든다고 명시해 주기만하면 typescript 기반 react 프로젝트를 만들 수 있다.
npx create-react-app [프로젝트 폴더명] --template typescript
.ts파일이 있는 반면에 .tsx파일도 있다. 이 둘의 차이점은 무엇일까?
.ts파일은 pure typescript 파일이다. javascript에서 .js에 대응한다고 생각하면 편하다
.tsx는 typescript의 react문법을 담아내기 위한 확장자 이다. .jsx에 대응한다고 생각하면 편하다.
이제 이프로젝트를 실행하여 웹상에 띄워보도록 하자.
이 프로젝트를 그대로 실행하면 다음과 같은 화면이 웹상에 띄워지게 된다.
react-router-dom, styled-components 등 필요한 모듈이 있다면 아래처럼 모듈 이름 앞에 @types/를 붙여서 타입스크립트 버전으로도 설치해야 함!
npm i --save-dev @types/styled-components
npm i --save-dev @types/react-router-dom
코딩을 즐겨보자