내년 동아리 강의자료를 준비하면서 타입스크립트로 리액트를 해보라는 이야기를 들었다. 올해는 자바스크립트로 리액트를 했었는데, 변화를 주는 게 좋을 것 같고 또 많이 사용한다는 이야기를 들어서 한 번 공부해보기로 했다.
공부하며 참고했던 사이트들은 대부분 링크를 걸어두겠지만, 전체적으로 계속 참고할 내용들을 정리하자면...
- 조현영의 '타입스크립트 교과서'
- 타입스크립트 핸드북 (공식사이트)
이후에 필요하다면, 강의를 추가적으로 들을 수도 있을 것 같다..
왜 JS가 아닌 TS?
책을 펼치면, 바로 JS에 대한 이해도를 묻는다. Typescript는 JS만 잘해도 90%는 먹고 가는 거라고...
이런... 사실 나는 JS도 그다지 자신이 없다. 그냥 리액트할때 코드를 이해하고 분석하고 조금은 짤 수 있는 정도? 아직 강의자료 만들기까지 시간이 꽤 남았으니... 어쩌면, 이 시작과 초반 내용을 정리하다 JS를 먼저 정리할 수도 있겠다...라는 생각이 든다.
Typescript를 사용하는 이유는, 핸드북에서 다음과 같이 자세히 나와있다.
JavaScript는 프로그래밍 커뮤니티에 도입된 지 20년이 지난 지금, 가장 널리 퍼진 cross-platform 언어 중 하나입니다. JavaScript는 웹 페이지에 사소한 상호작용을 추가하기 위한 작은 스크립팅 언어로 시작하여, 규모에 상관없이 프론트엔드와 백엔드 애플리케이션에서 선택 가능한 언어로 성장했습니다. JavaScript로 작성된 프로그램의 크기, 범위 및 복잡성은 기하급수적으로 커졌지만, 다른 코드 단위 간의 관계를 표현하는 JavaScript 언어의 능력은 그렇지 못했습니다. JavaScript의 다소 특이한 런타임 의미 체계(runtime semantics)와 더불어, 언어와 프로그램 복잡성 간의 불일치는 JavaScript 개발을 규모에 맞게 관리하기 어려운 작업으로 만들었습니다.
프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다: 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우입니다. 이는 단순한 오타, 라이브러리 API를 이해하지 못한 것, 런타임 동작에 대한 잘못된 가정 또는 다른 오류 때문일 수 있습니다. TypeScript의 목표는 JavaScript 프로그램의 정적 타입 검사자 입니다. 즉, 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)입니다.
https://www.typescriptlang.org/ko/docs/handbook/intro.html
자바스크립트로 만드는 프로그램 규모가 점점 커지면, 방대한 코드를 타입없이 작성하려 하니 불가피하게 타입오류가 많이 발생한다는 것이다. 오류의 종류는 문법, 타입, 기타(런타임) 에러가 있지만... 타입스크립트는 그중 가장 많이 발생하는 타입 오류를 사전에 방지하기 탁월하다.
둘의 가장 큰 차이는 자바스크립트는 동적, 타입스크립트는 정적이라는 것이다. 이게 정확히 무슨 말이냐면...
- Javascript (동적)
자, 이런 js 코드가 있다고 해보자. 이때 JS는 동적 타입 언어이기 때문에, 함수 선언 시점에서 자료형을 특정하지 않는다. 그냥 두 개의 매개변수를 받는다 정도로 알고 있고 이 변수에는 숫자가 들어가도, 문자열을 들어가도 둘 다 실행이 됩니다.
| 숫자 | 문자열 |
 |
  |
이러한 동적 타입 언어가 문제가 되는 건, 프로젝트가 커지고 여러명이 코드를 만질 때 발생한다. 다양한 사람들이 한 코드를 바탕으로 코딩을 할 경우 본 목적과는 달리 사용할 확률이 커지고, 에러가 발생해도 찾기가 어려울 수 있다. 왜냐하면, 사용할때는 이게 잘못된 걸 알려주지 않기 때문이다.
그렇다면 애초부터 들어가야 할 타입을 정해준다면, 불필요한 오류 발생을 막을 수 있다. 그렇기 때문에 우리는 타입스크립트를 정적 타입 언어라고 하는 것이다.
- Typescript (정적)
변수 a와 b가 number이라는 타입이라는 걸 지정해주자, 이후에 내가 string으로 넣은 '2', '3'이 number 타입이 아니라고 알려주는 오류가 발생한다. 그렇다면 number에 맞게 해준다면...
짜잔~ 잘 뜨는 것을 확인할 수 있다. 이렇게 타입 관련 오류를 줄이기 위해서 대형 프로젝트에서는 JS보다는 TS를 더 선호하는 듯하다.
+) 밑에 JS와 TS 비교 부분은 다음 유데미 강의 중 타입스크립트 내용을 참고하였다.
이외에도, 핸드북을 확인해보면 여러 이점이 있다는 걸 확인할 수 있지만, 확실하게 이해할 수 있는 부분과 와닿는 부분은 바로 이것이었다. 실질적으로 타입스크립트는 자바스크립트를 기반으로 단점들을 개선하고 업그레이드 한 언어이기 때문에 타입스크립트는 자바스크립트를 잘하면 90%안다고 하는 모양이다.
다음 글에서부터는, 기본 문법들을 익혀보도록 하겠다.
'프론트 > Typescript' 카테고리의 다른 글
| [Typescript] 01. 유형(Type)에 대해 (2) | 2024.11.29 |
|---|