Typescript Tech Blogging

Typescript를 선택한 이유

코드스테이츠에서 이머시브 코스를 수강하는중에는 Javascript 언어를 기반으로 학습했습니다.

저는 Java나 C++ 처럼 타입을 선언하는 정적 타입 언어를 경험하고싶은 욕구가 있었습니다.

우연히 Typescript에 대해서 알 수 있는 기회가 있었고 궁금증을 가지게 되었습니다.

Javascript와 Typescript의 차이점은 무엇일까? 에 대해서 직접 두가지 방식을 사용하여
차이점을 몸소 느껴보고 싶었습니다.

 

그것이 이전 프로젝트에서는 Javascript를 사용하고, 이번 프로젝트에서는 Typescript를 사용한 이유입니다.

Typescript란?

Typescript

Typescript는 MS에 의해 개발 / 관리 되고 있는 오픈소스 프로그래밍 언어입니다.
대규모 애플리케이션을 개발하는데 Javascript가 어렵고 불편하다는 불만에 대응하기 위해 개발되었습니다.

Typescript는 스크립트 언어의 표준인 ES의 표준을 따르기 때문에 Javascript영역을 침범하지 않고 ES를 지원합니다.

TypeScript의 역사

핵심 개발자인 Anders Hejlsberg에 따르면 TypeScript는 JavaScript가 대규모 어플리케이션에 적합하지 않다는 내부 팀과 고객사의 불평들을 대응하기 위해 만들어졌습니다.

 

목표는 "클래스, 모듈, 정적 타입과 같은 것들을 통해 JavaScript를 강화하는 것" 이며, open-standard 나 크로스 클랫폼에 대한 이점을 포기하지 않는 것입니다. 그 결과로 "JavaScript 개발 범위의 어플리케이션을 위한 언어"가 되었고, JavaScript 의 상위언어집합(superset)이 되었습니다.

Typescript의 특징

• 컴파일언어, 정적 타입 언어입니다. Javascript는 인터프리터 언어지만, Typescript는 컴파일 언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크해냅니다. 단, 전통적인 컴파일 언어와는 다르게, 링킹 과정이 생략되어 있습니다.
  
  *링킹이란? 여러개로 나뉘어진 오브젝트 파일들을 하나로 합치는 역할입니다.

linking 관련 사진

• 타입 기반 언어로써 "타입스크립트 = 자바스크립트 + 타입"
  
• 컴파일 단계에서 타입 오류를 잡아낼 수 있고, 코드 어시스트 기능도 지원받을 수 있습니다.
• 이것을 통해 암묵적 형변환, 호이스팅, 복잡성 문제를 해결할 수 있습니다.

컴파일러와 인터프리터의 차이점

컴파일러
- 컴파일러는 고급 언어로 작성된 프로그램 전체를 목적 프로그램으로 번역한 후, 링킹 작업을 통해 컴퓨터에서 실행 가능한 프로그램을 생성합니다.
- 번역과 실행 과정을 거쳐야하기 때문에 번역과정이 번거롭고 오래걸리지만, 한번 번역한 후에는 다시 번역하지 않으므로 실행 속도가 빠릅니다.
- 컴파일러를 사용하는 언어는 C, C++, Java, C#, Go등이 있습니다.

인터프리터
- 인터프리터는 고급 언어로 작성된 프로그램을 한줄 단위로 받아들여 번역하고, 번역과 동시에 프로그램을 한줄 단위로 즉시 실행시키는 프로그램입니다.
- 프로그램이 직접 실행되므로 목적 프로그램이 생성되지 않습니다.
- 줄 단위로 번역, 실행되기 때문에 시분할 시스템에 유용하며 원시 프로그램의 변화에 대한 반응이 빠릅니다.
- 번역 속도는 빠르지만 프로그램 실행 시마다 매번 번역해야 하므로 실행속도는 느립니다.
- CPU 사용 시간의 낭비가 큽니다.
- 사용언어로는 Python, Ruby, Perl, PHP, Javascript 등이 있습니다.

정적 타입 언어와 동적 타입 언어의 차이점

정적 타입 언어
- 정적 언어라는것은 '타입' 즉, 자료형을 컴파일 시에 결정하는것 입니다.
- C, C#, C++, Java 등의 언어가 있습니다.
- 이들 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 합니다.
- 컴파일 시에 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생합니다.
- 장점 : 1. 컴파일시에 타입에 대한 정보를 결정하기 때문에 속도가 빨라집니다,
        2. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 높아집니다.

동적 타입 언어
- 동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고 실행 시에 결정합니다.
- JavaScript, Ruby, Python, SmallTalk 등의 언어가 있습니다.
- 타입 없이 변수만 선언하여 값을 지정할 수 있습니다.
- 장점 : Run time까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 많은 선택의 여지가 있습니다.
- 단점 : 인터프리터 언어는 배우기는 쉬우나 실행 도중에 변수에 예상치 못한 타입이 들어와 Type Error를 뿜는 경우가 생길 수 있습니다. 

