본문 바로가기
C++ 200제/코딩 IT 정보

TypeScript 강좌 6. 프로젝트 환경과 명령어 실행

by vicddory 2020. 1. 8.

프로젝트 폴더 공유 후 환경 구축 

팀 내부에선 git 등으로 TypeScript 프로젝트 소스 코드를 공유합니다. JavaScript 계열 프로젝트는 그 안에 package.json, package-lock.json이 있습니다. 타입스크립트 프로젝트 배포 시 환경 구축을 하는 등 공유한 사람은 개발 환경을 손쉽게 재현할 수 있습니다.


 npm install

 dependencies와 devDependencies를 설치

 npm install --prod

 dependencies만 설치

 npm ci

 dependencies와 devDependencies를 설치

 package-lock.json은 갱신하지 않음

 npm ci --prod

 dependencies만 설치

 package-lock.json은 갱신하지 않음

설치한 명령어 실행 

npm 명령으로 설치한 패키지는 프로그램에서 사용할 라이브러리 이외에 실행 명령어를 포함합니다. 방금 설치한 typescript와 ts-node는 모두 이를 포함합니다. 명령은 node_modules/.bin 아래에 설치되어 있습니다. 이 타입스크립트 명령어들은 직접, 상대 경로로 지정해도 좋지만 전용 명령도 있습니다.


ts-node를 부담 없이 실행해 볼 수 있는 REPL(1행마다 실행되는 인터프리터)를 이용하면 됩니다.


$ npx ts-node

> console.log('hello world')

hello world


package.json의 scripts 섹션에 등록하면 npm 명령어를 실행할 수 있습니다.


"scripts": {

  "start": "ts-node"

}


"scripts"에는 객체를 쓰고 그 안에 명령어(커맨드)를 정의합니다. 여기선 start 명령을 정의했습니다. 명령이 실행되었을 때 실행되는 코드를 쓰는 것입니다. 여기선 node_modules/.bin 이하 경로를 설정하지 않고 쓸 수 있습니다. npm run [커맨드 이름]라고 쉘에서 실행하면 이 scripts 섹션의 명령이 실행됩니다.


$ npm run start

> console.log('hello world')

hello world


대체로 다음과 같은 (타입스크립트 프로젝트) 명령을 정의하는 경우가 많습니다.


  • start/serve: 패키지가 웹 응용 프로그램을 포함하는 경우 이를 구동
  • test: 테스트 실행
  • lint: 코드 품질 검사
  • build: 빌드가 필요한 라이브러리를 빌드하고 배포할 수 있도록 돕는 처리


빌드 등은 프로젝트에 따라 천차만별인데, 이 scripts 섹션을 읽으면 어떻게 소스 코드를 처리하는지, 테스트하는지 알 수 있습니다. 프로젝트 코드를 읽을 수 있는 강력한 무기입니다.


또한, 이 명령 실행까지 Windows, Linux, macOS 상관없이 포터블하게 작동합니다. Node.js와 npm 명령만 있으면 개발 도구 및 환경(Windows, macOS), CI 서버(Linux), 운영 환경(Linux) 가리지 않고 작동합니다.


TypeScript 환경 설정

TypeScript를 사용하려면 몇 가지 설정이 필요합니다. JavaScript 계열 툴의 빌드에는 크게 두 가지 단계가 있습니다.


  • 컴파일 : TypeScript, 최신 JavaScript 문법으로 작성된 코드를 실행 환경에 맞춘 JavaScript로 변환
  • 번들 : 소스 코드는 일반적으로 클래스마다 각 구성 요소 단위로 나누어 작성합니다. 배포 시에는 한 파일에 정리하여 다운로드 속도를 높이고, 불필요한 코드 제거가 이루어집니다.


이 시리즈에선 TypeScript와 Babel을 사용합니다. 추가 webpack, Browserify, Rollup, Parcel 등이 있습니다만, 대규모 응용 프로그램에서나 필요하므로 5장부터 소개합니다.


아무것도 설정하지 않아도 TypeScript 컴파일은 가능하지만, 입력, 출력 폴더와 형식을 설정하려면 기본적으로 비활성화된 기능(타입스크립트 tsconfig.json에 없는 내용)들을 설정 파일 tsconfig.json에 작성합니다.


$ npx tsc --init

message TS6071: Successfully created a tsconfig.json file.


JSON 파일을 편집하면 컴파일러의 동작을 조정할 수 있습니다.



에디터 환경

현재 가장 손쉽게 설정하여 사용할 수 있고, 가장 정확한 보완 및 코드 체크가 자동으로 이루어지는 것이 Visual Studio Code(vss)입니다. Windows 사용자, Linux 사용자, macOS 사용자까지 이용할 수 있고, 추가 확장 프로그램을 설치하지 않아도 됩니다.


프로젝트별 공통 설정도 .vscode 폴더의 설정 저장 경로에 넣어 쉽게 공유할 수 있습니다. 자세한 타입스크립트 고급 설정과 툴 활용에 대해선 환경 구축 장에서 소개합니다.

ts-node를 사용한 TypeScript 코드 실행

그럼, 간단한 코드를 작성하고 실행해 보죠. 원래 이 코드는 JavaScript와 완벽하게 호환되지만(다음 장에서 설명합니다), 굳이 형식을 정의하여 일반 Node.js에선 오류가 됩니다.


첫 번째 샘플 코드 (first.ts)


const personName: string = '초보자';


console.log(`Hello ${personName}!`);


실행하려면 npx 통해 ts-node 명령을 실행합니다.


$ npx ts-node first.ts

Hello 초보자!


향후 타입스크립트 튜토리얼에서는 기본적으로 이 스타일로 실행합니다.




-- 미완성 문서입니다.

댓글