Sevity Blog

TypeScript vs ECMAScript

ECMAScript (ES):

ECMAScript는 JavaScript 언어의 표준 사양입니다.
ECMAScript는 JavaScript의 기본 구조와 규칙을 설정하며, JavaScript 엔진이 이 표준을 따라 구현되어야 합니다.
ECMA International이라는 표준화 기구가 관리하며, 시간이 지남에 따라 여러 버전의 ECMAScript 사양이 발표되었습니다 (예: ES3, ES5, ES6/ES2015 등).

TypeScript

TypeScript는 Microsoft에서 개발한 JavaScript의 상위 집합(superset) 언어입니다.
TypeScript는 JavaScript의 모든 기능을 포함하며, 그 위에 정적 타입 체크와 인터페이스, 제네릭, 데코레이터 등과 같은 추가 기능을 제공합니다.
정적 타입 체크는 코드의 오류를 런타임 전에 찾아내고, 코드의 가독성과 유지 관리성을 향상시킵니다.
TypeScript는 개발 시간에 TypeScript 코드를 JavaScript 코드로 변환(트랜스파일)하여 실행할 수 있도록 합니다. 이는 TypeScript 컴파일러를 사용하여 수행됩니다.

비교:

타입 시스템: TypeScript는 정적 타입 시스템을 제공하는 반면, ECMAScript(JavaScript)는 동적 타입 시스템을 사용합니다.
추가 기능: TypeScript는 ECMAScript의 기능에 추가적인 기능을 제공하여, 큰 프로젝트의 관리와 유지 보수를 돕습니다.
호환성: TypeScript는 JavaScript와 완벽하게 호환되며, TypeScript 코드는 JavaScript 코드로 변환될 수 있습니다.
표준화: ECMAScript는 국제 표준이며, TypeScript는 Microsoft에 의해 관리되는 오픈 소스 프로젝트입니다.

코드 샘플

// javascript
function add(a, b) {
    return a + b;
}

const result = add(5, '10');  // Output: '510' (문자열 연결)


//typescript
function add(a: number, b: number): number {
    return a + b;
}

const result = add(5, '10');  // Type Error: Argument of type 'string' is not assignable to parameter of type 'number'.

위의 TypeScript 코드에서 add 함수는 두 개의 숫자 타입 매개변수를 받아야 하며, 숫자 타입의 값을 반환해야 한다는 것을 명시적으로 지정합니다. 따라서, 문자열을 매개변수로 전달하려고 하면 컴파일 타임에 타입 에러가 발생합니다.

이 예제는 TypeScript의 정적 타이핑이 코드의 안정성을 어떻게 향상시키는지 보여줍니다. TypeScript는 개발자에게 잠재적인 문제를 미리 알려주어, 런타임 에러를 줄이고 코드의 품질을 향상시킵니다.

도입배경

2000년대 초반에는 웹 개발에서 주로 쿠키를 사용하여 클라이언트 측 데이터를 저장하곤 했습니다. 그러나 쿠키는 몇 가지 제약 사항과 문제점이 있었습니다. 예를 들어, 쿠키는 작은 용량의 데이터만 저장할 수 있고, 모든 HTTP 요청에 자동으로 포함되어 네트워크 부하를 초래할 수 있습니다.

이러한 문제를 해결하기 위해 HTML5 명세의 일부로 Local Storage와 Session Storage가 도입되었습니다. 이 기술은 2009년에 W3C에 의해 표준화되었고, 대부분의 현대 웹 브라우저에서 지원됩니다

.

Local Storage와 Session Storage의 주요 특징:

클라이언트 측 저장: 이들은 클라이언트 측에서만 접근 가능하며, 서버로 전송되지 않습니다. 이로 인해 네트워크 부하가 줄어듭니다.

용량: 일반적으로 5~10MB의 데이터를 저장할 수 있어, 쿠키보다 훨씬 더 많은 정보를 저장할 수 있습니다.

API: JavaScript를 통해 간단하게 데이터를 저장하고 검색할 수 있는 API가 제공됩니다.

Session Storage는 탭이나 창이 닫힐 때까지 데이터를 유지하며, Local Storage는 영구적으로 데이터를 저장합니다.

Local Storage는 도메인, 프로토콜, 그리고 포트까지 모두 일치해야만 데이터에 접근할 수 있기 때문에, 포트가 다른 두 서비스에서는 Local Storage를 공유할 수 없습니다. 

코드 샘플

// Local Storage에 정보 저장
localStorage.setItem('isLoggedIn', 'true');

//Local Storage에서 정보 불러오기
const storedIsLoggedIn = localStorage.getItem('isLoggedIn');

브라우저에서 확인

크롬에서 F12를 누르고 애플리케이션탭 > 왼쪽탭에서 로컬 스토리지를 보면 다음처럼 내용 확인이 가능하다.