TypeScript 타입스크립트 | 기술적 분석 + 사용해본 후 느낀점
[index]
1. 타입스크립트란?
2. 타입스크립트의 등장배경
3. 타입스크립트 장점과 단점
4. 타입스크립트와 자바스크립트 비교해보기
5. 타입스크립트와 자바스크립트 중 하나를 고른다면?
6. 사용해본 후 느낀점
1. 타입스크립트란?
https://www.typescriptlang.org/
JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.
www.typescriptlang.org
TypeScript(타입스크립트)는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입을 추가한 언어입니다. TypeScript 코드는 JavaScript 코드로 변환되어 실행될 수 있어, 개발자는 높은 수준의 유연성과 동시에 코드의 안정성을 유지할 수 있습니다. 이 언어는 JavaScript의 확장으로, JavaScript 코드를 그대로 사용할 수 있으며, 또는 TypeScript의 풍부한 타입 시스템을 활용하여 코드를 작성할 수 있습니다.
TypeScript는 변수, 함수, 클래스 등에 명시적인 데이터 타입을 지원하며, 이를 통해 코드의 가독성을 높이고 오류를 미리 방지할 수 있습니다. 또한, 강력한 IDE 지원과 함께 다양한 도구들을 제공하여 개발 생산성을 향상시킵니다. 주로 대규모 프로젝트에서 사용되며, 개발자에게 코드 작성 중에 발생할 수 있는 일부 오류를 사전에 감지하여 디버깅을 더 쉽게 만들어줍니다.
TypeScript는 객체 지향 프로그래밍 기능과 모듈 시스템을 지원하여 코드의 구조화와 재사용성을 증가시킵니다. Visual Studio Code와 같은 통합 개발 환경에서 널리 사용되며, 많은 개발자들이 웹 및 서버 사이드 개발에서 TypeScript를 선호하는 추세가 있습니다.
TypeScript는 선택적 정적 유형 지정, 클래스, 인터페이스 등 다양한 기능을 제공하며, 대규모 JavaScript 프로젝트에서 높은 수준의 안정성과 유지보수성을 제공합니다. 기본적으로 JavaScript 코드를 그대로 사용하거나 TypeScript의 강력한 기능을 활용하여 더욱 안전하고 효율적인 코드를 작성할 수 있는 언어입니다.
2. 타입스크립트의 등장배경
The goal of TypeScript is to be a static typechecker for JavaScript programs - in other words, a tool that runs before your code runs (static) and ensures that the types of the program are correct (typechecked).
TypeScript의 목표는 JavaScript 프로그램의 정적 타입 체커가 되는 것입니다.
즉, 코드를 실행하기 전에(정적) 코드의 타입이 올바른지 확인하는(타입 체크) 도구입니다.
- 타입스크립트 핸디북에서 발췌 (Handbook - The TypeScript Handbook)
우선 TypeScript는 JavaScript를 대체하기 위해 만들어진 것이 아니라, 오히려 JavaScript의 기능을 보완하여 코드 작성, 통합, 관리, 유지보수를 더욱 효율적으로 만드는 데 중점을 둔 언어입니다. TypeScript는 JavaScript의 기본 특성을 계승하면서도 완전히 다른 언어입니다. 그러므로 JavaScript를 대체하지 않으면서 JavaScript 기반 플랫폼의 발전을 촉진하는 데 목적이 있습니다.
클라이언트측 프로그래밍 언어로서 JavaScript가 도입되면서 웹 개발에서 상당한 발전이 이뤄졌습니다. 그러나 JavaScript 코드의 복잡성과 무게는 점차적으로 증가했습니다. 특히, JavaScript는 객체지향 프로그래밍 언어의 요구에 부합하기 어려웠습니다. 이로 인해 JavaScript가 주로 클라이언트 측 기술로 사용되다 보니, 서버 측 기술로의 확장에 한계가 있었습니다. 이러한 문제를 극복하고자 TypeScript 언어가 등장했습니다.
Microsoft는 TypeScript를 개발하고 오픈 소스로 공개함으로써 다양한 개발자와 커뮤니티의 참여를 유도했습니다. 이로써 TypeScript는 지속적으로 발전하며, JavaScript의 한계를 극복하여 대규모 프로젝트에서 안정적이고 효율적인 개발을 가능케 하는 강력한 언어로 자리매김하게 되었습니다.
3. 타입스크립트 장점과 단점
장점
- 정적 타입 지정
TypeScript는 강력한 형식을 지정할 수 있어, 변수에 새 값이 할당될 때 IDE 및 유효성 검사 도구가 빠르게 변경 사항을 확인할 수 있습니다. 이는 코드 안전성을 높이고 디버깅을 용이하게 만듭니다. JavaScript에서는 이러한 유형의 검사가 어려워 코드 업데이트 시 오류가 발생할 가능성이 높아집니다. - 가독성과 유지보수성 향상
TypeScript는 코드를 읽기 쉽게 만들고 유지보수를 용이하게 합니다. 정적인 타입 지정으로 코드의 의도가 명확해지며, 대규모 프로젝트에서의 협업과 이해가 쉬워집니다. - 인터페이스를 통한 추상화 지원
TypeScript는 JavaScript에서 지원하지 않는 인터페이스를 통한 추상화를 지원합니다. 이는 객체의 예상 동작을 명시적으로 정의하여 코드의 일관성을 유지하고 오류를 사전에 방지할 수 있도록 돕습니다. - 데코레이터와 코드 주석
TypeScript는 데코레이터를 통해 코드에 주석을 달 수 있습니다. 이는 코드에 메타데이터를 추가하여 특정 기능을 확장하거나 변경할 수 있도록 도와줍니다. JavaScript는 이러한 기능을 지원하지 않습니다. - 네임스페이스를 통한 모듈화
TypeScript에서의 네임스페이스는 코드를 더 나은 구조로 구성하고 모듈화할 수 있게 해주는 중요한 기능입니다. 네임스페이스는 전역 스코프에서 충돌을 방지하고 코드의 일부를 논리적인 단위로 그룹화하는 데 사용됩니다. 특히 대규모 프로젝트에서 여러 컴포넌트, 함수 또는 변수를 적절하게 분리하고 조직화하는 데 도움이 됩니다. 동일한 이름을 가진 요소들 간의 충돌을 방지하고, 코드를 논리적인 단위로 나누어 유지보수성을 향상시킬 수 있습니다. - 표현력이 뛰어난 문법 구문
TypeScript는 선택적 및 명명된 매개변수와 같은 풍부한 구문 요소를 제공하여 코드의 표현력을 향상시킵니다. 이는 개발자가 의도를 더 명확하게 전달할 수 있도록 도움을 줍니다. 이러한 문법적 특성은 함수의 사용 방법을 명확하게 정의하고 오류를 줄일 수 있도록 해줍니다. 특히 함수를 호출할 때 어떤 매개변수가 필요한지 알기 쉽게 만들어줍니다. - 제네릭 및 유형 추론 기능
TypeScript는 JavaScript에서 사용할 수 없는 제네릭 및 유형 추론 기능을 지원합니다. 이는 코드의 유연성을 높이고 재사용성을 강화합니다. - IDE의 강력한 지원
TypeScript IDE에는 정적으로 유형이 지정된 언어를 위한 풍부한 플러그인과 도구를 구축하기가 더 쉽습니다. 이는 코드 작성, 문제 해결, 리팩터링 등에 도움이 되는 다양한 기능을 제공합니다. - 컴파일 타임 오류 검출
TypeScript는 런타임이 아닌 컴파일 타임에 유형 오류를 검출할 수 있어 디버그가 더 쉽습니다. 이는 대규모 코드베이스에서 발생할 수 있는 오류를 미리 방지할 수 있도록 돕습니다. - ECMAScript 사양 이상의 추가 기능
TypeScript는 ECMAScript 사양 이상의 기능을 구현하여 최신 JavaScript 기능을 미리 경험하고 사용할 수 있습니다.
단점
- 러닝 커브(Learning Curve)
타입스크립트는 JavaScript를 기반으로 하지만 정적 타입의 개념과 추가된 기능들이 존재하기 때문에 학습이 필요합니다. 특히 JavaScript에 익숙한 개발자들이 처음에는 익숙하지 않을 수 있습니다. - 개발 시간 증가
타입스크립트의 정적 타입 지정은 개발 시간을 늘릴 수 있습니다. 타입스크립트 코드를 작성하려면 변수에 타입을 지정하고, 함수 및 객체를 정의할 때 추가적인 유형 정보를 입력해야 합니다. 이는 초기에는 런타임 에러를 방지하지만 코드 작성에 소요되는 시간이 증가할 수 있습니다. - 프로젝트 규모에 따른 복잡성
작은 규모의 프로젝트에서는 타입스크립트의 이점이 명확하지 않을 수 있습니다. 복잡한 대규모 프로젝트에서 타입스크립트의 강력한 정적 타입 시스템이 더욱 도움이 되는 경향이 있습니다. - 타입 정의 파일 부족
JavaScript 라이브러리 및 프레임워크에 대한 타입 정의 파일이 항상 완벽하게 갖춰져 있지 않을 수 있습니다. 외부 패키지의 타입 정의가 부족하면 타입스크립트에서는 해당 패키지를 사용하기 어려울 수 있습니다. - 컴파일 시간이 길어질 수 있음
타입스크립트 코드는 컴파일 과정을 거쳐 JavaScript 코드로 변환되어야 합니다. 대규모 프로젝트의 경우 컴파일 시간이 늘어날 수 있고, 이는 개발자들의 생산성에 영향을 미칠 수 있습니다. - 커뮤니티의 크기
JavaScript에 비해 타입스크립트의 커뮤니티 크기는 작을 수 있습니다. 이로 인해 자료 및 지원이 부족할 수 있습니다. 하지만 최근에는 타입스크립트의 사용이 늘어나며 커뮤니티도 점차 성장하고 있습니다.
4. 타입스크립트와 자바스크립트 비교해보기
TypeScript와 JavaScript의 핵심 차이점: 정적인 TypeScript와 동적인 JavaScript
정적 언어(TypeScript)
초기 오류가 더 많지만 코드는 안전합니다. 정적 언어는 변수를 정의할 때 변수의 데이터 유형을 명시적으로 선언해야 합니다. TypeScript는 이러한 정적인 특성을 가지며, 개발자가 변수의 유형을 명시하여 코드를 작성합니다. 이는 초기에는 코드 작성이 까다롭게 느껴질 수 있지만, 컴파일러가 타입을 검사해 안전성을 높여줍니다.
동적 언어(JavaScript)
작성하기는 쉽지만 나중에 오류가 더 많아집니다. 동적 언어는 변수의 데이터 유형을 명시적으로 선언하지 않고 사용하는 언어입니다. JavaScript는 이러한 동적인 특성을 가지며, 변수에 어떤 유형의 데이터든 할당할 수 있습니다. 이는 코드 작성이 빠르고 유연하게 이루어진다는 장점이 있지만, 실행 시간에 오류가 발생할 가능성이 높아집니다.
TypeScript와 JavaScript의 차이점 키워드로 비교하기
| 키워드 | TypeScript | JavaScript |
| 정적 타입 지정 | 예 | 아니오 |
| 자바스크립트 트렌스 컴파일 | 트렌스 컴파일, 즉 ES5 및 ES6를 포함한 모든 유형의 JS | 트랜스 컴파일 할 수 없으며 작성된 해당 버전의 JS 또는 그 이하의 버전 |
| 코드 가독성 | 정적 타입 및 인터페이스를 통한 가독성 향상 | 동적 타이핑으로 인해 명시성 저하. 큰 코드 베이스일수록 해독이 어려움 |
| 코드량 | 상대적으로 많은 코드 작성이 필요 | 상대적으로 적은 코드 |
| 코드 구조 | 네임스페이스 및 모듈 지원 | 주로 함수 및 객체에 의존함 |
| 인터페이스 및 제네릭 | 사용자 정의 타입 정의를 위한 지원 | 제한된 지원, 유연성이 떨어짐 |
| 객체 지향 프로그래밍 | 클래스, 인터페이스 등을 강력하게 지원 | 프로토타입 및 함수를 사용하여 지 |
| 오류 감지 & 결과 예측 | 컴파일 중에 조기 감지 실행 결과 예측이 비교적 쉬움 |
런타임 오류가 발생 실행 결과 얘측이 비교적 어려움 |
| 도구 지원 | 향상된 IDE 지원, 더나은 코드 지능 | 좋은 IDE 지원이 있지만 상대적으로 성능이 떨어지는 경우도 있음 |
| IDE와 결합 | 광범위한 검증 및 리팩토링 기능 IDE와 결합성이 좋음 타입 정의에 대한 자동 완성 기능 향상 |
제한된 검증 및 리팩토링 기능 완전한 기능을 갖추지 못한 IDE 경험 |
| 컴파일 | 컴파일 단계 필요 | 컴파일 단계없이 브라우저에서 직접 해석 |
| 러닝 커브 | 높은 러닝 커브 | 낮은 러닝 커브 |
| 생산성 | 상대적으로 떨어짐 | 상대적으로 높음 |
5. 타입스크립트와 자바스크립트 중 하나를 고른다면?
JavaScript는 클라이언트 측 및 서버 측에서 매우 널리 사용되는 언어로, 많은 개발자가 활용하는 중요한 기술 중 하나입니다. 반면 TypeScript는 직접적으로 웹 브라우저에서 실행되지 않고 JavaScript로 트랜스컴파일되어 실행됩니다. JavaScript는 웹 브라우저에서 직접 실행되므로 디버그 및 컴파일이 더 쉽습니다. 이렇게 두 언어 간에는 각각의 특성과 한계가 있습니다. 각각의 특징을 바탕으로 어떤 프로젝트에 더 적합한 지 정리해보겠습니다.
TypeScript 특징
- 코드 안정성과 유지 보수성을 높이는 정적 타입 지정을 제공합니다.
- 개발자에게 우수한 생산성을 제공하며, 코드 검색 및 버그 예방을 강화합니다.
- 선택적으로 정적 유형 주석/지정이 가능하며 ES6를 지원합니다.
- 인터페이스, 클래스, 상속 등 객체 지향 프로그래밍의 기능을 지원합니다.
- 강력한 IDE 지원으로 코드 작성을 도와주며, 자동 완성 및 코드 탐색 기능을 제공합니다.
- 전용 멤버와 인터페이스를 상속하는 클래스 기반 객체 지향 언어입니다.
JavaScript 특징
- 크로스 플랫폼 언어로 클라이언트 측과 서버 측에서 사용됩니다.
- 배우고 시작하기 쉽고 유연하며 강력한 동적 언어입니다.
- 어떤 객체에든 자유롭게 접근할 수 있는 큰 자유를 제공합니다.
- 강력한 테스트 워크플로를 가지고 있으며, 추가된 종속성 없이 사용 가능합니다.
- 프레임워크의 지원을 받지만, 특정 프레임워크에 종속적이지 않습니다.
위의 특징을 바탕으로 각각 더 적합한 프로젝트를 정리해보자면,
TypeScript가 더 적합한 경우
- 대규모 프로젝트의 복잡성이 높을 때, 코드의 안전성과 유지보수성이 중요한 경우 TypeScript를 선택하는 것이 좋습니다.
- 외부 라이브러리와 프레임워크에서 제공하는 유형 정의를 활용하여 개발하고자 할 때 TypeScript의 강력한 타입 시스템이 도움이 됩니다.
- 대규모 팀이 함께 작업하며 효율적인 협업과 코드의 일관성이 필요한 프로젝트에는 TypeScript가 적합합니다.
- 타입스크립트의 IntelliSense 기능을 활용하여 개발 생산성을 높이고자 하는 경우에도 TypeScript를 고려할 수 있습니다.
JavaScript 가 더 적합한 경우
- 빠르게 구축하고자 하는 단기 프로젝트나 빠른 프로토타이핑이 필요한 경우 JavaScript가 더 적합할 수 있습니다.
- 코드 양이 적고 프로젝트의 유지보수보다는 빠른 개발이 중요한 상황에서는 JavaScript가 효과적일 수 있습니다.
- TypeScript를 배우고 적용하는데 시간이 부족하거나, 프로젝트의 규모와 복잡성이 낮은 경우에도 JavaScript를 선택할 수 있습니다.
JavaScript와 TypeScript 둘 중 무조건적으로 더 좋은 것을 고를 수는 없습니다. 각각의 특징에 따라 프로젝트의 목적과 규모에 맞게 선택되어야 합니다. TypeScript는 정적 타입 검사와 객체 지향 프로그래밍의 강력한 기능을 필요로 하는 대규모 프로젝트에 적합하며, JavaScript는 간단하고 빠르게 구축하고자 하는 프로토타이핑이나 소규모 프로젝트에 적합합니다.
6. 사용해본 후 느낀점
장점
- 타입을 명시함으로 인해 다른 개발자가 봤을 때 코드에 대한 이해도가 높아지게 되어 유지보수 측면에서 유리하게 작용할 것 같습니다.
- 마찬가지로 인터페이스를 통해 데이터 구조를 파악할 수 있어 코드 가독성과 이해도가 올라갑니다.
- 좀 더 견고하게 로직을 세울 수 있게 됩니다. 타입을 지정하기 위해서는 전체 데이터의 흐름부터 예상되는 결과까지를 예측하는 과정을 반복해야하기 때문입니다.
- null과 undefined를 구분하여 처리함으로써 이로인해 발생할 수 있는 에러들에 대한 예방이 가능합니다. (둘다 빈값이지만 특성을 따지자면 분명히 구분되는 것이 좋다고 생각합니다. )
- 런타임이 아닌 컴파일 단계에서 오류를 캐치해 바로 잡을 수 있다는 점이 개발자로서 좀 더 안정적으로 개발을 할 수 있다고 느끼게 해주었습니다. 미리 결과를 예측해 사전에 예방하는 차원으로 생각하면 개발 생산성이 올라갔다고 할 수도 있을 것 같습니다. (타입을 지정하고 빨간 에러줄을 찾아 해결하는 과정이 익숙해진다면)
단점
- 극악의 러닝커브가 최대의 단점이아닐까 생각합니다. 처음 타입스크립트를 학습할 때 주요 개념들을 이해하고 적용하기까지 상당 시간이 소요되었고, 프로젝트를 2개가량 진행한 현재도 타입스크립트를 완벽히 이해하고 사용한다고 느끼진 못합니다. (그래서 지속적으로 학습을 이어가고 있습니다.)
- 라이브러리나 외부 API에 대한 타입 지정이 까다로웠습니다. 타입의 지옥에 빠지는 기분이었습니다. 다행히 타입스크립트와 호환이 되는? (지원하는) 경우는 타입을 따로 제공하여 그나마 타입 관리가 쉬웠지만 그마저도 타입을 적용하는 과정이 결코 쉽지 않았고, 프로젝트 전체 개발 소요 시간 중 이 과정에서 상당시간이 소요되었습니다.
- 방대해지는 코드량과 수많은 타입들을 관리하기 위해 분리된 파일들 또한 단점이 아닐까 생각합니다.
- webpack, tsconfig 등 세팅해야하는 것들이 있고 추가적으로 라이브러리를 사용할 경우에 신경써야할 부분들이 더 늘어납니다.
위에서 타입스크립트와 자바스크립트 중 어떤 것을 선택해 사용해야 될지에 대해 설명했듯, 결국 어떤 것이 무조건적으로 좋다고 할 수 없고 상황에 따라 적절하게 선택해 사용하는 것이 좋다는 것을 알 수 있었습니다. 다만 직접 타입스크립트를 사용해보며 최근 타입스크립트에 대한 수요가 증가하는 이유에 대해서 알 것 같았습니다. 단기적으로 보았을 때는 러닝커브와 코드량 증가, 타입 시스템으로 인한 개발 소요 시간 증가 등등과 같은 단점이 크게 느껴질 수 있습니다. 하지만 장기적으로는 결국 타입 시스템을 통해 런타임 환경에서만 알 수 있었던 에러들을 사전에 예방함으로인해 불필요한 디버깅 시간을 줄이고, 다양한 타입스크립트 지원 도구들을 활용하여 개발 속도를 향상시킴으로서 생산성 저하라는 단점을 충분히 상쇄시킬 수 있다고 생각합니다. 실제로 한 연구에 따르면 타입스크립트를 사용함으로써 자바스크립트 코드에서 발생하는 약 15%의 오류를 미리 식별할 수 있다고 합니다. 이러한 장점들을 고려하였을 때 타입스크립트가 높은 러닝커브를 비롯한 몇가지 단점에도 불구하고 꾸준히 수요가 늘어나는 것도 이해가 됩니다.
확실하게 느끼는 것은 타입스크립트에 대해 알고 사용할 수록 더 편리하고 유용함이 커진다는 것입니다. 특히 데이터 구조를 파악하고 전체 로직을 체계적으로 관리할 수 있다는 점에서 신입개발자가 전체 프로젝트를 구성하고 개발하는 과정에서 학습하기 좋은 환경이 되지 않았나 생각합니다. 인턴 생활을 할 당시 실제로 인터페이스나 타입을 통해서 작게는 함수부터 전체 로직까지 빠르게 이해하고 개발에 참여할 수 있었기 때문입니다. 프로젝트를 진행하며 타입때문에 애도 많이 먹고 시간도 많이 잡아먹었지만 결과적으로 런타임 과정에서 에러가 거의 발생하지 않았다는 점을 생각해보면 좋은 개발 도구?임은 틀림없는 것 같습니다. 앞으로 계속해서 공부해 나가야할 것들이 많지만 그 과정에서 배우는 것들도 많을테니 꽤 즐거운 여정이 될 것 같습니다. 앞으로 새롭게 알게되는 것들이 생길 때마다 계속해서 글을 써보도록 하겠습니다.
참고문헌
TypeScript vs JavaScript – Difference Between Them
TypeScript vs JavaScript: Which Is Worthier? (Simplified Guide)
TypeScript vs. JavaScript: 7 Key Differences
JavaScript vs. TypeScript: What's the difference? | TheServerSide