TS: 프로젝트 초기 설정

[ 대표 이미지 ]

목차

1. 프로젝트에 ts 설치 및 초기화

2. 풀스택 프로젝트 설정하기

3. 테스트 설정하기

---

1. 프로젝트에 ts 설치 및 초기화

학습용 프로젝트 폴더에 타입스크립트를 설치하고 초기화해보자.

 

설치

npm install -D typescript

node_module 폴더가 생성되었다

 

** 그동안 --save-dev(약칭 : -D)의 의미를 잘 몰랐는데 이번에 짚고 넘어가봤다.

이건 설치하는 패키지를 개발(Development) 의존성으로 추가한다는 의미로,

프로젝트를 NPM 라이브러리로 배포할 때 타입스크립트를 포함하지 않는다는 의미이다.

• 개발할 때만 필요한 툴(런타임 시 필요 없음)

+ 최근 npm 버전(6 이상)에서는 위 키워드는 생략 가능한 기본값이라고 한다.

 

 

초기화

npx tsc --init

위와 같이 초기화를 하면 tsconfig.json 파일이 추가로 생성된다.

 

tsconfig.json 파일을 보면 주석이 참 많은데 주석들을 제외하면 아래와 같이 남는다.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

• "target": "es2016"
  프로젝트의 타입스크립트 파일을 ECMAScript 2016 문법으로 컴파일한다.
• "module": "commonjs"
  컴파일된 JS 코드에서 어떤 모듈 시스템을 사용할지 정의하는 옵션으로, "commonjs" 옵션을 사용하면 ECMAScript 모듈 문법을 사용할 수 있다. next.js같은 프레임워크를 사용하면 "commonjs"가 아닌 "esnext"를 사용하게 된다.
• "esModuleInterop": true
  ECMAScript 모듈 외의 임포트된 모듈들의 표준을 일치시킨다.
• "forceConsistentCasingInFileNames": true
  대소문자를 구별하는 파일 시스템 지원 옵션이다.
• "strict": true
  타입 안정성을 강력하게 적용하라는 설정이다. (타입 명시, 타입 추론이 any일 경우 에러, 프로퍼티를 반드시 초기화 등등)
• "skipLibCheck": true
  오류가 없는 형식 정의 파일들을 설치했다고 가정하여, 컴파일러가 형식 정의 파일을 다시 검사하지 않는다. -> 컴파일러 동작 속도가 조금 빨라진다.

 

아래와 같은 설정을 compilerOptions에 추가해보자

"rootDir": "./src",		// src 폴더를 루트 경로로 지정
"outDir": "./dist"		// 컴파일된 파일을 dist 폴더에 저장하도록 지시

 

 

이제 src 폴더에 index.ts를 작성하고 컴파일 하면 dist 폴더에서 컴파일된 파일을 확인할 수 있다.

// src/index.ts
console.log("Hello World!");

 

컴파일

npx tsc

 

// dist/index.ts
"use strict";
console.log("Hello, TypeScript!");

 

 

 

---

2. 풀스택 프로젝트 설정하기

프론트용, 백용 tsconfig 파일을 각각 만들고 composite으로 공유된 의존성을 불러와보자.

Node.js와 브라우저 모두 자바스크립트를 실행하지만, 수행하는 역할이 많이 다르다.

 

브라우저 밖에서 JavaScript를 실행할 수 있도록 만든 환경(runtime)인 Node.js 코드를 예시로 보자.

const http = require('http');

const hostname = '127.0.0.1';
const port = process.env.PORT || 3000;

const server = http.createServer((req, res) => {
	res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World');
});

server.listen(port, hostname, () => {
	console.log(`Server running at http://${hostname}:${port}/`);
});

 

이어서 화면에 웹사이트를 그려주는 환경인 브라우저 코드를 보자.

import {msg} from `./msg.js`;

document.querySelector('button')?.addEventListener("click", () => {
	console.log(msg);
});

 

 

둘다 자바스크립트 코드로 작성되지만 다른 점이 많아, 한 타입스크립트 프로젝트로 지원하기는 어렵다.

따라서 풀스택 애플리케이션 구현을 위해서는 각 스택을 모두 처리하는 두 가지 타입스크립트 설정 파일을 만들어야 한다.

 

백엔드의 구현과 설정은 server라는 새 폴더를 만들어서 작성해볼 수 있다.

서버를 만들기 위한 프레임워크를 설치하고 서버용 tsconfig.json 파일 내용을 확인해보자.

npm install -D express

 

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["ESNext"],
        "module": "commonjs",
        "rootDir": "./",
        "outDir": "../dist/server",
        "moduleResolution": "node",
        "types": ["node"],
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

 

 

 

이때 node를 찾을 수 없다는 에러가 뜰 수 있는데, @types/node를 설치해서 해결해주면 된다

https://ldd6cr-adness.tistory.com/325

@types : JS 외부 라이브러리를 TS 프로젝트에서 사용하기

 

 

server 폴더에 이어서 간단한 index.ts 파일을 작성하고 실행해주면 dist에 실행파일이 생성된 걸 확인할 수 있다.

// server/index.ts
console.log('Server running...');

 

실행

npx tsc -p server/tsconfig.json

 

 

 

프론트와 백의 tsconfig.json을 각각 작성해봤는데, 위에서는 각 폴더에 tsconfig.json이라는 이름으로 파일을 작성했지만,

둘다 루트에 작성하는 대신 이름을 tsconfig.server.json 과 tsconfig.client.json과 같이 바꿔서 저장할 수도 있다.

 

 

혹은 두 설정 파일이 의존성을 공유해야할 수도 있다.

이 때는 client, server 폴더와 같은 위치에 shared 폴더를 생성하고 그 안에 tsconfig.json을 작성해볼 수 있다.

// shared/tsconfig.json

{
	"compilerOptions": {
    	"composite": true,
        "target": "ESNext",
        "module": "ESNext",
        "rootDir": "../shared/",
        "outDir": "../dist/shared",
        "moduleResolution": "Node",
        "types": [],
        "declaration": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    },
}

• "composite": true  =>  다른 프로젝트가 이 프로젝트를 참조할 수 있다
• "declaration": true  =>  다른 프로젝트가 형식 정보를 불러올 수 있도록 코드에서 d.ts 파일을 생성한다.

서버와 클라이언트의 설정 파일은 아래 행을 추가하여 공유된 정보를 가져올 수 있다.

{
	"compilerOptions": {
    // ...
    },
    "references": [
    	{
        	"path": "../shared/tsconfig.json"
        }
    ]
}

 

 

 

 

 

 

 

 

 

 

참고

실무로 통하는 타입스크립트

실무로 통하는 타입스크립트 - 예스24