본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Node.js

Typescript 환경 구성을 통한 Express 사용(Node.js express Typescript)

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2020. 5. 6.

타입스크립트 기반에 Node.js의 express 모듈을 사용하는 개발환경을 구성하여 보았습니다.

타입스크립트가 아무래도 자바스크립트에서 자주하는 실수인 데이터형과 관련된 문제를 사전에 방지하여 주기 때문에 괜찮은 시도였다고 생각합니다.

 

물론 해당 환경을 구성하면 Node.js에서의 코딩을 자바스크립트가 아니라 타입스크립트 방식으로 할 수 있습니다!

가장먼저 타입스크립트 모듈을 설치하여줍니다.

타입스크립트는 왠만한 곳에서 자주 사용되므로 글로벌하게 설치하여준 다음에 프로젝트에 포함시켰습니다.

 

1. 타입스크립트를 설치합니다.

npm install -g typescript

npm i -D typescript

 

2. tsc --init 명령어를 통해 기본 타입스크립트 환경설정 파일을 만들어 주었습니다.

tsc --init

 

해당 파일을 만들게 되면 컴파일과 관련된 많은 옵션이 존재하는데 아래내용으로 교체하도록 합니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

 

위 옵션에서의 주요 이해해야될 부분은 3가지 입니다.

 1) 컴파일 옵션에서 es6 문법으로 바꾸는 부분 입니다.

 2) outDir를 배포할 디렉토리로 바꾸는 부분입니다. 타입스크립트로 작성된 파일을 js로 바꿀 부분입니다.

 3) include를 통해 타입스크립트가 존재하는 디렉토리를 알려줍니다.

 

3. express 모듈을 설치합니다.

npm i -S express

 

여기까지 하였다면 기본환경 세팅은 끝났습니다.

타입스크립트는 확장자가 ts로 끝나는 언어이므로 node에서 바로 실행 할 수 없습니다.

컴파일을 한 이후에 실행을 하여야 하므로 package.json에 시작명령을 등록하여줍니다.

* 그렇지 않으면 번거롭게 컴파일하는 명령어 따로, 실행하는 명령어를 따로 입력해 주어야 합니다.

{
  "name": "node_with_typescript",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "gogo": "tsc && node dist"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "typescript": "^3.8.3"
  }
}

 

위 내용까지 하였다면 기본 환경구성은 끝났습니다.

src 디렉토리가 타입스크립트가 존재할 디렉토리이므로 기본 메인으로 사용할 index.ts 파일을 만들어줍니다.

만약 처음 실행할 파일명을 다르게 주고 싶다면 gogo 부분의 내용에서 node 뒤의 내용에 실행할 파일명을 써주도록 합니다.     예) tsc && node dist/실행할파일.js

 

위 내용을 토대로 2개의 타입스크립트 파일을 만들어 테스트를 해 보았습니다.

아래 index.ts는 가장 먼저 실행 할 타입스크립트입니다.

import {MainClass} from './main'

const newMan = new MainClass();
newMan.runner();

 

다음의 main.ts는 실제 동작을 위해 사용하는 클래스파일 입니다.

import * as express from 'express'

export class MainClass{

    private name : String = "Ok";
    private express : any;

    constructor(){
        this.express = express();
        this.express.listen(3000, () => {
            console.log('listening start!', this.name);
        });        
    }

    runner() : void{
        this.express.get('/', (req: express.Request, res: express.Response) => {
            res.send('Hello');
        });  
    }
}

 

작업을 한뒤에 서버를 구동하려면 아래 명령어를 입력합니다.

서버가 잘 작동합니다.

 

실제 배포를 하는경우에 반드시 src에 있는 파일이 아니라 dist에 있는 파일을 배포하여야 합니다.

index.js와 main.js 파일로 컴파일 된 파일을 배포하여야 합니다.

컴파일된 파일의 모습입니다.

 

이상으로 타입스크립트 기반의 Node.js express 개발환경 구성 및 사용법에 대해서 살펴보았습니다.

조금 더 상세한 내용을 구글링하여 검색하면 확인 할 수 있습니다! ^^

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글