CH 1,2(타입스크립트 소개 / 개발 환경 구축)

CH1 타입스크립트 소개

• 2009년 브라우저에서 가장 안정적으로 동작하는 표준인 ES5가 나옴
• 이러한 ES5 표준을 기반으로 한 Node.js플랫폼 등장
  • 이를 통해 자바스크립트가 단지 브라우저만을 위한 언어가 아닌 서버 프로그래밍이 가능한 언어로서 영역을 확장
• ES6(ES2015)가 나오면서 Node.js가 채택해 사용하는 CommonJS 방식과 AMD(Asynchronous Module Definition) 방식의 근간이 되는 모듈 시스템이 추가되었다.
• AMD 방식처럼 모듈 로더에 의해 런타임 시에 모듈을 비동기로 호출할 수도 있게 되었다.
• 이 외에도 화살표 함수, 클래스, 개선된 객체 리터럴, 템플릿 문자열, 심볼(symbol), 프로미스(promise), 제너레이터, for of, 디스트럭처링, 프락시(proxy), 유니코드, let, const, yield 등과 같은 특징이 추가 되었다.

1.2.1. 타입스크립트의 특징

• 정적 타입 언어(static type language)는 컴파일 타임(compile time)에 타입을 검사하는 데 시간이 들지만 안전성을 보장한다.

• 타입스크립트는 대규모 어플리케이션 개발을 하는데 결점을 보완함.

  • 대규모 어플리케이션을 개발할 때 필요한 조건
  • * 모듈화 기능을 통해 모듈 간의 결합도(coupling)를 줄일 수 있어야 한다. // * 객체지향 프로그래밍을 지원해 코드의 중복과 복잡도를 낮출 수 있어야 한다. * 코드 규모가 커지더라도 구조화를 갖춰 개발할 수 있어야 한다.
  • 위와 같은 조건에 대해 타입스크립트가 지원하는 기능은 아래와 같다.
  • * 모듈 시스템 - ES6 모듈과 네임스페이스 지원 * 클래스와 인터페이스 지원 * 타입 시스템 지원

• 타입스크립트의 모듈 시스템은 크게 ES6 모듈과 네임스페이스로 나뉜다.

  • ES6 모듈은 기존 ES5에서 어려웠던 모듈 분할과 결합 기능을 향상시킴
  • 네임스페이스는 ES6에 없는 타입스크립트에 추가된 특징으로, 분리된 이름 공간을 제공해 복잡도를 낮춘다.
  • 네임스페이스가 지원되기 전 자바스크립트에서는 네임스페이스 패턴을 이용해 분리된 이름 영역을 관리해야하는 불편함이 있었다.

• 모듈 시스템

  • 네임스페이스는 라이브러리 단위의 모듈 구성에 유리하며 규모 있는 모듈 구성에 필요한 특징이다.
  • 전역 이름 공간(global namespace)과 구분된 별도의 이름 영역을 가지므로 전역 이름 공간의 오염을 막는다.
    <그림 참조>
    • 네임스페이스에는 인터페이스를 비롯해 클래스나 함수 등의 모듈을 선언할 수 있다.
    • 각각의 네임스페이스는 이름 영역이 다르므로 같은 이름의 모듈을 각각의 네임스페이스에 선언할 수 있다.
  • 클래스와 인터페이스 지원
    • 타입스크립트에는 ES6에 없는 인터페이스 선언과 인터페이스 구현을 지원한다.
    • 자바는 다중 생성자를 선언할 수 있지만, 타입스크립트는 단일 생성자만 선언할 수 있다.
    • 타입스크립트는 자바와 달리 디폴트 초기화 매개변수와 선택 매개변수를 선언할 수 있다.
  • 타입 시스템 지원
    • 타입 어노테이션을 이용해 변수에 타입을 선언할 수 있다.
    • 타입 지정을 통해 타입 안전성을 확보할 수 있다.
    • 변수나 함수의 매개변수 등에 선언한 타입 어노테이션은 컴파일할 때 타입 검사를 위한 목적으로 사용
    • 타입 검사를 통해 타입 안전성이 확보되면 타입스크립트 컴파일러가 타입 어노테이션을 제거하고 최종적으로 자바스크립트 코드를 생성한다.
    • tsc 명령어를 이용해 타입스크립트 컴파일러를 실행.
    • if 문은 성능에 영향을 미치는데, if문을 이용한 타입 검사가 많아질수록 런타임 오버헤드가 발생할 수 있다.
    • 타입을 추가하여 런타임에 불필요한 타입 검사를 하지 않아도 되, 코드양을 줄일 수 있고 성능 저하도 줄일 수 있다.

  1.2.3. 타입스크립트의 역사

  • 타입스크립트 1.x에서 2.x로 버전이 업데이트 되면서 서드파티 라이브러리의 타입 정의 파일을 도입하는 과정이 바뀌었다.
  • 타입스크립트 정의 파일은 자바스크립트가 타입스크립트의 모둘로 사용될 때 자바스크립트에 타입을 추가하는 역할을 한다.
  • 이 파일의 확장자는 .d.ts이다.
  • 2.5버젼에서는 함수 추출, 메스드 리팩터링, 퀵 픽스 기능이 추가되었다.
    • 함수 추출
    • 메서드 리팩터링
    • 퀵 픽스
  • 2.7 버젼에서는 컴파일러의 타입 검사 기능이 향상 되어 "엄격한 클래스 초기화(Strict Class Initialization)"와 "고정 길이 튜플(Fixed Legnth Tpules)" 과 같은 기능들이 추가되었다.

