Typescript로 Node+Express API 서버 개발환경 세팅

 

 

🙌🏾 Node JS와 Typescript의 등장이 가지는 의미

---

자바스크립트는 웹브라우저에서 HTML문서를 동적으로 컨트롤 하기 위해 만들어졌다.

 

근본부터가 프론트엔드인 이 언어는 브라우저들의 춘추전국시대를 거쳐면서

     🤱 👩‍🍼 🧑‍🍼 👨‍🍼 -> 🤴 (IE.... MS.... ㅂㄷㅂㄷ)

여러 개성이 강한 자식들로 분화되었다가 자바스크립트족 대통합 운동으로 표준화되어 지금에 이르렀다.

 

 

Node JS가 나오면서는 자신의 근본인 브라우저 태생 족보📗를 찢어버리고 백엔드의 영역까지 침범하기 이르렀다.

 

 

심지어 보통의 웹사이트에 필요한 데이터 CRUD 기능을 만들때는 다른 백엔드 태생 언어들의 장점을 뛰어넘기도 하는 청출어람을 보여준다. 물론 요즘 핫한 머신러닝광의 연계나 그래픽 요소가 많은 작업, 실시간성 대규모 트레픽 데이터 처리 등에는 역시 자신의 한계가 드러난다. 앞서 언급했듯이 노멀한 웹사이트의 백엔드 구축에는 Node JS와 Express 프레임워크(Java + Spring 같은 조합)이 꽤 괜찮은 방안이 되어 버렸다.

 

 

IE(그 이름하여 Internet Explorer)로 개발자들을 개고생 시킨 것이 미안했는지 Microsoft가 관리하고 있는 오픈소스 Typescript의 등장도 NodeJS를 백엔드 서버로 이용하는데 꽤 의미가 있다.

 

Typescript의 자세한 내용은 아래서 확인해보고 백엔드에서의 등장 의미만 집어보면.

JavaScript With Syntax For Types.

 

 

 

자바스크립트에서 prototype으로 흉내내던 객체지향 프로그래밍이 Typescript에서 더 견고해졌다.

 

이것은 내가 많이 하다 버리는 토이프로젝트 따위의 개발이 아니라 실제 수많은 고객들에게 서비스하는 Enterprise환경에 맞게 개발할 수 있다는 의미이다.

 

따라서 이 두개가 조합되면 따로 먹어도 맛있는 짜장면과 탕수육이 같이 먹으면 최고의 조합이 되듯 백엔드 서버 구성을 큰 규모로, 더 효율적으로 할 수 있다는 결론에 이른다.👍🏽

 

 

 

 

🪄 Node JS + Express (with) Typescript 기본 구성

---

1) 시작!!! init!!

 

npm init

물론 nodejs는 기본적으로 설치하고 위 명령어를 실행해야 한다. 

 

해당 명령어를 입력하면 여러 옵션들을 입력하라고 나온다.

 

package name: (nodeExpressTypeGood) // 프로젝트 이름
version: (1.0.0)                    // 프로젝트 버전
description:                        // 프로젝트 설명
entry point: (index.js)             // 프로젝트 시작 파일(자바의 main메소드)
test command:                       // 테스트를 위한 명령어
git repository:                     // 연결된 git repo 주소
keywords:                           // 프로젝트 관련 해시태그?
author:                             // 제작자
license: (ISC)                      // 라이센스 종류

상황에 맞게 입력하면 된다.

입력하지 않을 시 기본 값으로 세팅되어 넘어간다.

 

마지막으로 yes 세글자를 넣으면 시작된 것이다.

 

 

 

2) 필수 모듈 설치

 

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

 

🏀 실제 서버 구동시 필요한 모듈 3가지

 

- express : NodeJS를 사용하여 서버를 개발할 때 서버를 쉽게 구성할 수 있게 만든 프레임워크

- @types/express : express는 원래 자바스크립트로 만들어 졌다. 이를 타입스크립트 환경에서 쓰기 위해 express 내부의 변수들, 함수들의 타입을 정의한 ~d.ts 파일이 포함된 형태

- typescript : 타입스크립트 사용을 위해 설치

 

 

🧩 개발시 필요한 모듈들 (-D 옵션을 붙여서 설치)

 

- nodemon : 노드 서버를 실행하고 소스코드를 수정하면 다시 재시작해야하는 번거로움을 자동으로 해주는 고마운 모듈 ❤️

- ts-node : Node.js용 TypeScript 실행 엔진 및 REPL

 

 

여기까지는 몇개의 모듈을 더 설치한거 빼고는 자바스크립트로 백엔드 구성할 때와 별반 다르지 않다.

이제부터 진짜 타입스크립트 세팅이다.

 

 

반응형

 

 

3) 타입스크립트 시작!! init!!!

 

tsc --init

Typescript가 정상적으로 설치되어 있다면 위 명령어가 실행되고 tsconfig.json 파일이 생성될 것이다.

npm init은 package.json을, tsc --init은 tsconfig.json을 생성한다.

 

해당 파일을 열어보면 많은 옵션들이 보일 것이다.

필수적인 옵션들만 설정해 준다.

 

{
"target" : "es6",
"module" : "commonjs",
"outDir" : "dist"  //타입스크립트가 자바스크립트로 빌드된 파일들 모아두는 폴더명
....
}

보통 주석처리되어 있는 outDir의 주석을 풀고 원하는 위치로 설정하면 된다.

 

그외 다른 옵션들에 대한 설명은 위 타입스크립트 공식 홈페이지에 있고 만들어지는 tsconfig.json에도 주석으로 간단히 설명되어 있다.

 

이것으로 서버 세팅에 관련된 작업은 끝이다. 이제 코딩을 해서 API 서버를 만들어 보자.

 

 

✔️ 타입스크립트 코드 작성

---

간단하게 HTTP의 GET 메소드 API 하나에 타입스크립트스러운 객체 하나를 리턴해 보는 코드를 작성해 보자.

 

프로젝트 경로에 app.ts 파일을 만들고 아래와 같이 코딩한다.

 

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

const app = express();

type Data = {
  name: string;
  age: number;
  url: string;
};

const sendData: Data = {
  name: "name",
  age: 3,
  url: "tistory.com",
};

app.get("get", (req: Request, res: Response) => {
  res.send(sendData);
});

app.listen(8080)

이제 만든 서버 모듈이 잘 돌아가는지 확인해 보자

 

 

 

 

✔️ 서버 실행

---

서버를 실행하기 위해서는 package.json의 script 부분을 수정해야 한다.

 

설치해둔 ts-node가 활약할 시간이다.

 

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app",
    "dev": "nodemon --watch \"*.ts\" --exec \"ts-node\" app.ts"
  },

 

위와 같이 dev 명령에 해당하는 명령어를 package.json에 넣고

 

npm run dev

를 실행한다.

 

그리고 브라우저에 http://localhost:8080/get를 입력하면

 

{"name":"name","age":3,"url":"tistory.com"}

해당 json이 잘 오는것을 확인할 수 있다.