개발/Web

[React 공부] Typescript를 쓰는 이유와 기능

센솔 2022. 8. 25. 23:02

 

 자바스크립트는 관대하다. 개발자가 Type을 지정하지 않아도, Undefined된 오브젝트를 사용하려고 해도 '일단은' 군말없이 받아준다. 그러나 사소한 규칙 위반이 쌓여 도저히 다룰 수 없을 지경이 되면 문제는 그 때부터 시작된다.

 

  • 테스트 단계에서는 됐는데 배포하니까 사이트가 터졌는데요?
  • 왜 사용자 전화번호가 number로 넘어온건가요?
  • 사용자 이름이 undefined로 출력되는데 어떡하죠?
  • ...

 

 

 바닐라 JS는 컴파일 전에 코드를 검사하지 않는다. 따라서 우리가 무언가 잘못됐음을 직감하는 시기는 실제로 사이트가 돌아가는 와중일 가능성이 높다. 그리고 자료형(Type) 등을 엄밀하게 따지지 않는다는 점 때문에 개발 단계부터 무언가 잘못 쓰기 시작하면 문제를 알아채는 시기는 프로젝트 규모가 커진 이후가 된다.

 

이러한 문제를 해결해주는 구세주같은 존재가 바로 Typescript이다. 

 

TypeScript 홈페이지의 설명

 

위 사진의 코드를 보면 잘못된 부분에 빨간줄이 그어져 있는 것이 보인다. 컴파일 전에 미리 잘못된 부분을 프로그래머에게 알려주고 있는 것이다. 이게 바로 TypeScript의 역할 중 하나이다. TypeScript의 궁극적인 목표는 '코드의 에러를 사전에 차단하고, 항상 신뢰할 수 있는 결과를 제공하는 것' 이라고 볼 수 있겠다.

 

여기까지 봤음에도 "그냥 편하게 바닐라 JS로 코딩하고, 에러는 그때그때 고치는게 더 편하지 않나요?" 라고 물어볼지도 모르는 사람을 위해 TypeScript의 장점을 나열해보고자 한다.

 

1. TypeScript는 기존 JS문법과 비슷하다.

 

 

 아무리 좋은 도구가 있다고 하더라도 사용법을 새로 익혀야 한다면 망설여지는게 당연하다. 기분 좋은 소식은 TypeScript는 바닐라 JS와 99% 동일하다는 점이다. 그렇기 때문에 배우는 데에 오랜 시간이 걸리지 않는다. 반면에 성능은 상당히 강력하고 효율적이다. 몇몇 문법들만 배워두면 에러를 사전에 차단해주고, 프로젝트 규모가 커져도 항상 프로젝트를 Reliable하게 만들어주는 어시스턴트를 들일 수 있는 셈이다.

 

다만 오해하면 안되는 것은 브라우저가 직접 TypeScript를 이해하고 쓰는게 아니라는 점이다. TypeScript는 컴파일 전 단계에서 검사하는 역할을 해줄 뿐, 실제로 컴파일 후에는 일반 JS로 변환되어 브라우저에 전달된다.

 

2. 실시간으로 에러를 잡아준다.

 

아직 서버를 Run 시키기도 전에 에러가 있다고 알려주는 모습

 

 간단해보이면서도 상당히 유용하고 강력한 기능이다. 어떤 에러가 발생했을 경우 에러 메시지를 띄워줌으로써 미리 문제를 고칠 수 있게 도와주고, 자동완성 및 추천, 디버깅 등 유용한 기능들을 제공하기 때문에 생산성 또한 좋아진다. 이미 일반 JS를 써본 사람이라면 이게 얼마나 멋진 기능인지 알 수 있을 것이다.

 

3. 규모가 커져도 안전하다.

 

자바스크립트는 관대하고, 멍청하다 (...)

 

위 코드처럼 a+b를 수행하는 함수를 만들었다. 함수를 불러올 때마다 '숫자'를 제대로 넣어준다면 문제가 없겠지만, 간혹 실수로라도 '문자열'을 넣어버리면 전혀 이상한 결과가 나오게 된다. 하지만 바닐라JS는 이걸 문제로 인식하지 않는다. 프로젝트 규모가 커지면 사소한 실수들이 누적되기 마련이고, 이런 치명적인 에러들이 모인다면 작업 효율이 떨어진다.

 

a와 b는 모두 number type이어야 한다

 

TypeScript의 힘을 빌린다면 처음부터 props의 자료형을 지정할 수 있다. 타입을 지정해줌으로서 언제나 정확하고 신뢰할 수 있는 결과를 보증할 수 있는 것이다. 위 예제에서는 간단한 더하기 함수만을 구현했지만, 회원가입 폼을 받거나 중요한 데이터를 주고받을 때에도 위와 같이 Type을 지정해 정확한 데이터만을 취급할 수 있을 것이다.


 

 

위와 같은 장점들로 TypeScript는 꾸준한 관심을 받고 있다. 해외권에서는 이미 TS가 JS를 디스하는 밈들이 만들어져 짤로 돌아다닐 정도이니 말이다. 익숙해진다면 인생을 한없이 편하게 만들어줄 수 있는 좋은 도구일테니, 개발자라면 시간을 들여 배워보는 것이 어떨까.