[Express] Nodejs + Express + Typescript 환경 세팅

Nomad 코더 무료강의로 Nestjs를 한번 쭉 진행해봤다.

Nestjs는 빠르게 서버를 구성할 수 있고 편리하게 제공되는 여러가지 기능이 있어서 분명 좋은 프래임워크인 것 같았다. 하지만 빠르게 구축 해보려다가 백엔드의 지식이 좀 많이 없는 것 같고 레퍼런스도 적어서 Express로 다시 시작해보려고 한다.

이전에 한번 tutorial을 진행해보았으나, 잘 기억도 안나고 typescript 환경까지 추가해서 해보려고 한다.

 

Node.js란?

유투브, 강의, 블로그 글 등 Express를 들어가기전에 항상 Node.js의 개념부터 시작한다. 뭐 대충 Node.js가 다른 애플리케이션들을 실행할 수 있게 해주는 녀석이다 정도로는 알고 있지만, 저 말은 아직 확 와닿지는 않는다.

 

공식문서에 따르면

Node.js는 Chrome V8 Javascript 엔진으로 빌드 된 Javascript 런타임 이다.

• Javascript를 서버에서도 사용할 수 있도록 만든 프로그램이다.
• Javascript V8 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다.
• 서버사이드 스크립트 언어가 아닌 프로그램(환경)이다.
• 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다.

내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 동작하는 것이 가능하며, 이를 통한 웹 서버의 동작에 있어 더 많은 통제에서 벗어나 여러가지 기능을 가능하게 한다.

 

대충 서버를 만들 수 있게 해주는 환경 정도로 생각하자. 자세한 내용은 아래 잘 정리되어있는 블로그로 확인!

[Node.js란?]

Node.js 노드 개념 이해하기 자바스크립트 JavaScript 런타임 이벤트

 

 

Express란?

자 그럼 Express가 뭘까?

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크

프레임워크인가 보다. 다음!@

 

...

 

Node.js를 이용하여 서버를 구축하려면 HTTP통신을 해야하고, HTTP 통신 방법에는 여러가지가 있고, 패킷에 정보를 실어보내야하고...

그냥 쉽게 말해서 그냥 깡통 컴퓨터에 서버를 구축하려면 고려해야할 사항이 상당히 많다. 이론적으로는 구글링해서 찾아보기로 하고 그래서 Express가 뭔데?

 

Express는 Node.js를 사용하여 서버를 개발하고자 하는 개발자들을 위해서 서버를 쉽게 구성할 수 있게 만든 프레임워크다.

Nestjs보단 좀 더 베이직하지만 이녀석도 서버를 구성하기위해 좀 더 쉽게 해주는 녀석인거다.

 

Express & Typescript 설치

Node.js가 설치되어있다는 가정하에 진행하겠다.(본인은 현재기준 LTS 버전인 16.17.1을 사용)

 

서버를 세팅할 폴더를 만들고 vscode를 열자.

> mkdir express_tutorial
> cd express_tutorial
> code .

 

패키지 매니저는 yarn을 사용하겠다.

> yarn add express
> yarn add -D typescript ts-node @types/node @types/express tsc-watch

• express는 일반 종속성에 설치
• typescript관련 패키지들은 개발 종속성에 설치
• ts-node : Node.js에서 Typescript Compiler를 통하지 않고도, 직접 Typescript를 실행시키는 역할
• tsc-watch : 서버 코드를 변경할때마다(저장할때마다) 실시간으로 컴파일하여 서버에 반영해주는 역할

package.json에 아래 코드 추가

{
  ...
  
   "scripts": {
    "start": "node dist/app.js", 
    "build": "tsc -p .", 
    "dev": "tsc-watch --onSuccess \"ts-node dist/app.ts\"
  },
  
  ...
}

Typescript config 설정

> yarn tsc --init

{
  "compilerOptions": {
  	"target": "es2016", // 어떤 버전으로 컴파일할지 작성
    "module": "commonjs", // 어떤 버전으로 컴파일할지 작성
    "outDir": "./dist", //컴파일 후 js 파일들이 생성되는 곳
    "rootDir": ".", //루트 폴더
    "strict": true, // Enable all strict type-checking options.
    "moduleResolution": "node", //모듈 해석 방법 설정: 'node' (Node.js)
    "esModuleInterop": true, // true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됨
    "jsx": "react"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

 

Express 코드 작성

src/app.ts

import express, { NextFunction, Request, Response } from "express";

const app = express();

app.get("/", (req: Request, res: Response, next: NextFunction) => {
  res.send("welcome!");
});

app.listen("4000", () => {
  console.log(`
  ################################################
  🛡️  Server listening on port: 4000🛡️
  ################################################
  `);
});

 

app.listen의 포트로 접속하면 함수안의 코드를 실행하고, app.get()을 통해서 url로 접속하면 해당 함수안의 코드를 실행한다.

 

서버 실행

> yarn dev