2. 타입스크립트 프로젝트 생성과 관리

02-1. 타입스크립트 프로젝트 만들기

 

0. 개요

• 타입스크립트 개발은 node.js 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행된다.
• node.js 프로젝트는 디렉터리를 하나 만들고, 여기에 package.json이란 이름의 파일을 만드는 것으로 시작한다.
• package.json는 터미널에서 npm init 명령어를 실행해 생성한다.
  • npm init
    • 위의 명령어를 통해 package.json 파일의 내용을 **하나씩 입력 받게 된다. **
    • npm init -y는 기본값을 사용해 자동으로 package.json 파일을 생성한다.
• package.json은 node.js가 관리하는 패키지 관리 파일
  • 프로젝트 정보와 관련 패키지가 기록된다.

 

 

1. 프로젝트 생성자 관점에서 패키지 설치하기

: 프로젝트 구현에 필요한 다양한 오픈소스 패키지를 npm install 또는 간단히 npm i 명령으로 설치할 수 있다.

 

0) 패키지 설치 명령 옵션

npm i 옵션	의미	단축 명령
--save	프로젝트를 생성할 때 필요한 패키지로 설치, dependencies 항목에 등록	-S
--save-dev	프로젝트를 개발할 때만 필요한 패키지로 설치, devDependencies 항목에 등록	-D

: 이전에 설치한, typescript, ts-node 패키지도 -D 옵션으로 설치해 등록하는 것이 좋다.

npm i -D typescript ts-node

 

1) 자바스크립트 컴파일러 vs 타입스크립트 컴파일러

• 자바스크립트 컴파일러는 a => a + 1과 같은 코드를 동작시킬 수 있지만,
• 타입스크립트 컴파일러는 (a:number) : number => a + 1처럼 타입이 명시적으로 설정되어 있어야만, 코드가 문법에 맞게 작성되었는지를 검증해 코드를 동작시킨다.
• 이 때문에, change, ramda와 같은 라이브러리들은 추가로 @types/change, @types/ramda과 같은 타입 라이브러리들을 제공해야 한다.
  • @types/가 앞에 붙는 타입 라이브러리들은 항상 index.d.ts라는 이름의 파일을 가지고 있고, 타입스크립트 컴파일러는 이 파일의 내용을 바탕으로 change, ramda와 같은 라이브러리가 제공하는 함수들을 올바르게 사용했는지 검증한다.

2) @types/node

: Promise와 같은 타입을 사용하려면, @types/node라는 패키지를 설치해야 한다.

npm i -D @types/node

 

 

2. tsconfig.json 파일 만들기

: 타입스크립트 프로젝트는 타입스크립트의 컴파일러의 설정 파일인 tsconfig.json 파일이 있어야 한다.

 

1) tsconfig.json 파일 생성 명령어

tsc --init

: 그러나, 이렇게 만들어진 기본 tsconfig.json 파일을 열어보면, 실제 개발을 진행하는 데 필요한 많은 옵션이 비활성화되어 있다.

보통은 프로젝트에 필요한 옵션만 설정해서 간략하게 한다.

 

 

3. 시작 소스 파일을 index로 짓는 이유

: 소스 파일명이 index이면, 파일명을 생략하고 단순히 ts-node ./src로 실행할 수 있기 때문에, 프로젝트의 시작함수(엔트리 함수)가 있는 소스 파일명은 보통 index로 짓는다.

 

 

4. package.json 수정

: 타입스크립트 프로젝트를 개발할 때는, ts-node를 사용하지만, 막상 개발이 완료되면, 타입스크립트 소스코드를 ES5 자바스크립트 코드로 변환해 node로 실행해야 한다.

 

1) 이를 위해 다음처럼 package.json 파일에서 scripts 항목에 dev와 build 명령을 추가해야 한다.

"scripts" : {
   "dev" : "ts-node src",   
   "build" : "tsc && node dist"
}

• dev : 개발 중에 src 디렉토리에 있는 index.ts 파일을 실행하는 용도로 사용
• build : 개발이 완료된 후 프로그램을 배포하기 위해 dist 디렉토리에 ES5 자바스크립트 파일을 만들 때 사용
• 이 두 가지 명령어는 npm run 명령 형태로 사용한다.

 

 

 