Typescript가 Javascript 보다 나은점

1. 에러를 줄여줄 수 있고 코드 의도가 분명해집니다.

파라미터와 함수의 리턴타입만 설정했을 뿐인데 함수의 사용법을 쉽게 알 수 있습니다.

이는 곧 일일이 코드를 뒤져가면서 읽는 시간을 좀 더 절약할 수 있다는 뜻입니다.

팀 단위 협업을 하거나 나중에 프로젝트가 복잡해진다면 때 큰 이점이 될 수 있을 것입니다.

 

만약 이 함수를 사용할 때 다른 타입을 아규먼트로 넘긴다면 컴파일 과정에서 오류가 발생합니다.

예시는 작은 코드이지만 프로젝트가 복잡해지면서 개발자가 충분히 실수할 수 있는 부분이라고 생각합니다.

타입스크립트를 도입한다면 이런 에러를 런타임이 아닌 컴파일 단계에서 하나라도 더 잡을 수 있습니다.

물론 전제조건이 있습니다. 무조건 타입을 잘 명시해야 합니다. 

any 타입을 오남용하면 타입스크립트를 쓰는 의미가 없습니다.

example

2. 훌륭한 코드 자동 완성

vscode 기준으로 타입을 지정한 객체는 뛰어난 자동완성 기능을 지원합니다.

 

3. 더욱 확장된 기능 지원

반드시 상속하고 구현해서 사용해야하는 추상 클래스, 인터페이스, 제네릭, 데코레이터 등 기존 자바스크립트에는 없는 기능을 지원합니다.

이는 구조 설계, 모듈화, 객체 지향적인 측면 등에서 기존 자바스크립트보다 활용성이 훨씬 높다고 생각합니다.

 

4. 데코레이터

클래스, 프로퍼티, 메소드, 파라미터, 접근자 데코레이터가 있습니다.

데코레이터는 런타임에 실행되는데, 이름처럼 프로퍼티를 수정하는 등 꾸며주는 기능을 합니다.

직접 데코레이터를 작성하는건 쉽지 않지만, 오픈소스 커뮤니티에 이미 잘 개발된 데코레이터도 충분히 많습니다.

Typescript를 사용했을때 아쉬운 점

1. 타입 선언의 초기 비용

장점을 잘 활용하려면 타입 선언을 철저하게 해야 합니다.

오픈소스를 사용한다면 그에 맞는 타입을 적용시켜야 합니다.

예를 들면, react-native-vector-icons를 사용한다면 @types/react-native-vector-icons 를 사용해야합니다.

 

 

2. 익숙하지 않다

정적언어를 사용한 경험이 있는 개발자는 Typescript를 쉽게 배울거라고 생각합니다.

저는 정적언어의 경험이 없었지만, 기본 문법 자체는 크게 어렵지 않았습니다.

 

하지만 설계, 패턴, 최적화는 고민해봐야 될 부분인것같습니다.

 

3. 정형화된 코드

Typescript를 쓰다보면 결국 의존성 주입 등 정형화된 패턴을 따르는 느낌이 듭니다.

이는 협업할때 장점으로 작용하기도 합니다.

 

하지만 자바스크립트만으로 창조적인 코드를 선호하는 개발자에겐 단점으로 작용할 수도 있을거라 생각합니다.

 

내가 느낀 Typescript

저는 나중에 생길 에러를 미리 잡아준다는점이 마음에 들었습니다.
그리고 이번 프로젝트에서는 느낄 수 없는 부분이기는 했지만, 후에 프로젝트가 더 커진다고 가정했을때 코드가 의도하는바가 분명하기때문에 협업을 진행하면서 큰 이점으로 돌아올거라고 생각하면 당장의 불편함은 감수할만하다고 느꼈습니다.  

내가 느낀 Typescript + React-Native 의 문제점

1. React-Native와 Typescript를 같이 사용했을때의 reference가 부족하다고 느꼈습니다.

2. 내가 사용하고싶은 오픈소스를 하나 설치받으려면 Typescript도 지원하는지 확인을 해야했습니다.

앞으로 Typescript + React-Native 를 쓰게될때 문제점 해결방법

작업할때 사용하게되는 Reference를 기록해뒀다가 Tech blogging을 써서 Reference를 늘려가야한다고 생각했고,

프로젝트를 들어가기전 사용하려는 오픈소스가 Typescript를 지원하는지 미리 확인을 해야된다고 생각했습니다.

마무리

Typescript, Javascript의 장단점을 잘 파악해서 사용해야할것이라고 생각합니다.

어떤 프로젝트를 진행하느냐에 따라 신중하게 선택할 필요가 있을것같습니다.