[Express] 서버 구성하기 .01

안녕하세요. RyuWoong 입니다.

오늘은 간단하게 Express서버를 구축해보겠습니다.

프로그래밍을 처음 배우면 Hello,World를 띄우는걸 하는데 우리도 Hello, {이름}을 띄우는걸 해보도록 하겠습니다.

---

프로젝트 구성하기.

우선, Node 프로젝트를 생성해봅시다.

빈 프로젝트 폴더를 준비하시고 터미널로 만드신 프로젝트 폴더로 이동해 아래 명령어들을 입력합니다.

npm i typescript -g // 전역으로 TypeScript 패키지를 설치합니다.
npm init // npm기반 프로젝트 생성 및 관리할 수 있게 해주는 명령어.
tsc --init // 프로젝트에 대한 TypeScript 설정을 할 수 있게 해주는 명령어.

명령어를 입력하고 나면 폴더에는 package.json 파일과 tsconfig.json 파일, 두 개가 생성되었을 겁니다.

 

먼저 tsconfig.json 부터 열어볼까요?

{
"compilerOptions": {
	"target": "es2016", /* 컴파일시 해당 버전으로 컴파일. */
	"module": "commonjs" /* 컴파일한 import 문법은 어떤 문법을 사용하느냐 */,
	"outDir": "build" /*  컴파일시 js 파일 경로 */,
	"esModuleInterop": true /* es6모듈 사양에 따라 CommonJS 모듈을 가져올 수 있게함. */,
	"strict": true /* strict 관련 타입체크 모두 켜기 */,
    "noImplicitAny": true /* any타입이 의도치 않게 발생할 경우 에러를 띄움 */,
    "strictNullChecks": true /*  null, undefined 타입에 조작시 에러를 띄움 */,
	},
"include": ["src/*.ts"]
}

아마 모든 옵션이 나열되어있고 주석처리가 되어 있을겁니다.

제가 사용하는 것 중 간단하게 몇개만 뽑아왔으며, 더 추가하여 타이트하게 옵션을 넣을수 있습니다.

자세한 사항은 https://typescript-kr.github.io/pages/tsconfig.json.html 참고하세요!

 

그 다음 필요한 라이브러리를 설치해봅시다.

npm install express
npm install --save-dev @types/node @types/express

첫 시간에 말한대로, 우리는 Express.js로 서버를 구성할겁니다.

typescript를 사용하니까 우리는 types또한 추가로 설치해줍시다. 

🧐 항상 타입을 설치해줘야하나요?

그렇지 않습니다. 라이브러리 내에 타입이 포함되어 있는 경우도 많습니다. 구분하는 방법은 npm에 라이브러리를 검색하면,

이렇게 이름 옆에 DT라는 표시가 보이죠? 이건 타입은 있으나 따로 설치해야한다는 의미입니다.

만약 라이브러리내 포함되어 있다면 TS로 표시됩니다.

 

설치가 다 끝났다면, 프로젝트 폴더내 src폴더를 만들고 index.ts라는 파일을 만들어 코드를 입력해줍시다,

//index.ts

import express, { Request, Response } from "express";
const app = express();
const port = 4040;

app.get("/", (req: Request, res: Response) =>
  res.status(200).send("Hello, RyuWoong?")
);

const server = app.listen(port, () => {
  console.log(`server on ${port}`);
});

Hello,{이름}을 날려주는 간단한 서버가 완성되었습니다. 저는 "Hello, RyuWoong?" 으로 입력했는데, 원하시는 이름에 맞게 입력하시면 됩니다.

 

서버 실행하기

그럼 이제 실행시켜봐야겠죠?

그전에 Typescript로 작성된 프로젝트를 컴파일없이 실행시키기 위해 라이브러리를 추가로 설치합니다.

npm install -D ts-node

설치가 완료되었다면, package.json 을 열어봅시다.

{
  "name": "express",
  "version": "1.0.0",
  "description": "Express Guide",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node src/index.ts" << 추가하기
  },
  "keywords": [
    "express"
  ],
  "author": "RyuWoong",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^18.7.16",
    "@typescript-eslint/eslint-plugin": "^5.36.2",
    "@typescript-eslint/parser": "^5.36.2",
    "eslint": "^8.23.0",
    "ts-node": "^10.9.1"
  }
}

script 블럭 내에 start를 추가해줍니다. 그 후 터미널에서 npm start를 입력해서 아래와 같이 나오나요?

> express@1.0.0 start
> ts-node src/index.ts

server on 4040

잘 나온다면 서버가 정상적으로 잘 구동되고 있다는 의미입니다.

확인을 해봅시다! 브라우저를 켜신 뒤 주소창에 localhost:4040을 입력해보세요.

만약 Hello,{이름}이 나온다면 정상적으로 서버 구동이 완료 된 것 입니다.

서버에서 전달한 값이 나타난다면 성공!

축하합니다! Node서버를 만들었네요.

시작이 반이니 절반은 완성했습니다. 그럼 다음 시간 부터 남은 절반을 만들어 보도록 하겠습니다.