02-2. 모듈 이해하기

 

0. 개요

 

1) 타입스크립트에서는 index.ts와 같은 소스 파일을 모듈(module)이라고 한다.

 

2) 모듈을 만드는 이유 (모듈화 : modulization)

: 보통은 코드 관리와 유지 및 보수를 편리하게 하려고 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할한다

 

3) 모듈화를 진행하면, 어떤 모듈에 어떤 내용이 있는지를 새로 알게 해줘야 한다

• 이를 위해 export, import 라는 키워드를 제공한다.
  • export : 기능을 제공하는 쪽에서 사용
  • import : 다른 모듈의 기능을 이용하는 쪽에서 사용

 

 

1. export 키워드

: 심벌의 의미를 전달하기 위해 사용된다.

• 심벌의 의미란?
  : 코드에서 특정 식별자(변수, 함수, 클래스 등)의 고유한 이름이나 정의를 나타내며, 다른 모듈이나 파일에서 해당 식별자를 사용하거나 참조할 수 있도록 해주는 것
• export 키워드는 interface, class, type, let, const 키워드 앞에도 붙일 수 있다.

 

 

2. import 키워드

: 어떤 파일이 export 키워드로 배노낸 심벌을 받아서 사용하려면, import 키워드로 해당 심벌을 불러와야 한다.

 

1-1) import 키워드를 사용하는 형식

import { 심벌 목록 } from '파일의 상대 경로'

 

1-2) 예시

import { calculateAge, formatDate } from './utils';

const age = calculateAge(birthYear);
const formattedDate = formatDate(new Date());

console.log(나이는 ${age}세입니다.);
console.log(오늘 날짜는 ${formattedDate}입니다.);

 

2-1) import 구문의 또 다른 형태

: as 키워드를 같이 사용한다.

import * as 심벌 from '파일의 상대 경로'

• as 키워드를 통해 심벌을 사용하는 가장 큰 이유
  : 동일한 함수 이름이라도 다른 모듈에서 가져올 때 as 키워드를 사용하여 별칭을 부여하면 충돌 없이 사용할 수 있다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다.

2-2) 예시

import * as utils from './utils';

const age = utils.calculateAge(birthYear);
console.log(나이는 ${age}세입니다.);

 

 

 

3. export default 키워드

: 타입스크립트는 자바스크립트와 호환하기 위해 export default 구문을 제공한다.

 

1) 특징

• 한 모듈이 내보내느 기능 중 오직 한 개에만 붙일 수 있다.
• export default가 붙은 기능은 import문으로 불러올 때 중괄호{} 없이 사용할 수 있다.
• export 등이 있는 파일에서도 사용할 수 있다.

 

 

4. 외부 패키지를 사용할 때 import 구문

 

1) 실습에서 사용된 패키지 예시

 

(1) 설치

• -S : 실행할 때만 사용 (dependencies에 추가)
  • npm i -S chance ramda
• -D : 개발할 때만 사용 (devDependencies에 추가)
  • npm i -D @types/chance @types/ramda

(2) 패키지 설명

• chance 패키지 : 그럴듯한 가짜 데이터 (fake data)를 만들어 주는 데 사용
  • Chance 하나만 export default 형태로 제공한다
• ramda 패키지 : 함수형 유틸리티 패키지
  • 다양한 기능을 제공한다.

2) 패키지 사용 모습

import Chance from 'chance'
import * as R from 'ramda'

: 외부 패키지는 node_modules 디렉터리에 있으므로, 경로에서 ./ 등을 생략한 채 사용한다.

 

 

 

02-3. tsconfig.json 파일 살펴보기

 

0. 개요

 

1) tsconfig.json 파일에 있는 내용

{
"compilerOptions" { ... 생략... },
"include" : ["src/**/*"]
}

• -compilerOptions 항목 : tsc 명령 형식에서 옵션을 나타낸다.
• include 항목 : 대상 파일 목록을 나타낸다.
  • src/**/* : src 디렉터리는 물론 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미

2) tsconfig.json의 작성 규칙

: 키:키값 형태로 작성된다.