1.2.4. 타입스크립트의 아키텍처

컴파일러

• 타입스크립트의 아키텍처는 언어 변환 기능을 수행하는 코어 타입스크립트 컴파일러(core typescript compiler)를 기반으로 한다.
• 코어 타입스크립트 컴파일러는 파서, 바인더, 타입 체커, 에미터, 전처리기로 구성되어 있다.
  • 파서: 읽어 들인 소스코드를 해석해 "구문 트리"를 만들고, 구문 트리를 다시 해석해 "추상 구문 트리(AST: Abstract Syntax Tree)"를 생성한다. 이때 추상 구문 트리는 구문 분석으로 생성된 파스 트리(Parse Tree)에서 불필요한 중복 내용을 제거한 트리이다.
  • 바인더: 인터페이스나, 모듈, 혹은 함수와 같은 모듈에 선언이 있을 때 이러한 선언을 심벌(symbol)로 보고 심벌 간의 규칙을 정의한다. 타입 시스템은 바인더를 통해 명명된 선언을 추론할 수 있게 된다.
  • 타입체커: 타입이 선언된 구문을 분석하고 타입이 적절한지 체크한다.
  • 에미터: 입력된 *.ts 같은 타입스크립트 파일을 *.js, *.d.ts, *.js.map 유형의 파일로 생성하는 기능을 수행한다.
  • 전처리기(pre-processor): 타입언어 서비스
• 코드를 컴파일해 도움말이나 포맷팅, 코드 색상 지정 같은 폅집기에 필요한 기능을 제공
• 폅집기에서 코드 어시스트를 제공하는 근간
• 독립 서버
• 컴파일러와 언어 서비스 같은 하위 레이어를 래핑해 JSON 형식을 통해 외부에 정보를 노출할 수 있게 합니다.
• "tsserver"라고도 하며 IDE나 편집기 개발에 필요한 기능을 명령어 형식으로 제공
• tsserver는 편집기 플러그인을 개발할 때 사용할 수 있다.
• 편집기
• 독립 서버를 비롯해 하위 레이어의 요소를 모두 고려해 동작하는 최종 응용 단계의 애플리케이션
• vscode에서는 타입스크립트 코드에 구문 오류나 타입 오류가 있는지 실시간으로 파악할 수 있도록 코드 어시스트를 지원한다.

1.2.5. 타입스크립트 컴파일러

• 컴파일링: 한 언어의 소스코드를 다른 언어로 바꾸는 것
• 트랜스파일링: 한 언어의 소스코드를 비슷한 추상화 수준의 다른 언어로 바꾸는 것
• 바벨(babel): 자바스크립트 컴파일러로, 자바스크립트의 상위 표준을 하위 표준으로 변환할 수 있다.

cf)

• 기존 자바스크립트로 작성된 프로젝트라도 손쉽게 파입스크립트 정의 파일(*.d.ts)을 이용해 자바스크립트 라이브러리를 타입스크립트에서 지원할 수 있게 되었다.
• 타입스크립트는 현재 1,600개 이상의 d.ts 기반 정의 파일이 존재한다. 타입 정의 파일(typescript type definition file)을 통해 타입스크립트에서도 다른 서드파티 라이브러리들을 사용할 수 있도록 지원한다.
• 일렉트론
  • 데스크톱용 GUI 애플리케이션을 개발할 수 있는 오픈소스 프레임워크
  • Node.js 런타임 환경에서 동작하며, 사용자에게 보여지는 프론트엔드 부분에는 크로미움(chromium)을 이용한다.
  • 일렉트론으로 만들어진 대표적 데스크탑 어플리케이션으로는 vscode, githube desktop이 있다.

CH2 개발 환경 구축

