Express | express, ts 개발 환경 셋업, helloworld출력하기

| 노드환경에서의 타입스크립트 설정

노드환경에서 타입스크립트 설정해보자

아래 4개의 파일을 준비한다

 

package-lock.json

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "@types/node": {
      "version": "15.14.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-15.14.1.tgz",
      "integrity": "sha512-wF6hazbsnwaW3GhK4jFuw5NaLDQVRQ6pWQUGAUrJzxixFkTaODSiAKMPXuHwPEPkAKQWHAzj6uJ5h+3zU9gQxg==",
      "dev": true
    },
    "ansi-regex": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
      "dev": true
    },
    "cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
      "dev": true,
      "requires": {
        "path-key": "^3.1.0",
        "shebang-command": "^2.0.0",
        "which": "^2.0.1"
      }
    },
    "duplexer": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
      "dev": true
    },
    "event-stream": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
      "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=",
      "dev": true,
      "requires": {
        "duplexer": "~0.1.1",
        "from": "~0",
        "map-stream": "~0.1.0",
        "pause-stream": "0.0.11",
        "split": "0.3",
        "stream-combiner": "~0.0.4",
        "through": "~2.3.1"
      }
    },
    "from": {
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
      "dev": true
    },
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
      "dev": true
    },
    "map-stream": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
      "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=",
      "dev": true
    },
    "node-cleanup": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/node-cleanup/-/node-cleanup-2.1.2.tgz",
      "integrity": "sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=",
      "dev": true
    },
    "path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
      "dev": true
    },
    "pause-stream": {
      "version": "0.0.11",
      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
      "dev": true,
      "requires": {
        "through": "~2.3"
      }
    },
    "prettier": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
      "dev": true
    },
    "ps-tree": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.2.0.tgz",
      "integrity": "sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==",
      "dev": true,
      "requires": {
        "event-stream": "=3.3.4"
      }
    },
    "shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
      "dev": true,
      "requires": {
        "shebang-regex": "^3.0.0"
      }
    },
    "shebang-regex": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
      "dev": true
    },
    "split": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
      "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=",
      "dev": true,
      "requires": {
        "through": "2"
      }
    },
    "stream-combiner": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
      "integrity": "sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=",
      "dev": true,
      "requires": {
        "duplexer": "~0.1.1"
      }
    },
    "string-argv": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.1.2.tgz",
      "integrity": "sha512-mBqPGEOMNJKXRo7z0keX0wlAhbBAjilUdPW13nN0PecVryZxdHIeM7TqbsSUA7VYuS00HGC6mojP7DlQzfa9ZA==",
      "dev": true
    },
    "strip-ansi": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
      "dev": true,
      "requires": {
        "ansi-regex": "^5.0.0"
      }
    },
    "through": {
      "version": "2.3.8",
      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
      "dev": true
    },
    "tsc": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/tsc/-/tsc-2.0.3.tgz",
      "integrity": "sha512-SN+9zBUtrpUcOpaUO7GjkEHgWtf22c7FKbKCA4e858eEM7Qz86rRDpgOU2lBIDf0fLCsEg65ms899UMUIB2+Ow==",
      "dev": true
    },
    "tsc-watch": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/tsc-watch/-/tsc-watch-4.4.0.tgz",
      "integrity": "sha512-+0Yey6ptOOXAnt44OKTk2/EnQnmA0auL7VWXm9d9abMS4tabt0Xdr9B4AK6OJbWAre9ZdLA81+Nk8sz9unptyA==",
      "dev": true,
      "requires": {
        "cross-spawn": "^7.0.3",
        "node-cleanup": "^2.1.2",
        "ps-tree": "^1.2.0",
        "string-argv": "^0.1.1",
        "strip-ansi": "^6.0.0"
      }
    },
    "typescript": {
      "version": "4.3.5",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
      "dev": true
    },
    "which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
      "dev": true,
      "requires": {
        "isexe": "^2.0.0"
      }
    }
  }
}

 

package.json

{
  "scripts": {
    "build": "tsc",
    "start:dev": "tsc-watch --onSuccess \"node dist/app.js\"",
    "prestart": "npm run build",
    "start": "node dist/app.js"
  },
  "devDependencies": {
    "@types/node": "^15.3.0",
    "prettier": "^2.2.1",
    "tsc": "^2.0.3",
    "tsc-watch": "^4.2.9",
    "typescript": "^4.3.4"
  }
}

 

tsconfig.json

//* https://www.staging-typescript.org/tsconfig

{
    "compilerOptions": {
      "strict": true,
      "module": "commonjs",
      "declaration": true,
      "removeComments": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "allowSyntheticDefaultImports": true,
      "target": "ES5",
      "sourceMap": true,
      "outDir": "./dist",
      "baseUrl": "./src",
      "incremental": true
    },
    "include": ["src/**/*"]
  }

 

