프론트엔드 개발자 채용공고를 보면 자격요건에 TypeScript에 대한 지식 및 활용 경험, TypeScript 관련된 지식 또는 경험이 있으신 분, TypeScript에 대한 깊은 이해가 있으신 분 이라는 문구를 자주 볼 수 있습니다. 많은 기업들이 TypeScript를 사용하고 있으며, 사용하는 것이 좋다고 알려져 있습니다. 그러나 왜 TypeScript를 사용해야 하는지 정확한 이유가 궁금해져서 블로그 글을 통해 정리하게 됐습니다.
🤔 TypeScript란 무엇인가요?
TypeScript 공식문서 메인 화면에 보면 아래와 같이 설명이 되어 있는 것을 볼 수 있습니다.
🤩 What is TypeScript?
JavaScript and More
JavaScript 그 이상
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
TypeScript는 JavaScript에 추가적인 문법을 더하여 에디터와의 더 긴밀한 통합을 지원합니다. 에디터에서 오류를 조기에 잡아낼 수 있습니다.
-
JavaScript는 동적 타입 언어이기 때문에 변수의 타입을 명시하지 않아 코드 실행 중에 오류(Runtime Error)가 발생하는 경우가 많습니다. 하지만 TypeScript는 정적 타입 언어로, 변수의 타입을 명시할 수 있습니다. 덕분에 코드 작성 시점에 타입 오류를 미리 확인할 수 있어 런타임 오류를 줄이는 데 도움이 됩니다.
Runtime Error: 프로그램이 실행하는 동안 발생하는 오류동적 타입 언어: 변수의 타입이 실행 중에 결정되는 언어정적 타입 언어: 변수의 타입이 컴파일 시에 결정되는 언어
A Result You Can Trust
신뢰할 수 있는 결과
TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
TypeScript 코드는 JavaScript로 변환되며, JavaScript가 실행되는 모든 곳에서 실행됩니다: 브라우저, Node.js, Deno 그리고 여러분의 앱에서 실행됩니다.
Safety at Scale
대규모에서의 안정성
TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
TypeScript는 JavaScript를 이해하고 타입 추론을 사용하여 추가적인 코드 없이도 훌륭한 도구를 제공합니다.
🤔 TypeScript의 등장 배경
JavaScript는 원래 웹사이트에서 간단한 상호작용을 처리하는 작은 프로그래밍 언어로 설계되었습니다.
반면에 Java는 어떤 컴퓨터에서도 실행될 수 있는 복잡한 앱을 만들기 위해 특별히 설계되어 프로그래머가 다양한 타입의 코드를 작성해야 했습니다.
하지만 JavaScript는 세부 정보를 생략하여 가독성을 높이는 방향으로 설계되었으며, 일반적으로 작은 규모의 프로젝트를 대상으로 했습니다.
오늘날 JavaScript는 거의 모든 곳에서 사용되며, 모바일 및 데스크탑 애플리케이션 개발에도 널리 사용됩니다. 이로 인해 애플리케이션의 복잡성은 크게 증가하면서, 이를 관리하기 위해 타입 시스템을 추가하는 필요성이 부각되었습니다.
타입 시스템? 프로그래밍 언어에서 변수, 함수 등의 값이나 연산의 타입을 정의하고 검사하는 시스템
이런 변화와 요구에 따라 TypeScript가 등장하게 되었습니다.
🤔 TypeScript의 필요성과 이점
대규모 코드베이스에서 JavaScript를 작성하는 많은 문제가 발생할 수 있습니다. 많은 JavaScript 앱들은 수십만 개의 파일로 구성되어 있습니다. 하나의 파일을 변경하면 다른 파일들의 동작에 영향을 줄 수 있습니다. 이는 연못에 돌을 던지는 것처럼, 파동이 은행으로 퍼지는 것과 같은 결과를 초래할 수 있습니다.
프로젝트의 각 부분 사이의 연결, 예를 들어 API 호출, 데이터 흐름, 이벤트 처리 등을 검증하는 작업은 빠르게 시간이 소모될 수 있습니다. TypeScript와 같은 타입 검사 언어를 사용하면 다음과 같이 개발자에게 개발 중 즉시 피드백을 제공할 수 있습니다.
타입 검사
TypeScript는 변수, 함수, 클래스 등에 명시적인 타입을 지정할 수 있게 해줍니다. 이는 개발자가 코드를 작성할 때 변수가 저장할 데이터의 종류를, 함수가 어떤 종류의 인자를 받고 반환해야 하는지 등을 명확히 정의할 수 있도록 도와줍니다. 이러한 명시적인 타입 정의는 코드의 일관성을 유지하고 예상치 못한 데이터 형식으로 인한 오류를 줄여줍니다.
API 호출 검증
TypeScript는 외부 API를 호출할 때 API의 응답 형식이나 전송 데이터의 유효성을 검증할 수 있는 기능을 제공합니다. 예를 들어 API의 응답이 예상한 형식과 다를 경우 TypeScript는 경고나 오류를 통해 개발자에게 즉시 알려줍니다.
데이터 흐름 분석
TypeScript는 데이터의 흐름을 추적하고 이해합니다. 이는 변수나 객체가 어떻게 전달되고 변환되는지를 추적하여 불필요한 형 변환 오류를 방지하고 코드의 일관성을 유지하는 데 도움을 줍니다.
이벤트 처리 검증
TypeScript는 이벤트 핸들러나 비동기 처리 코드에서 발생할 수 있는 오류를 사전에 포착할 수 있습니다. 예를 들어 이벤트 핸들러 함수가 예상한 인자를 받지 않거나 반환 형식이 다를 경우 TypeScript는 이를 식별하고 개발자에게 경고를 제공합니다.
비즈니스 로직
TypeScript는 프로젝트의 다양한 비즈니스 로직이 서로 충돌 없이, 예를 들어 서로 다른 기능이 예기치 않게 서로 영향을 미치거나 데이터의 무결성이 해치는 경우 없이 연결되어 있는지 검증합니다. TypeScript는 이러한 상황을 방지하고 검증합니다. 예를 들어, 주문 처리 시스템에서 주문 생성, 결제 처리, 배송 관리 등의 로직이 올바르게 작동하는지 확인합니다.
이러한 기능들은 TypeScript가 개발자들이 코드에 대해 더 확신을 갖게 하고, 프로젝트를 실수 없이 유지하도록 돕습니다.
🤔 TypeScript vs JavaScript: 주요 차이점
TypeScript는 JavaScript의 모든 기능을 포함하며 그 이상을 제공합니다. 이 두 언어의 주요 차이점을 살펴보겠습니다.
타입 시스템
- TypeScript는 정적 타입 체크를 지원합니다. 변수 선언 시 타입을 명시하고, 컴파일러가 코드를 분석하여 타입 관련 오류를 사전에 찾아내며, 이는 개발자가 코드의 신뢰성을 높이고 실수를 줄이도록 돕습니다.
- JavaScript는 동적 타입 언어로, 변수의 타입을 런타임 시 동적으로 결정합니다. 이는 유연성을 제공하지만, 실행 중 발생할 수 있는 타입 오류가 있을 수 있습니다.
컴파일과 실행 환경
- TypeScript는 TypeScript 컴파일러를 통해 JavaScript로 변환됩니다. 이 과정을 통해 TypeScript 코드를 브라우저나 Node.js와 같은 JavaScript 환경에서 실행할 수 있습니다.
- JavaScript는 별도의 컴파일 과정 없이 직접 브라우저나 Node.js에서 실행됩니다.
문법적 확장
- TypeScript는 JavaScript의 모든 문법을 포함하면서도, 인터페이스, 제네릭 타입, enum 등의 고급 문법적 확장을 제공합니다. 이는 코드의 가독성과 유지 보수성을 높이는 데 도움을 줍니다.
- JavaScript는 ES6 및 JavaScript 문법의 일부를 사용할 수 있지만, TypeScript의 추가적인 문법 확장 기능은 제공하지 않습니다.
프로젝트의 규모와 유지 보수성
- TypeScript는 대규모 프로젝트에서 더욱 뛰어난 유지 보수성과 코드 안정성을 제공합니다. 특히, 여러 개발자가 협업하는 환경에서 타입 시스템을 통해 코드의 일관성을 유지할 수 있습니다.
- JavaScript는 작은 규모의 프로젝트에서는 유연성을 제공하지만, 큰 규모의 복잡한 프로젝트에서는 타입 관련 이점이 부족할 수 있습니다.
🤔 결론: TypeScript를 사용해야 하는 이유
타입 안정성
TypeScript는 정적 타입 체크를 지원하여 변수, 함수, 객체 등에 명확한 타입을 지정할 수 있습니다. 이는 코드를 작성하는 동안 발생할 수 있는 타입 관련 오류를 사전에 방지하고, 코드의 신뢰성을 높여줍니다.
코드 유지보수성 향상
대규모 프로젝트에서는 코드의 복잡성과 유지보수가 중요한 문제입니다. TypeScript는 명시적인 타입 정의를 통해 코드의 가독성을 높이고, 다른 개발자가 코드를 이해하고 수정하기 쉽게 만듭니다.
코드 예측 가능성
TypeScript는 개발 초기 단계에서 코드를 분석하고 타입 오류를 확인할 수 있습니다. 이는 프로젝트의 품질을 높이고, 실행 시 발생할 수 있는 예기치 않은 오류를 사전에 방지할 수 있습니다.
도구와의 통합
TypeScript는 강력한 개발 도구와 통합되어 있어, 코드 완성 기능, 리팩토링 지원, 디버깅 등 다양한 개발자 도구를 제공받을 수 있습니다. 이는 개발 생산성을 높이는데 큰 도움이 됩니다.
JavaScript 환경과의 호환성
TypeScript는 JavaScript 코드와의 호환성을 제공하며, TypeScript 코드는 JavaScript로 변환되어 브라우저나 Node.js 등의 환경에서 실행될 수 있습니다.
또한, To Type or Not to Type: Quantity Detectable Bugs in JavaScript 논문에서는 정적 타입 시스템이 JavaScript 코드베이스의 코드 품질 향상에 상당한 이점을 제공한다는 결론을 도출했습니다. GitHub의 공개 프로젝트에서 Flow나 TypeScript를 도입했을 경우, 공개된 버그 중 15%를 사전에 방지할 수 있음을 발견했습니다. 이는 TypeScript가 코드의 신뢰성을 높이고 버그를 사전에 방지할 수 있어 많은 프로젝트에서 선택하는 이유 중 하나가 아닐까 생각합니다.
🤔 참고자료
