들어가며

자바스크립트 표준 EcmaScript의 탄생

과거 넷스케이프와 마이크로소프트는 자신들의 브라우저에서만 사용하는 기능들을 늘렸다. 빠르게 변화하는 시장 속에서 넷스케이프는 Ecma 인터내셔널(국제 표준화 기구)에 자바스크립트의 표준화를 위한 기술 규격을 제출하였고 이를 표준화하였다.

다른 언어의 특징을 고려하기 위해 나왔던 라이브러리들이 있다.

폴리필: 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인. 트랜스파일은 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정을 말한다. 유명한 폴리필 플러그인으로는 바벨이 있다.

J-Query는 브라우저 호환성을 고민하지 않고 한 번에 개발할 수 있도록 지원해주는 라이브러리가 유행한 것은 당연한 결과였다.

웹 사이트, 웹 애플리케이션

웹 사이트: 수집된 데이터 및 정보를 특정 페이지에 표시하기 위한 정적인 웹을 말한다. 단방향으로 정보를 제공하므로 사용자와 상호 작용하지 않으며, 콘텐츠가 동적으로 업데이트되지 않는다.

웹 애플리케이션: 사용자와 상호작용하는 쌍방향 소통의 웹을 말한다. 검색, 댓글, 채팅, 좋아요 기능 등 웹 페이지 내부에 수많은 애플리케이션이 동작하고 있기 때문에 웹 애플리케이션이라고 부른다.

웹의 성장은 웹 개발자가 구현해야 하는 규모가 커졌음을 의미하기도 한다. 단순 정보 모음 사이트가 아닌 수많은 애플리케이션이 동작하는 대규모 웹 애플리케이션을 만드는 데 적합하지 않았다.

개발 생태계의 발전

거대한 웹 애플리케이션이 등장하면서 개발 환경은 다음과 같이 변하였다. 하나의 페이지를 통으로 개발하는 것이 아닌 컴포넌트 단위로 개발하는 방식이 생겨났다. Ajax로 페이지 전체를 새로고침하지 않아도 비동기 통신으로 일부 데이터를 로드할 수 있게 되었다.

이에 최적화된 UI/UX를 기대하기 시작하였고 이에 사용자의 일부 다른 부분에서 화면을 렌더링할 수 있게 되었다.

컴포넌트 베이스 개발(CBD) 방법론이 대두되었다.

CBD 방법론: 재사용할 수 있는 컴포넌트를 개발 또는 조합해서 하나의 애플리케이션을 만드는 개발 방법론을 말한다.

컴포넌트는 모듈과 달리 독립된 기능을 재사용하기 위한 코드의 묶음이다. 때문에 의존성을 최대한 없애야 한다. => 개발자는 의존성을 최소화하고 독립적으로 사용하기 위해서 노력해야 한다.

규모가 커짐에 따라 유지보수를 하는 데 협업의 중요성도 높아졌다. 만약 누군가가 만든 함수를 사용하는 것을 어떻게 해야 하는지 모른다면 우리는 누군가를 찾아가거나 해당 코드를 뜯어보아야 했다. 개발에 투입된 인원이 많을수록 코드를 파악하기 어려워지는 것이 당연하지만 자바스크립트가 과연 유지보수하기 쉬운 언어인지 생각해보아야 한다.

자바스크립트의 한계

동적 타입 언어: 변수 값이 할당될 때 해당 값의 타입이 결정된다.

동적 시스템의 한계: 아래 코드와 같이 개발자의 의도와 다르게 사용되기도 한다.

에러가 나야 하지만 오류 없이 NaN을 반환하거나 숫자가 아닌 문자열의 합을 반환하는 등 개발자의 의도와 다른 함수를 만들기도 한다.

한계 극복을 위한 해결 방안

JSDoc: 모듈, 네임스페이스, 클래스, 메소드, 매개변수 등에 대한 API 문서 생성 도구이다. 하지만 어디까지나 주석 성격이 강하기 때문에 강제성을 부여하기에는 어렵다. PropTypes: 리액트에서 컴포넌트 props의 타입을 검사하기 위해 사용하는 속성이다. 유효한 값이 전달되었는지 확인은 가능하지만 타입 검사를 하는 데는 사용할 수 없다. Dart: 구글이 JS를 대체하기 위해 제시한 새로운 언어. 하지만 이전 넷스케이프 vs 마이크로소프트와 같이 개발의 파편화를 불러올 수 있어 시장에서의 시선이 좋지는 않다. 3가지 모두 의미 있는 해결 방안이었지만 자바스크립트 스스로가 인터페이스, 타입을 기술할 수 있는 언어로 발전해야 한다는 목소리가 커졌다.

타입스크립트의 등장

시간이 지나 마이크로소프트는 자바스크립트의 슈퍼셋 언어인 타입스크립트를 공개하였다. 다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었고 아래의 단점들을 극복하였다.

슈퍼셋: 기존 언어를 포함한 새로운 기능과 문법을 추가하여 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 기존 언어 코드로 변환되어 실행된다.

안전성 보장: 컴파일 단계에서 타입을 검사해주기 때문에 타입 에러를 사전에 방지할 수 있다.

개발 생산성 향상: VSCode 등의 IDE에서 타입 자동완성 기능을 제공한다. 이 기능을 통해 변수와 함수 타입을 추론할 수 있고 props를 어떤 것을 넘겨야 할지 바로 볼 수 있기 때문에 개발 생산성이 크게 향상된다.

협업에 유리: 타입스크립트를 사용하면 복잡한 애플리케이션 개발, 협업에 유리하다. 타입 등을 통해 함수나 컴포넌트를 기술한다면 다른 개발자들이 보기에 코드를 쉽게 파악할 수 있게 도와준다.

타입스크립트 인터페이스: 객체 구조를 정의하는 역할을 한다. 특정 객체가 가져야 하는 속성과 메소드의 집합을 인터페이스로 정의하여 객체가 그 구조를 따르게 한다.

자바스크립트에 점진적으로 사용 가능: 일괄 전환이 아닌 점진적인 도입이 가능하다.