타입스크립트를 사용하는 이유
웹 사이트를 운영하는 데 있어 높은 코드 품질로 버그 없이 사용자에게 안정감 있는 경험을 제공하는 것이 중요해졌다. TypeScript는 동적 타입 언어인 JavaScript를 보완해 주면서 활용도가 늘어나고 있다.
TypeScript는 JavaScript의 상위 확장자로, 원하는 변수 타입을 정의하고 JS로 변환하여 브라우저에서 실행할 수 있다. 타입스크립트를 사용하는 가장 큰 이유는 버그를 예방할 수 잇는 타입 시스템이다. 타입(자료형)은 어떠한 변수가 문자열인지, 숫자인지, boolean인지 등 값의 형태에 따라 자료의 유형을 지정해주는 것이다. 만약 컴파일 과정에서 지정한 타입에 맞지 않는 값이 들어가면 에러가 발생하는데, 이를 통해 디버깅을 좀 더 편하게 할 수 있다. 자바스크립트 코딩에서 발생할 수 있는 버그를 사전에 감지하는 것이다.
또다른 이유는 높은 생산성이다. 자바스크립트로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알고 싶으면 파일을 직접 살펴봐야 했다. 반면 타입스크립트는 변수의 이름과 데이터 자료형까지 쉽고 직관적으로 알 수 있어 개발자가 보다 로직과 같은 큰 구조에 집중할 수 있도록 한다.
음? 나는 자료형 같은 건 틀리지 않고 작성할 자신 있는데? 그냥 실수 없이 코딩만 잘 하면 JS만으로도 충분히 버그 없는 코딩이 가능한 거 아닐까? 코드 1000줄, 10000줄 작성하면 생각이 달라질 것이다. 사람은 누구나 실수를 하니까...
타입스크립트 설치
npm create vite@latest your-project-title -- --template react-ts
(property) HTMLInputElement.value: string 으로 e.target.value는 문자열임을 알 수 있다. 그러나 setNum1은 number 형식이다. 따라서 현재의 코드는 number 데이터 타입의 setNum1의 파라미터에 문자열(e.target.value)을 집어넣고 있는 것이다. 타입스크립트는 이러한 자료형 에러를 감지하고 알려준다.
'스파르타코딩클럽 > 내일배움캠프' 카테고리의 다른 글
렌더링 패턴 (0) | 2024.12.17 |
---|---|
[Next.js] 주요 렌더링 패턴 (1) | 2024.12.10 |
[React] 필터링 및 결과 리스트 렌더링 (0) | 2024.11.28 |
[React] 로그인 여부에 따른 nav (0) | 2024.11.26 |
[React] React Toast를 활용한 알림 메세지 구현 (0) | 2024.11.26 |