JavaScript의 한계와 TypeScript의 등장

##  JavaScript의 동적인 특성은 독이든 성배다?

 

JavaScript 의 동적인 특성은 유연성과 학습 곡선을 낮추는 데 기여합니다. 이 언어는 변수의 타입을 런타임에 결정하므로, 개발자는 타입 선언에 크게 신경 쓰지 않아도 됩니다. 이는 코딩의 간결성을 높이고, 새로운 개발자가 JavaScript 를 빠르게 익힐 수 있도록 돕습니다. 또한, 동적 타입 언어의 특성은 빠른 프로토타이핑을 가능케 합니다. 런타임에 코드를 수정하고 즉시 테스트할 수 있어, 개발자는 아이디어를 빠르게 구현하고 실험할 수 있는 환경을 제공받게 됩니다. 이는 개발 생산성을 향상시키며 빠른 개발 주기를 가능케 합니다.

 

하지만 동적인 특성은 단점을 동반합니다. 실행 시간 오류가 발생할 수 있고, 변수의 타입이 실행 시간에 결정되어 디버깅이 어려워집니다. 또한, 동적 타입 언어는 안정성 부족이라는 문제를 안고 있습니다. 변수의 값이나 타입이 실행 시간에 변경될 수 있어 예상치 못한 동작이 발생할 수 있습니다. 이로 인해 코드의 안정성과 예측성이 감소하므로 개발자는 주의 깊은 변수 및 타입 관리와 추가적인 검증이 필요합니다. 밑에서 더 자세히 살펴보겠습니다.

 

## JavaScript 사용 시 치명적인 독이 될 수 있는 단점들

1. 실행 시간 오류

JavaScript는 변수의 타입이 실행 시간에 결정되어, 개발자의 실수로 인한 오류가 발생하기 쉽고 디버깅이 어려운 특징을 가지고 있습니다.

let num = 5;
console.log(num.toUpperCase()); // 실행 시간 오류: 숫자는 toUpperCase() 메소드를 가지고 있지 않음

위의 코드에서 num은 초기에 숫자로 선언되었지만, toUpperCase() 메소드는 문자열에서만 사용 가능하므로 실행 시간 오류가 발생합니다.

 

2. 약한 타입 체크 

JavaScript는 변수의 타입을 명시적으로 지정하지 않고, 언제든지 다른 타입으로 변경할 수 있는 유연한 특성을 가지고 있습니다.

let value = 10;
value = value + " apples"; // 얼마든지 가능하지만, 예상치 못한 동작을 초래할 수 있음
console.log(value); // "10 apples"

 

위의 코드에서 value는 초기에 숫자로 시작되었지만, 문자열과 연산되면서 문자열로 변경되어 예상치 못한 결과를 초래할 수 있습니다.

 

3. 물렁물렁한 객체

JavaScript에서 객체는 동적이고, 개발자가 속성을 자유롭게 추가, 삭제, 수정할 수 있어 예상치 못한 동작이 발생할 수 있습니다

const obj = { latitude: 11.5, longitude: 47.1 };
const result = obj.latitude * obj.longitute; // NaN (Not a Number) 반환

 

위의 코드에서 obj.longitute의 오타로 인해 예상치 못한 결과가 발생할 수 있습니다.

 

4. 브라우저 종속성 

JavaScript는 브라우저에 종속적이어서 각 브라우저에서 동작을 보장하기 어렵고, 크로스 브라우징 이슈가 발생할 수 있습니다.

// 브라우저 종속성이 있는 코드
const element = document.getElementById("myElement");
element.style.width = "200px";

 

이 코드에서는 document.getElementById를 사용하여 HTML 요소를 가져오고, 해당 요소의 스타일 속성을 변경합니다. 그러나 이 코드는 브라우저 환경에서 동작하며, 특정 브라우저에서만 올바르게 작동할 수 있습니다.

 

만약 코드를 Internet Explorer와 최신 버전의 Chrome에서 실행한다면, Internet Explorer는 getElementById 메서드에 대한 지원이 부족하거나 다르게 구현되어 있을 수 있습니다. 이로 인해 크로스 브라우징 이슈가 발생할 수 있습니다.

 

크로스 브라우징 이슈를 해결하기 위해서는 브라우저 간의 차이를 고려하고, 특정 브라우저에 종속적이지 않은 코드를 작성해야 합니다. 이를 위해 표준을 준수하는 방법이나 브라우저별로 다르게 동작하는 부분을 감지하고 처리하는 방법을 사용할 수 있습니다.

// 크로스 브라우징 이슈를 고려한 코드
const element = document.getElementById("myElement");

if (element) {
  if (typeof element.style.width !== "undefined") {
    // 브라우저에 따라서 width 속성이 다르게 동작하는 경우 처리
    element.style.width = "200px";
  } else {
    // 다른 처리 방법
  }
}

 

