Study
1장. 들어가며
1.1 웹 개발의 역사
1.1.1 자바스크립트의 탄생
1.1.2 자바스크립트 표준, ECMAScript의 탄생
💡 폴리필(polyfill) 과 트랜스파일(transpile)
- 폴리필은 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인을 말한다. 트랜스 파일은 최신 버전의 코드를 예전 버전의 코드로 변환하는 과정을 말한다. 둘 다 최신 기능을 구버전의 실행 환경에서 동작할 수 있게 바꿔주는 역할을 한다. 유명한 폴리필 라이브러리로 core.js 와 polyfill.io를 들 수 있으며 대표적인 트랜스파일러로는 바벨이 있다.
1.1.3 웹사이트에서 웹 애플리케이션으로의 전환
- 웹사이트
- 수집된 데이터 및 정보를 특정 페이지에 표시하기 위한 정적인 웹. 단방향으로 정보를 제공하기 때문에 사용자와 상호 작용하지 않으며, HTML에 링크가 연결된 웹 페이지 모음으로 콘텐츠가 동적으로 업데이트되지 않는다.
- 웹 애플리케이션
- 사용자와 상호작용하는 쌍방향 소통의 웹.
1.1.4 개발 생태계의 발전
💡 컴포넌트 베이스 개발(Component Based Development, CBD)
- 재사용할 수 있는 컴포넌트를 개발 또는 조합해서 하나의 애플리케이션을 만드는 개발 방법론.
1.1.5 개발자 협업의 필요성 증가
1.2 자바스크립트의 한계
1.2.1 동적 타입 언어
- 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될때 해당 값의 타입에 따라 변수 타입이 결정된다.
1.2.2 동적 타이핑 시스템의 한계
1.2.3 한계 극복을 위한 해결 방안
- JSDoc
- JSDoc은 모듈, 네임스페이스, 클래스, 메서드, 매개변수 등에 대한 API 문서 생성 도구다. 주석에 @ts-check를 추가하면 타입 및 에러 확인이 가능하며 자바스크립트 소스코드에 타입힌트를 제공하는 HTML 문서를 생성할 수 있다.
- 하지만 어디까지나 주석의 성격을 지니고 있기 때문에 강제성을 부여해 사용하기 어렵다는 단점이 있다.
- propTypes
- propTypes는 리액트에서 컴포넌트 props의 타입을 검사하기 위해 사용하는 속성이다.
- prop에 유효한 값이 전달되었는지 확인할 수 있지만, 전체 애플리케이션의 타입 검사를 하는데는 사용할 수 없다.
- 또한 리액트라는 특정 라이브러리에서만 사용할 수 있다는 점에서 한계가 있다.
- 다트
- 구글이 자바스크립트를 대체하기 위해 제시한 새로운 언어.
1.2.4 타입스크립트의 등장
- 마이크로소프트는 자바스크립트의 슈퍼셋 언어인 타입스크립트를 공개했다.
- 안정성 보장
- 타입스크립트는 정적 타이핑을 제공한다.
- 컴파일 단계를 통해 타입 에러를 줄이고 런타임 에러를 사전에 방지할 수 있어 안정성이 크게 높아진다.
- 타입스크립트는 정적 타이핑을 제공한다.
- 개발 생산성 향상
- VSCode 등의 IDE에서 타입 자동 완성 기능을 제공한다.
- 협업에 유리
- 타입스크립트를 사용하면 복잡한 애플리케이션 개발, 협업에 유리하다.
- 자바스크립트에 점진적으로 적용 가능
- 타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 일괄 전환이 아닌 점진적 도입이 가능하다.
💡 슈퍼셋(Superset)
- 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다.
타입스크립트 인터페이스(interface)
- 타입스크립트 인터페이스는 객체 구조를 정의하는 역할을 한다. 다시 말해 특정 객체가 가져야 하는 속성과 메서드의 집합을 인터페이스로 정의해서 객체가 그 구조를 따르게 한다.