마지막하나는

src 폴더를 만들고

그안에 

app.ts라는 파일을 생성해준다

app.ts

import * as express from "express";

const app: express.Express = express();
const port: number = 8000;

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

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}/`);
});

 

아래와 같이 준비한다

여기서 cmd + j 로 터미널을 열자 

그리고 아래 명령어입력하자

npm i

그러면 package.json에 있는 패키지들을 설치하게 된다

---

@types/node는 자바스크립트의 런타임인 노드의 타입들을 가져온다

---

prettier 는 코드를 포맷팅해준다

---

tsc는 typescript 컴파일러이다

---

tsc-watch는 파일이 변경될시 자동으로 컴파일해주는것 위에 scripts 쪽을 보면 start:dev라고 나와있는데

터미널 명령어로

npm run start-dev

이걸치면

옆에 있는 

 "tsc-watch --onSuccess \"node dist/app.js\""

이 스크립트가 실행이 되는데

스크립트를 보면

tsc-watch가 파일을 지켜보다가 변경이 되면 컴파일을하고

컴파일이 성공하면 --onSuccess  에 의해 node dist/app.js 명령어를 실행한다

dist폴더 같은경우 tsconfig.json을보면

위 컴파일 옵션에따라서 컴파일을 마치게되면 dist라는 폴더가 생성이되고

dist안에 타입스크립트를 컴파일해서 생성된 js파일들이 들어가게된다

그럼 그 js파일을 node 통해 실행되게 되는것이다

 

스크립트를 더 살펴보면

start는

만약

npm run start

이렇게 입력하면

start가 실행되기 전에  prestart가 먼저실행된다

그럼 

npm run build

가 실행되어 위에 있는 build 명령어가 실행된다

build 명령어는 곧 위 build : tsc 이고

tsc

tsc 는 다시 tsconfig.json를 읽어들여

옵션에 맞게 컴파일하게된다

컴파일을 한 후

start가 실행되어

node dist/app.js

얘가 실행된다

 

이제부터 express라는 것을 쓸건데

쓸때는 항상 아래와같이 실행할것이다

npm run start:dev

---

| Express 설치

express 공식문서다

https://expressjs.com/

Express - Node.js web application framework

 

express 설치

터밀에 아래 명령어를 이용하여 설치해보자

npm i express

설치가 완료되면

package.json에 

이렇게 dependencies로 express가 설치된 것을 확인 할 수 있다

여기서 devDependencies와 dependencies의 차이를 설명하자면

devDependencies는 라이브러리같은 개발할때 필요한 것들을 써놓는곳이고

실제 프로덕션 서버에 실행을 할때는 dependencies만 필요하기때문에

분리해놓은 것이다

 

@types/express -D설치

실제 서버환경에서 실행시 node를 통해 js를 실행시키는 것을 확인 할 수 있다

따라서 개발환경에서는 타입스크립트를 쓰기때문에

dependencies말고 devDependencies에 타입스크립트를 추가시켜야한다

npm i @types/express -D

 

| Hello world출력하기

app.ts를 열어서 아래 코드를 붙여넣자

import * as express from "express";

const app: express.Express = express();
const port: number = 8000;

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

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}/`);
});

그리고 저장을 한 후 실행을 시켜보자

npm run start:dev

그럼 아래와 같이 뜨는 것을 확인할 수 있다

 

브라우저를 열어서 localhost:8000 으로 이동해보자

hello world가 출력되는 것을 확인할 수 있다

 

코드를 한줄한줄 설명해보자면

 

const app: express.Express = express();

Express의 인스턴스라고 볼 수 있고 얘가 서버 역할을 한다

---

const port: number = 8000;

포트는 8000번을 쓴다는 것

---

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

req는 클라이언트의 요청이고

res는 서버의 응답이다

req로 요청이 들어오면 res.send로 hello world를 전송하여 출력하게 한다
string 말고도 객체 형식으로도 보낼 수 있다

res.send({name:"jaewonlee",age:26})

그리고 만약 

/ 대신 /test 로 바꿔써보자

아래의 묶음을 라우터 라고하는데

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

해당하는 라우터를 찾지 못해 에러가 난다

이번엔 /test  요청을 해보자

이런식으로 spring boot의 controller처럼

일치하는 경로의 라우터를 실행시켜 응답한다

아래와 같이 여러개의 라우터를 만들수 있다

import * as express from "express";

const app: express.Express = express();
const port: number = 8000;

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

app.get("/test", (req: express.Request, res: express.Response) => {
  res.send({ name: "jaewonlee", age: 26 });
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}/`);
});

---

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}/`);
});

listen은 만든서버에 접속할 수 있게 서버의 특정 포트를 활성화 시키는 것 . 쉽게 말해 서버를 연다고 볼수있다