이와 같이 코드를 작성하면 특정 브라우저의 동작에 맞춰 적절한 처리를 할 수 있습니다.

 

5. 불변성 부족

avaScript는 언어 차원에서 immutable을 지원하지 않아, 객체의 속성을 쉽게 변경할 수 있습니다.

const person = { name: "John" };
person.name = "Doe"; // const지만 객체 내부의 속성은 변경 가능

 

const로 선언된 person 객체이지만, 내부의 속성은 여전히 변경 가능합니다.

 

6. 동적 바인딩과 this의 어려움

함수 내에서 this의 값이 실행 컨텍스트에 따라 동적으로 바인딩되어, 예상치 못한 this 값이 발생할 수 있습니다.

const person = {
  name: "John",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

const greetFunction = person.greet;
greetFunction(); // "Hello, undefined"

 

greetFunction이 실행되면서 this 값이 제대로 바인딩되지 않아 undefined가 출력될 수 있습니다.

 

---

## JavaScript 한계로 인한 TypeScript의 등장

## TypeScript란?

1. 등장 배경

JavaScript의 장점과 단점을 동시에 가진 언어인 JavaScript는 객체 속성의 쉬운 변경이 장점이자 단점입니다. 이로 인해 테스트를 통해 발견한 버그가 배포 후에도 새로운 버그로 이어질 수 있습니다. 프로그램 규모가 커질수록 버그 발생 가능성이 높아져서 이러한 단점을 보완하기 위해 등장한 언어가 TypeScript입니다.

2. 정의

TypeScript는 JavaScript의 슈퍼셋으로, JavaScript의 모든 기능을 포함하면서 타입을 부여하여 안정성을 높이는 오픈소스 프로그래밍 언어입니다. JavaScript의 기능을 확장하면서도 타입을 추가하여 보다 안정적인 개발 환경을 제공합니다.

3. 확장성

TypeScript는 ES5, ES6, ES7 등의 JavaScript 슈퍼셋이므로 Babel과 같은 트랜스파일러를 사용하지 않고도 새로운 기능을 기존 JavaScript 엔진에서 실행할 수 있습니다.

 

---

## TypeScript의 특징

1. 오픈소스 프로그래밍 언어

오픈소스 프로그래밍 언어 TypeScript는 Microsoft에서 개발되었지만, 개방적인 커뮤니티와 개발자들에 의해 지속적으로 향상되고 있는 오픈소스 언어입니다. 이는 사용자들이 새로운 기능을 제안하고 버그를 찾아내어 기여할 수 있도록 하는데 큰 장점이 되고 있습니다.

 

2. 정적 타입(Type)을 통한 에러예방

정적 타입을 통한 에러예방 측면에서 TypeScript는 변수, 함수, 객체 등의 타입을 명시적으로 선언할 수 있어, 개발자가 코드를 작성하는 단계에서 타입 관련 오류를 미리 방지할 수 있게 해주어 안정성을 높이고 유지보수를 용이하게 만들어 줍니다.

 

3. JavaScript와의 호환성( JavaScript의 슈퍼셋)

JavaScript와의 호환성에 대해서 TypeScript는 JavaScript의 확장이기 때문에 이미 존재하는 JavaScript 코드를 그대로 사용하거나 TypeScript로 마이그레이션할 수 있어, 기존 프로젝트에 점진적으로 TypeScript를 도입하는 데 유용합니다.

 

4. 다양한 도구 지원

다양한 도구 지원 면에서 TypeScript는 Visual Studio Code, Atom, Sublime Text 등 다양한 통합 개발 환경(IDE)에서 강력한 지원을 받아 코드 어시스트, 자동 완성, 디버깅 등의 기능을 활용하여 개발 생산성을 높일 수 있습니다.

 

5. 객체지향 프로그래밍 언어 지원

객체지향 프로그래밍 언어 지원에 대해서 TypeScript는 클래스, 인터페이스, 모듈 등 객체지향 프로그래밍의 핵심 개념을 지원하여 구조화된 코드를 작성할 수 있게 도와줍니다. 이는 대규모 프로젝트에서 코드의 유지보수와 확장성을 향상시키는 데 기여합니다.

 

6. 높아지는 생산성 & 안정성

높아지는 생산성 & 안정성 측면에서 정적 타입, 객체지향 지원, 강력한 도구 지원 등이 결합되어 TypeScript는 개발 생산성을 향상시키고 동시에 안정성을 제공함으로써 프로젝트의 전반적인 품질을 향상시키는 데 기여하고 있습니다.

---

## JavaScript와 TypeScript 비교

Javascript	Typescript
동적타입 언어	정적타입 언어
인터프리터 언어	컴파일러 언어
유연성 ( 타입제한 x )	간결성, 일관성, 재사용성
독립적 실행	의존적 실행 ( 자바스크립트 )
작은 규모 프로젝트에 적합	큰 규모 프로젝트에 적합
.js 확장자	.ts 확장자