node.js Express + Typescript + webpack 적용하기

안녕하십니까 철철입니다.

제가 이번에 이직을 하게 되면서 nodeJS를 사용해보게 됬으며 기존에 Angular를 접하면서 경험해본 typescript를 접목해보기 위해 삽질을 한 경험을 작성해보려 합니다.

 

제가 지금까지는 백엔드 개발을 Java - Spring Boot를 주로 사용해봤는데 이번에 nodeJS를 사용하게 되어 많이 미숙한데 아직 저는 풋내기 주니어 개발자이라는 명목으로 많이 삽질도 해보고 하다보면 언젠가는 숙련도가 쌓일것이라고 믿습니다!

 

많이 미숙하기도 하고 참고도 많이 하였으니 부족한 부분이 있다면 너그럽게 봐주세요...

 

일단 제 개발 환경은

OS: window10 pro

Editor: VS Code

Terminal: power Shell

정도입니다.

 

그리고 nodeJS를 개발하실때 중요한 부분이 있습니다. 바로 사용자 계정 이름이 띄어쓰기나 한글이 들어가면 안됩니다!

이거 수정하려면 레지스트리랑 고치고 해야해요...

 

그리고 저는 nodeJS를 NVM을 이용하기 위해 NVM을 설치했습니다. 그리고 홈페이지에서 받기 보다는 scoop를 이용하여 받았습니다. scoop는 mac의 homebrew나 linux의 yum, apt-get같은 패키지 매니저 입니다.

 

2018/11/19 - [기타/기타 글들] - window 에서 패키지 관리자 scoop

scoop search nvm
scoop install nvm
nvm list available 
nvm install version // you want ex) nvm install 8.16.0
nvm use version

 이정도로 node js는 설치했고 그 다음은 VS Code를 세팅해야 합니다.

VS Code는 extension이라고 해서 필요한 모듈(?) 같은걸 설치할 수 있습니다.

 

저는 이 두가지 정도 받은거 같아요.

 

그리고 power shell을 열어서 프로젝트를 생성해보겠습니다.

express도 현재는 express-cli를 제공 하는것 같습니다. (express를 개발하기 위해 기본적인 세팅을 해주는 generator)

 

하지만 typescript를 위한 cli는 아니고 javascript용이라 저는 사용할 수 없었습니다.

그래서 프로젝트를 직접 생성했습니다

cd d:\ 
mkdir myapp
cd myapp

# make pakage.json
npm init -y

# make tsconfig.json
tsc --init

 

그리고 express-typescript를 개발하기 위해 필요한 모듈들을 설치 해줍니다.

npm install -g npx 
npm install --save-dev @types/express typescript @types/typescript @types/node npx yarn webpack
npm install --save express

tsconfig.son을 다음과 같이 설정해줬습니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "dist",
    "strictNullChecks": true,
    "sourceMap": true,
    "typeRoots": ["node_modules/@types"],
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

그리고 같은 디렉터리에 webpack.config.js를 생성해서 다음과 같이 입력했습니다.

 

const path = require("path");
const { NODE_ENV = "production" } = process.env;

module.exports = {
  entry: "./src/index.ts",
  mode: NODE_ENV,
  target: "node",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  //   externals: [nodeExternals()],
  devtool: "source-map"
};

 

그리고 webpack.config.js를 보면 entry가 있으며 src/index.ts가 있지 않습니까?

저기서부터 웹팩이 파일을 읽기 시작한다는 의미 입니다.

그럼 생성해주시고

mkdir src 
touch index.ts

 기본적인 test로 다음과 같이 입력해줍니다.

import * as express from "express"; // 1
const app = express();

app.get("/", (req: express.Request, res: express.Response) => {
  // 2
  res.send("Hello World!");
});

app.listen(3000, () => {
  console.log("Example app listening on port 3000!");
});

 

시작하기에 앞서 pakage.json에 다음과 같이 설정을 해줘야 합니다. 실행 script를 작성해주는 일이죠.

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --watch src --delay 1 --exec ts-node src/index.ts",
    "lint": "tslint -p .",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4",
    "nodemon": "^1.19.0",
    "ts-node": "^8.1.0",
    "webpack": "^4.30.0"
  },
  "devDependencies": {
    "@types/express": "^4.16.1",
    "@types/node": "^12.0.0",
    "ts-loader": "^6.0.0",
    "tslint": "^5.16.0",
    "tslint-config-standard": "^8.0.1",
    "typescript": "^3.4.5",
    "webpack-cli": "^3.3.2",
    "webpack-node-externals": "^1.7.2"
  }
}

그리고 이제 npm start를 이용해서 테스트를 하면 끝!

 

많이 미숙해서 오래걸렸는데 제 깃허브에 올렸으니 필요하신 분들을 받아가세요!

 

https://github.com/zlcjfalsvk/express-typescript-webpack

zlcjfalsvk/express-typescript-webpack

 

Angular는 Angular Cli가 있어서 바로 세팅이 가능해서 express도 쉽게 세팅할 수 있었다고 믿었으나,

Angular는 기본적으로 typescript를 이용하기 때문에 세팅이 쉬웠고

 

Express같은 경우는 Javascript를 이용하기 때문에 아직은 typescript cli까지는 나오지 않은거 같고 다른 유저들이 cli처럼 만들어 놓은 모듈들은 제법 있습니다.

 

리액트도 typescript generator같은게 있는걸로 알고있는데 express도 공식적인 typescript generator 같은게 나왔으면 좋겠네요.

 

 

 

참고 

what is @types

https://blog.angular-university.io/typescript-2-type-system-how-do-type-definitions-work-in-npm-when-to-use-types-and-why-what-are-compiler-opt-in-types/

 

typescript + express

https://novemberde.github.io/node/2017/10/22/Express-Typescript.html

https://gongzza.github.io/javascript/nodejs/typescript-express-starter-1

https://gyuha.tistory.com/516

 

generator express-no-stress-typescript

https://www.npmjs.com/package/generator-express-no-stress-typescript