공부하면서/React

[React] React에 TypeScript 적용하기

코린영이 2024. 2. 6. 12:27
728x90
반응형

  

목차

1. TypeScript로 React 시작하기

2. 에러

3. 참고사이트

 

 

1. TypeScript로 React 시작하기

 React 프로젝트에 들어갔다! Front는 저엉말 내 스타일이 아닌데,, 이것도 해봐야지 실력이 늘겠지,,!

 

 실습을 할 때에는 React + JavaScript 를 사용했는데 프로젝트 팀장님^^께서 TypeScript 를 사용하면 어떤가~~ 했고, 너어무 해보고 싶어서 React + TypeScript 프로젝트를 시작하게 되었다ㅏ!!

 

 TypeScript를 사용하는 이유는!! 단편적으로 TypeScript는 compile을 하는 과정에서 에러가 발생한다. 프로그램이 돌기도 전에 에러를 알 수 있어 시간 절약이 가능하다고 한다. 

 추가적인 차이점들은 블로그들을 찾아봤다.

 

프로젝트를 만들기 위해서 일단은,

npm i typescript

를 통해 타입스크립트 실행환경 설치하고

 

npx create-react-app 디렉토리명 --template typescript

 

위의 명령어를 통해 React 프로젝트를 만들어주면 끝!!

 

원래 있던 JavaScript로 실행하던 React 프로젝트를 TypeScript로 바꾸려면 살짝 복잡해서

그냥 따로 프로젝트를 만들어줬더니 완전 간단!

 

 

JavaScript랑 쪼매 다르니까 공부를 더 해야 할 것 같다.

아니면 chatGPT의 도움,,을 받아보자

 

2. 에러

에러 

npm run build가 되지 않음

정말 말 같지도 않은 바보같은 에러,, 다른 폴더 안에서 build하고 있었댜ㅏㅏ,,!ㅜㅜㅋㅋ

 

참고사이트

https://react.vlpt.us/using-typescript/02-ts-react-basic.html

 

2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook

2. 리액트 컴포넌트 타입스크립트로 작성하기 이번 섹션에서는 리액트 컴포넌트를 타입스크립트로 작성하는 방법을 알아보도록 하겠습니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리

react.vlpt.us

https://kid-dev.tistory.com/13

 

[typescript vs javascript] 어떤 언어를 써야할까? 이 글로 종결하자!

똘이는 javascript를 사용하는 유저이다. 인터넷을 검색해보니 typescript라는 검색어가 계속 눈에 들어온다. 그리고 주변 개발자들도 typescript를 사용한다는 소리를 듣곤 한다. 그리고 의문이 생겼다.

kid-dev.tistory.com

https://velog.io/@pluviabc1/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

velog

 

velog.io

 

728x90
반응형