[우아한 타입스크립트] 1장 웹 개발의 역사 및 타입스크립트의 등장

들어가며

타입스크립트를 이용하여 개발을 하고 있지만, 여전히 헷갈리는 문법들이 많고 제대로 활용하지 못하고 있다는 생각에 처음부터 깊게 파고들어야 하는 필요를 느꼈다.

이에, 우아한형제들에서 제작한 타입스크립트 책을 토대로 단단한 타입스크립트 실력을 다지기 위해 작성한다.

---

웹 개발의 역사

1. 자바스크립트와 ECMASCRIPT

TL;DR

• 자바스크립트는 두 브라우저의 경쟁 속에 탄생되었으며, 이에 따라 크로스 브라우징 이슈가 존재했다
• 크로스 브라우징을 해결하기 위해 Ecma (국제 표준화 기구)에 자바스크립트 표준화 규격을 제시, 채택되었다.

자바스크립트는 1990년대 마이크로소프트의 IE와 넷스케이프 커뮤니케이션즈의 넷스케이프 내비게이터(첨 들어봄) 두가지 브라우저를 가장 많이 사용하던 당시에 웹의 다양한 콘텐츠를 표현하고자 만들어졌다. 

당시, IE와 내비게이터의 DOM 구조는 완전히 달랐다. 따라서, 개발자는 브라우저마다 코드를 다르게 작성해야 했다(크로스 브라우징). 또한, 새로운 버전의 브라우저가 출시되어 자바스크립트의 새로운 기능을 지원하더라도 사용자가 예전 브라우저를 사용한다면 해당 기능을 사용할 수 없게 되었다. 이에 대응하기 위해 폴리필(Polyfill)과 트랜스파일(Transpile)이 등장하였다.

 

폴리필 (Polyfill)

지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드.

 

트랜스파일 (Transpile)
한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 거친 다른 언어로 변환하는 것.

트랜스파일은 컴파일의 Subset으로, 추상화 정도가 유사한 언어를 다른 언어로 컴파일하는 것을 특별히 Transpile이라 부른다. 예를 들어, 높은 버전의 자바스크립트 코드를 호환성을 위해 낮은 버전의 자바스크립트로 변환하는 Babel, tsc, ESBuild, SWC가 이에 해당한다.**

 

따라서, 모든 브라우저에서 동일하게 작성될 수 있는 표준화된 자바스크립트의 필요성이 제기되었고습니다.

이에 넷스페이크는 컴퓨터 시스템의 표준을 관리하는 Ecma 인터내셔널에 자바스크립트 기술 규격을 제출하였고 이를 ECMAScript 라는 이름으로 표준화를 공식화하였다.

 

---

2. 개발 생태계의 발전

TL;DR

• 대규모 프로젝트가 많아짐에 따라, 컴포넌트 단위 개발이 늘어났다

대규모 프로젝트가 늘어남에 따라, 컴포넌트 단위로 개발하는 방식이 생겨났다. 또한, 서비스 규모가 커짐에 따라 다뤄야 하는 데이터가 폭발적으로 늘어났고, 표현해야 하는 화면도 다양해졌다. 이를 테면, 모바일, 패드, 노트북, 랩톱 PC가 해당된다. 게다가 사용자는 저마다의 디바이스의 최적화된 UI/UX를 기대한다.

이러한 상황에 맞물려 컴포넌트 베이스 개발 (CBD, Component Based Development) 방법론이 등장했다.

컴포넌트를 설계할 때 중요한 점은 의존성을 최소화하거나 없애는 것이다. 개발자는 컴포넌트 간의 의존성을 파악하고 이를 최소화하여야 변화에 대응할 수 있다.

 

---

3. 협업을 위한 도구

TL;DR

• 자바스크립트는 동적 언어 타입이므로, 협업 및 개발에 불리하다.
• 타입스크립트는 자바스크립의 슈퍼셋 언어이다.

하나의 프로젝트에 많은 인원이 투입되고, 채용상황에 따라 수시로 개발자가 바뀌는 상황에서 과거의 코드를 타 개발자가 유지보수하기 쉽게 개발하는 것은 선택이 아닌, 필수가 되었다. 하지만, 자바스크립트 자체는 이를 방해하는 1등 방해 요소였다.

 

왜 자바스크립트가 뭐 어째서!?

자바스크립의 한계

1. 동적 언어 타입
자바스크립트는 동적 타입 언어이다. 즉, 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다. 예를 들어 해당 코드에서 자바스크립트는 변수 a 의 타입이 number인지 string인지 실제 코드가 동작할 때 a에 값이 할당되는 순간 그 값이 1인지 ‘1’인지에 따라 결정된다. 따라서, 아래 코드는 최종적으로 string 결정된다.

let a = 1
a = '1'

 

2. 동적 언어 타입의 한계
동적 언어 타입의 한계는 다음 예시로 쉽게 설명가능하다.

const sum = (a,b) => {
	return a+b;
}

sum(100) // NaN
sum("a", "b") //ab

해당 코드는 에러를 발생시키지 않고 정상적으로 동작한다.또한, 해당 코드는 상식적으로 두 숫자를 더하는 함수이지만, 어떤 개발자는 두 문자열을 합치려고 사용한 코드일 수도 있다.
따라서, 개발자가 실수할 여지도 많아지며 협업하는 과정에서 일관성을 지키기 어려워진다.
하나의 숫자만 전달했을 때 b를 undefined로 두는 관대함을 지닌 자바스크립트의 특징 때문에, 오류를 발생시키지 않는다. 자바스크립트는 b를 적절한 타입인 NaN로 형변환 후 실행을 이어간다.

3. 타입스크립트

타입스크립트는 마이크로스프트에서 제시한 자바스크립트 SuperSet이다.

SuperSet
기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말함. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행됨.

 

타입스크립트는 다음과 같은 장점을 제공한다.

1. 안정성 보장 → 정적 타이핑 제공, 컴파일 단계에서 타입 검사를 해준다
2. 개발 생산성 향상 → IDE에서 타입 검사를 해주며, 이를 통해 타입 추론이 가능하다

협업에 유리 → Interface, Generic 등을 통해 타입을 지정하면 코드 이해와 공유가 편리하다.

 

---

마치며

자바스크립트의 탄생과 ECMAScript가 무엇인지, 타입스크립트의 특징에 대해 알아보았다.

기사와 같은 과정들을 읽으며 느낀 점은 현대의 개발자는 데이터를 잘 다루는 능력이 중요하다는 생각이다.

어느 분야를 가던지 데이터를 다루는 방법이 우선시된다.

프론트엔드는 캐싱, Lazy Loading 등과 같은 최적화 방법이 중요하듯이 말이다.

백엔드는 말할 필요도 없고, 빅데이터 분야 심지어 머신러닝과 AI도 사실은 데이터를 다루는 학문이 아닌가?