• package.json
  • description: 패키지 검색(npm search) 명령어로 패키지를 찾았을 때 표시될 패키지의 설명(description)에 해당
  • entry point: require 함수로 호출될 모듈의 자바스크립트 파일 이름을 입력한다. 만약 entry point를 생략하면 index.js를 기본 이름으로 사용한다.
  • keywords: 패키지를 배포한 뒤 패키지 검색이 잘 되도록 관련 키워드를 한 개 이상 입력한다.
  • package.json을 기본 설정값으로 하려면 npm init --yes 명령어를 실행한다.
• npm의 중요 명령어
  • npm install 패키지명 --save: 프로젝트에 package.json이 존재하는 경우 dependencies에 해당 패키지를 추가(애플리케이션 실행용)
  • npm install 패키지명 --save-dev: 프로젝트에 package.json이 존재하는 경우 devDependencies에 해당 패키지를 추가(애플리케이션 개발용)
  • npm outdated -g: 전역에 설치된 패키지 중 버전이 만료된 모든 패키지 확인
  • npm outdated -g 패키지명: 전역에 설치된 패키지 중 특정 패키지의 만료 여부 확인
• typescript 설치
  • npm i -g typescript: 이 명령어로 typescript를 설치할 경우 타입스크립트의 안정 버전(stable version)이 설치된다.
  • 최신 버전을 유지하는 것이 좋은데, outdated 옵션을 통해 설치된 패키지가 최신 버전인지를 확인할 수 있다.(npm outdated -g typescript)
• typescript 사용
  • tsc 명령어를 실행할 때, tsconfig.json이 없는 경우, 에러가 발생한다.
  • 어떠한 이유로 tsconfig.json 파일의 이름을 변경했을 경우, 그 이름을 직접 지정해줘야 한다.
    • tsc -p ../tsconfig2.json
    • -p 옵션은 지정한 경로를 프로젝트 루트 디렉토리로 설정하는 옵션 / 명시적으로 현재 디렉토리를 루트 디렉토리로 삼아 컴파일할 경우 -p(--project) 옵션에 경로명을 추가해 컴파일하면 된다.
  • tsconfig.json 파일은 타입스크립트 프로젝트를 컴파일할 때 필요한 컴파일 설정 정보를 담고 있다.
  • 이 파일의 목적은 타입스크립트를 컴파일할 때 필요한 설정을 관리하기 위해서이다.
  • tsc 명령어가 실행되면 tsconfig.json 파일의 설정을 읽어들여 컴파일을 하기에, 일일히 옵션을 넣을 필요가 없게 된다.
  • 현재 디렉토리에 tsconfig.json 파일이 없다면 상위 디렉토리로 이동하면서 찾는다.
  • 중요한 점은 tsconfig.json 파일이 위치한 경로가 타입스크립트 프로젝트 루트 경로가 된다는 것이다.
  • tsconfig.json 파일 내 옵션
    • sourceMap: 컴파일 후 맵(map) 파일의 생성 여부를 결정한다. true이면 컴파일 시 컴파일 파일과 함께 맵 파일을 함께 생성하고, false이면 맵 파일을 생성하지 않는다. 맵 파일은 컴파일 과정에서 타입스크립트 파일과 자바스크립트 파일 간의 연결 정보를 담고 있다. 이러한 맵 파일은 타입스크립트를 지원하는 개발 도구의 디버거나 크롬 브라우저에서 이용할 수 있는데, 자바스크립트 실행 도중 오류가 발생하면 js 파일 대신 ts를 이용해 디버깅할 수 있다. 맵 파일은 개발 과정에서 디버깅할 때는 유용하지만, 파이을 생성하기 때문에 애플리케이션을 배포할 때는 사용하지 않으므로 맵 파일을 사용할 이유가 없다면 설정값을 false로 둔다.
    • strict: true이면 엄격 타입 검사 모드를 활성화 한다.
    • noImplicitAny: any 타입으로 암묵적 형변환 여부를 결정한다. 해당 속성이 생략되면 기본값은 false이다. false일 경우 타입을 지정하지 않은 변수는 자동으로 any 타입으로 추가한다.
    • esModuleInterop: ECMA스크립트 모듈과 상호 운용성을 가능하게 하는 속성으로 true면 CommonJS 모듈을 디폴트 모듈처럼 호출할 수 있다.
    • removeComments: true 값으로 지정되 있을 경우, 주석은 모두 삭제된 채로 출려된다.
  • tsc 명령어를 이용해 프로젝트 내 특정 파일만 컴파일해 결과를 생성하고 싶을 경우, tsconfig.json 내 files 속성을 지정하면 된다. files 속성에 컴파일할 파일 목록을 입력하여 일일히 컴파일할 파일명을 열거하지 않아도 된다.