우당탕탕 개발일기

[TypeScript] REACT + TypeScript 준비 본문

What I Learned/TypeScript

[TypeScript] REACT + TypeScript 준비

rilee 2022. 12. 29. 10:57
728x90

0. 타입스크립트 설치 및 개발환경 세팅

npm install -g typescript

npx create-react-app my-app --template typescript

https://www.kenrhee.com/blog/getting-started-with-typescript-with-react

 

Typescript + React 시작하기

Typescript + React 시작하기 리액트 프로젝트에서 타입스크립트를 처음 프론트엔드 개발자를 위한 간략한 안내서 이 글은 타입스크립트를 이용하여 리액트 프로젝트를 처음 시작하는 프론트엔드

www.kenrhee.com

 

 

 

1. 기초 세팅

- tsconfig.json 파일 생성 (명령어 `tsc --init`으로도 가능)
- 타입스크립트 사용에 필요한 패키지 설치

// react의 Typescipt 버전
npm install -D @types/react  

// react-dom의 Typescipt 버전
npm install -D @types/react-dom        

// .ts/.tsx확장자를 읽어들이는 로더
npm install -D ts-loader

https://memostack.tistory.com/281

 

기존 React App에 Typescript 적용하기

기존 React App에 Typescript 적용하기 Typescript 의존성 추가 타입 스크립트를 적용하기 위해 필요한 라이브러리들을 package.json에 의존성을 추가한다. (아래 명령어 참고) $ yarn add typescript @types/node @types

memostack.tistory.com

 

https://velog.io/@foreverchoi0706/%EB%B0%B0%EC%9B%8C%EC%84%9C-%EB%82%98%EC%A3%BC%EB%8A%94-React%EC%97%90-Typescript-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

 

배워서 나주는 React에 Typescript 적용하기

배워서 나주는 시리즈 여섯번째 이번에는 React에 Typescript를 적용해볼 것이다. 1) Typescript의 장점 개발 전체에서 사용되는 데이터들의 포맷을 강제하여 협업에서 강력한 안정성과 편의성을 발휘

velog.io

 

 

여기까지 하면 npm start 했을 때 화면에 띄워지는 것까지 확인할 수 있다!

728x90