지난 몇주간 이력서를 넣기 전에 기업들의 JD를 보며 "타입스크립트를 쓰는 곳이 정말 많구나" 라는 생각을 했다.
타입스크립트가 좋다는 말은 익히 들어 알고는 있었지만, 왜? 왜 많은 기업들이 타입스크립트를 사용하지? 라는 궁금증이 들었다.
오늘은 내가 가졌던 의문의 순서에 따라 내린 결론들을 풀어보려고 한다 :)
1 . TypeScript ... 도대체 뭐길래?
TypeScript는 JavaScript + Type으로, 자바스크립트 기반으로 타입을 지정하는 코드 작성이 추가된 형태이다.
작업이 완료되면 컴파일 과정을 거쳐 자바스트립트로 변환되는 자바스크립트 슈퍼셋 개념이라고 한다.
2 . 그렇다면, JavaScript가 뭐가 부족하길래 TypeScript가 생긴거야?
Answer. 자바스크립트는 매우 유연하고 똑똑한 언어이다. 이 특징이 때로는 런타임 에러를 불러오기도 한다.
위의 예시사진을 확인해보자.
코더가 Number와 String을 더하라고 지시했는데 사실 이럴 때는 에러가 나는게 맞지 않을까?
근데 JS는 앞서 말했다 싶이 유연하고 똑똑한 언어, 즉 동적인 언어이다.
JS가 스스로 1 이거 String인데 Number로 잘못 입력 한거지? String으로 인식해서 출력해줄게! 해준 것.
그 결과 콘솔에 "1등"을 출력해냈다.
이건 장점 아니야? 이게 왜?! 뭐가 어때서! 라고 생각할 수도 있다. 사실 내가 그랬다
이런 JS의 특징은 작업의 편리함을 가져오기도 하지만 생각지 못한 런타임 에러를 불러올때가 있다.
아래의 콘솔 이미지를 통해 얘기해보자
위의 예시에서 first와 second를 인자로 받고, 두 숫자를 더한 값을 return해주는 화살표 함수를 만들었다.
그리고 인자로 1과 2를 넘겨 주었을 때 3을 return 하는 것을 확인 할 수 있다.
그런데 이때 인자로 하나만 넘겨줬는데, 왜 함수가 실행이 되고 Nan을 리턴 하는걸까?
이게 바로 JS의 가장 큰 단점인 런타임 에러이다.
3 . 런타임 에러가 뭔데! 그게 그렇게 큰 문제야?
Answer. 런타임 에러를 마주하는 것은 사용자이기 때문이다.
런타임은 프로그램이 실행되는 환경으로, JS의 경우에는 그 환경이 브라우저이다.
코드를 작성하는 동안에는 몰랐던 에러를 브라우저에서 만난다면, 최악의 경우에는 프로그램이 멈춰버린다.
그런 상황을 예방하기 위해 개발자는 열심히 try-catch문으로 핸들링 할 것이다.
그런데, 만약 예상하지 못한 케이스에서 에러가 발생했고, 그로 인해 프로그램이 멈췄다.
몇분째 흰화면만 덩그러니 띄워져있는 브라우저를 사용자가 경험 했다면...? 상상하고싶지 않다 ^ㅡ^
이렇듯, 런타임 에러는 사용자에게 최악의 경험을 남길 수 있기 때문에 치명적이라고 할 수 있다.
4 . ㅇㅋㅇㅋ 알겠어. 그래서 그걸 TypeScript가 어떻게 해결 해줄 수 있다는건데?
Answer. 타입스크립트는 컴파일 과정에서 에러를 핸들링 한다.
앞서말했듯이, TS는 브라우저가 읽을 수 없는 컴파일 언어로, 결국에 배포를 하려면 JS로 변환하는 컴파일 과정을 거쳐야한다.
이 컴파일 과정에서 에러를 잡아내기 때문에 기존에 런타임에서 발생하던 에러를 개발단계에서 핸들링 할 수 있다.
4 . 그럼 컴파일 과정에서 에러를 핸들링 한다는 것 외에는 장점이 없는거야?
Answer. No ! 그 외에도 몇몇의 장점이 있다.
- 버그 예방
JS는 타입을 지정해주지 않기 때문에 나도 모르는 사이에 형변환이 되어 있을 수도 있고, 그로인해 예기치 않은 버그가 발생할 수도 있다. 반면에 타입스크립트는 코드에 타입을 명시하고 이와 다를 때 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거 한다. - 코드 퀄리티 향상
TS는 데이터의 타입까지 알 수 있게 해줌으로써 코드 작성이 좀 더 쉽고 직관적이게 만들어준다.
덕분에 개발자는 로직과 같은 큰 구조들에만 집중할 수 있고, 객체의 속성값을 하나하나 기억할 필요없이 IDE가 자동으로 리스트업 해주기 때문에 더 수월히 작업 할 수 있게 된다. - 실행 속도 감소
JS는 런타임에서 타입이 결정되는 dynamically typed 언어이다. 이 말은 곧 컴퓨터가 코드를 읽으며 타입도 결정해야한다는 뜻인데,
개발단계에서 사람이 타입을 지정했기 때문에 컴퓨터의 일을 덜어줬다는 뜻이기도 하다.
그렇기 때문에 실행 속도 또한 JS보다 빠를 수 밖에..!
번외) JavaScript와 TypeScript 비교해보기
| JavaScript | TypeScript |
| 동적타입 언어 | 정적타입 언어 |
| 인터프리터 언어 | 컴파일 언어 |
| .js 확장자 | .ts 확장자 |
| 규모가 작은 프로젝트에 적합 | 규모가 큰 프로젝트에 적합 |
'Weekly I Learned > JavaScript' 카테고리의 다른 글
| 실행 컨텍스트 뿌셔뿌셔(작성중김성중) (1) | 2023.07.19 |
|---|---|
| 데이터 타입 그게 뭔데 날 울려 (0) | 2023.06.20 |
| JavaScript 동작 원리... (0) | 2023.06.08 |