• 키 : 설정 항목
• 키값 : 키에 설정하는 값
• 콜론을 기준으로 작성된다.

 

 

1. module 키

 

1) 배경

: typescript 소스코드가 컴파일되어 만들어진 ES5 Javascript 코드는 웹 브라우저와 node.js 양쪽에서 모두 동작해야 한다. 그러나 웹 브라우저와 node.js는 물리적으로 동작하는 방식이 달라서, 여러 개의 파일 (즉 모듈)로 분할된 Javascript 코드 또한 웹 브라우저와 node.js 양쪽에서 각각 다르게 작동된다.

• 각각 Javascript 모듈이 동작되는 방식
  • 웹 브라우저 : AMD(asynchronous module definition) 방식으로 동작
  • node.js처럼 웹 브라우저가 아닌 환경 : CommonJS 방식으로 동작

2) 의미

: 동작 대상 플랫폼이 웹 브라우저인지 node.js인지 구분해 그에 맞는 모듈 방식으로 컴파일하려는 목적으로 설정한다.

 

3) 설정 방식

• 웹 브라우저에서 동작 : amd
• node.js에서 동작 : commonjs

 

 

2. moduleResolution 키

• module 키의 값이 commonjs이면, node.js에서 동작하는 것을 의미하므로 키값은 항상 node로 설정
• 반면에 module 키의 값이 amd이면, 키 값은 항상 classic으로 설정

 

 

3. target 키

: 트랜스파일할 대상 Javascript의 버전을 설정한다.

• 대부분 es5를 키값으로 설정한다.
• 만일, 최선 버전의 node.js를 사용한다면 es6를 설정할 수 있다.

 

 

4. baseUrl과 outDir 키

• 두 키에는 트랜스파일된 ES5 Javascript 파일을 저장하는 디렉터리를 설정한다.
• tsc는 tsconfig.json 파일이 있는 디렉터리에서 실행되므로, 보통 현재 디렉터리를 의미하는 .으로 baseUrl 키값을 설정한다.
• OutDir 키는 baseUrl 설정값을 기준으로 했을 때 하위 디렉터리의 이름이다.
  • 빌드된 결과가 해당 이름의 디렉터리 안에 생성된다.

 

 

5. paths 키

• 소스 파일의 import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정한다.
• import 문이 찾아야 하는 소스가 외부 패키지이면
  • node_modules 디렉터리에서 찾아야 하므로 키값을 node_modules/*로 사용한다.

 

 

6. esModuleInterop 키

 

1) 배경

: 오픈 소스 Javascript 라이브러리 중에는 웹 브라우저에서 동작한다는 가정으로 만들어진 것들이 있다. 이들은 CommonJS 방식으로 동작하는 Typescript 코드에 혼란을 줄 수 있다.

 

2) 설정

: esModuleInterop 키값을 반드시 true로 설정해야 한다.

 

 

7. sourceMap 키

 

: 이 키값이 true이면, 트랜스파일 디렉터리에는 .js 파일 이외에도 .js.map 파일이 만들어진다.

• 소스맵 파일은 변환된 Javascript 코드가 Typescript 코드의 어디에 해당하는지 알려준다.
• 주로 디버깅할 때 사용된다.

 

 

8. downlevelIteration 키

: 생성기 구문이 정상적으로 동작하려면 해당 키의 키값을 반드시 true로 설정해야 한다.

 

 

9. nolmplicitAny 키

: 타입스크립트 컴파일러는 기본적으로 f(a, b)처럼 매개변수 a, b의 타입을 명시하지 않은 코드일 경우 f(a:any, b: any)처럼 암시적으로 any 타입을 설정한 것으로 간주한다. 그러나 이는 Typescript 언어의 장점을 사용하는 것이 아니므로 코드에 문제가 있음을 알려준다. 이는 오류 메세지의 의미가 직관적이지 않기에, 처음 Typescript를 배우는 사람에게 매우 혼잡스럽게 한다.

• 즉, 해당 키의 키값을 false로 설정하면, 타입을 지정하지 않더라도 문제로 인식하지 않게 된다. (편의를 위해 이 값을 사용할 예정)