TypeScript + Express 초간단 세팅

 

 

🏁 목적

 

TypeScrpit 세팅 후 app.ts에서 express로 포트를 열고 간단한 테스트를 랜더하기

 

 

🔥 취지

 

TypeScript와 Express를 아예 처음 써보는 사람들에게 불필요한 예제 코드를 줄인 세팅을 제공하기 위함

 

 

💻 결과

 

 

 

 

🌊 흐름

 

 

🔷 빈 폴더 생성 후 진입

 

 

🔷 터미널에 아래 명령어 타이핑

 

npm init -y

 

package.json을 만들어 프로젝트를 초기 세팅함

 

 

🔷 터미널에 아래 명령어 타이핑

 

npm i typescript express @types/express ts-node nodemon concurrently

 

 

🔸 typescript: TypeScrpit로 구성한 코드를 Javascript로 Transpile 하기 위해 설치

 

🔸 express: Express를 사용하기 위해 설치

 

🔸 @types/express: Express 모듈에 대한 Type을 지원하기 위해 설치

 

// JavaScrpit 방식 express 불러오기
const express = require("express");

// TypeScript 방식 express 불러오기
import * as express from "express";

 

약간 문법이 다른데, 이를 지원하기 위해 사용한다.

 

 

🔸 ts-node: NodeJS에서 TypeScript를 실행시키기 위해 설치

원래 브라우저에서 JavaScrpit 파일을 실행시키려면 아래 명령어로 실행시켜야 했다.

node 내_파일.js

하지만 TypeScrpit는 이렇게 실행시키면 작동하지 않기 때문에 이를 위해 설치하는 모듈이다.

 

 

🔸 nodemon: 특정 파일들이 변할 때마다 뒤에 나오는 명령어들을 node로 재실행시켜주는 기능을 함

 

js 파일 수정 -> node 내_파일.js 하면 생산성이 너무 떨어진다.

 

nodemon을 사용하면 딱 한 번 실행시키면, Ctrl+S로 파일을 저장할 때마다

 

자동으로 node 내_파일.js 를 실행하기 때문에

 

한 번 써보면 없이는 개발 못한다.

 

 

🔸 concurrently: 2개 이상의 npm 명령어를 한 줄에 동시에 실행시키기 위해 설치

 

개발하다 보면 script에 점점 명령어들이 쌓이는데,

 

이 모듈을 쓰면 여러 개의 명령어를 한 줄로 실행시켜주는 nodemon과 같은 생산성 툴이다.

"concurrently \" 실행시키고_싶은_명령어_1 \" \"실행시키고_싶은_명령어_2 \" "

 

🔷 tsconfig.json 생성 후 아래 코드 삽입

 

{
  "compilerOptions": {
    "strict": true,
    "lib": ["es5", "es6"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist"
  },
  "exclude": ["node_modules"],
  "include": ["./**/*.ts"]
}

 

🔸 strict: true로 하면 엄격한 타입 검사를 활성화 (하드모드 on)

 

🔸 lib: 사용 가능한 JavaScript 버전을 결정

 

🔸 target: 어떤 버전의 JavaScript로 Transpile 할지 결정

 

🔸 module: commonjs 방식으로 import, export 하도록 만들어줌

 

🔸 moduleResolution: module을 import 하거나 export 할 때 어떤 방식으로 처리할지 결정

 

🔸 outDir: Transpile 결과 파일들이 어디 위치할지 결정

 

🔸 exclude: 어떤 파일 또는 폴더를 제외하고 Transpile 할지 결정

 

🔸 include: 어떤 파일 또는 폴더를 포함하여 Transpile 할지 결정

./**/*.ts 로 설정하면 '현재 경로의 모든 ts 파일들을 include' 하는 의미

🔷 app.ts 생성 후 아래 코드 삽입

 

import * as express from "express";

const app: express.Application = express();

app.get("/", (req: express.Request, res: express.Response) => {
  res.send("🟢 TypeScript with Express!");
});

app.listen(3000, () => console.log("🟢"));

 

정말 단순하게 express를 import 하고 app을 만들어 3000번 포트를 열어 요청이 오면 텍스트 한 줄을 띄운다.

 

 

🔷 package.json에 아래 코드 삽입

 

  "scripts": {
    "dev": "nodemon --watch \"./**/*.ts\" --exec \"ts-node\" ./app.ts",
    "prod": "concurrently \"tsc \" \"node dist/app.js\""
  },

 

🔸 dev (개발용): 위에서 설명한 nodemon으로 모든 ts 파일의 변화가 있을 때마다 ts-node app.ts 명령어를 실행

 

🔸 prod (배포용): tsc 명령어를 통해 tsconfig.json 파일에서 설정한 옵션에 따라 Transpile 한 뒤, Transpile 된 파일들이 모인 dist 폴더의 app.js 파일을 실행

 

 

🌌 맺음말

 

불필요한 예제 코드와 세팅을 아예 줄이고

 

정말 아예 처음 사용해보는 나 같은 사람들에게 도움이 되고자 작성한 글이다.