Express.js 구성

애플리케이션 서비스를 위한 Express 설정

지금까지 프로젝트 디렉토리를 구성하고, TypeScript 컴파일러 옵션을 설정했으며, Hello World를 출력하는 매우 간단한 TypeScript 애플리케이션을 생성했습니다.

이 섹션에서는 애플리케이션 서비스를 제공하기 위해 ExpressJS를 추가하고 다양한 종류의 요청을 처리하기 위한 미들웨어를 구성하여 애플리케이션을 확장해 보겠습니다.

새로운 종속성 설치

이 섹션에 필요한 새로운 패키지들을 설치하기 위해 다음 명령을 실행합니다. 각 패키지에 대해서는 차례대로 다룰 것입니다.

npm install --save \
  express \
  express-rate-limit \
  express-session \
  http

패키지를 위한 TypeScript 유형(Type) 및 인터페이스(Interface) 정의를 개발 종속성으로 설치합니다.

npm install --save-dev \
  @types/express \
  @types/express-rate-limit \
  @types/express-session \
  @types/node

앱 캡슐화

이 튜토리얼은 객체 지향 프로그래밍(OOP) 개념을 사용합니다. OOP에 익숙하지 않다면 MDN 페이지를 참조하여 간단한 입문 내용을 확인하십시오.

먼저, 튜토리얼의 이 부분에서 작업할 애플리케이션 코드를 담을 새로운 파일을 생성합니다. 이전 모듈에서 간단한 'Hello world' 앱을 구성했다면 index.ts 파일은 그대로 두어도 됩니다. 나중에 다시 다룰 것입니다.

touch ./src/app.ts

새 파일(./src/app.ts) 상단에 Express 및 관련 TypeScript 유형/인터페이스 정의에 대한 import 문을 추가한 다음, 애플리케이션 실행에 필요한 모든 관련 함수와 구성을 담을 App 클래스를 생성합니다.

클래스 생성자(Constructor)는 클래스가 인스턴스화될 때 3000번 포트에서 Express를 초기화합니다. 생성자에서 호출할 프라이빗 함수 listen()을 생성하여 Express 서버의 실제 시작을 처리하도록 하겠습니다.

나중에 필요하므로 파일 하단에서 클래스를 export 하는 것을 잊지 마십시오.

import express from 'express';
import type { Application } from 'express';
import type { Server } from 'http';

class App {
  public app: Application;
  private server: Server;

  constructor() {
    this.app = express();
    this.server = this.listen(3000);
  }

  private listen(port: number) {
    this.server = this.app.listen(port, () => {
      console.log(`App listening on port: ${port}`);
    });

    return this.server;
  }

}

export default App;

npx tsc를 사용하여 새 파일을 테스트하고 ./dist 디렉토리에 app.js 파일이 성공적으로 생성되는지 확인합니다. 오류가 없다면 좋습니다! 이제 라우트(Route)를 추가할 준비가 되었습니다.

기본 라우트

Express는 지정된 포트에서 모든 요청을 대기하지만, 요청을 받았을 때 _무엇을 해야 할지_는 모릅니다. Express에게 수신할 수 있는 다양한 유형의 요청을 처리하는 _방법_을 알려주어야 합니다. 이를 구성하는 방법은 애플리케이션의 아키텍처와 앱이 응답할 것으로 예상되는 라우트/페이지에 따라 크게 달라집니다.

이 튜토리얼에서는 간단하게 진행하겠습니다. 최종 목표는 사용자에게 Snyk 내의 프로젝트 목록을 제공하는 것이므로, 최소한 두 개의 라우트가 필요하다고 가정합니다. 초기 연결을 처리할 인덱스 라우트(/)와 Snyk의 데이터를 표시할 프로젝트 라우트(/projects)입니다.

프로젝트를 체계적으로 관리하기 위해 라우트 모음을 담을 routes 디렉토리를 생성하고, 각 라우트에 대한 메인 컨트롤러 파일과 필요한 추가 항목들을 포함할 고유한 하위 디렉토리를 지정하겠습니다.

이 모듈에서는 인덱스 라우트에 집중하겠습니다.

mkdir -p ./src/routes/index
touch ./src/routes/index/indexController.ts

인덱스 컨트롤러 작업을 시작하기 전에, 컨트롤러 데이터의 공통 형태를 정의하기 위한 TypeScript 인터페이스를 생성해야 합니다. 이는 컨트롤러의 일관성을 유지하는 데 도움이 되며, 컨트롤러에 중요한 항목이 누락된 경우 TypeScript가 조기에 경고를 줄 수 있게 합니다.

라우트에서 결정한 것과 유사한 분리 패턴을 사용하겠습니다. TypeScript의 인터페이스 정의는 일반적으로 독립적이고 설명적이므로 각 정의에 대한 디렉토리를 생성하는 대신, 생성하는 인터페이스 파일들을 형제 파일로 저장하겠습니다.

mkdir -p ./src/interfaces
touch ./src/interfaces/Controller.ts

우리가 생성하는 모든 라우트 컨트롤러는 최소한 경로 값과 Express의 라우터를 가져야 합니다. ./src/interfaces/Controller.ts를 편집하여 아래 내용을 채웁니다.

import type { Router } from 'express';

export interface Controller {
  path: string;
  router: Router;
}

완료되면 에디터에서 라우트 컨트롤러 파일 ./src/routes/index/indexController를 열고 다음 내용을 추가합니다.

import type { Controller } from '../../interfaces/Controller';
import type { Request, Response, NextFunction } from 'express';
import { Router } from 'express';

class IndexController implements Controller {
  public path = '/';
  public router = Router();

  constructor() {
    this.initRoutes();
  }

  private initRoutes() {
    this.router.get(`${this.path}`, this.indexPage);
  }

  private indexPage(req: Request, res: Response, next: NextFunction) {
    return res.send('index route!');
  }
}

export default IndexController;

여기서는 몇 가지 TypeScript 유형/인터페이스 정의와 Express 패키지의 Router 객체를 가져왔습니다.

IndexController가 indexPage 함수를 통해 / 요청에 응답하여 'index route!'를 보내도록 설정했지만, App 클래스에는 인스턴스화될 때 라우트를 등록할 방법이 아직 없습니다. ./src/app.ts 파일로 돌아가서 이를 설정하기 위한 initRoutes() 함수를 추가해 보겠습니다.

또한 App 클래스의 생성자 함수가 Controllers 배열과 포트 값을 인수로 받도록 수정하겠습니다.

./src/app.ts를 편집하고 내용을 다음과 같이 업데이트합니다.

import express from 'express';
import type { Application } from 'express';
import type { Server } from 'http';
import type { Controller } from './interfaces/Controller';

class App {
  public app: Application;
  private server: Server;

  constructor(controllers: Controller[], port: number) {
    this.app = express();
    this.initRoutes(controllers);
    this.server = this.listen(port);
  }

  private initRoutes(controllers: Controller[]) {
    controllers.forEach((controller: Controller) => {
      this.app.use('/', controller.router);
    });
  }

  private listen(port: number) {
    this.server = this.app.listen(port, () => {
      console.log(`App listening on port: ${port}`);
    });

    return this.server;
  }

}

export default App;

Express 서버 실행

지금까지 인스턴스화될 때 / 경로의 요청에 응답하는 Express 서버를 실행하는 App 클래스를 생성했으며, 모든 컨트롤러가 동일한 데이터 패턴을 따르도록 보장하기 위한 인터페이스 정의를 추가했습니다.

프로젝트를 실행하고 테스트해 봅시다!

이 시점에서 컴파일된 ./dist/app.js를 실행하면 아무 일도 일어나지 않습니다. 아직 내보낸 클래스를 인스턴스화하지 않았기 때문입니다. 이전 모듈에서 package.json을 초기화했습니다. 해당 명령 중에 앱과 관련된 질문들이 제시되었습니다. 그중 하나는 프로젝트의 진입점(Entrypoint)이 무엇인지 묻는 것이었습니다. 기본값을 선택했다면 package.json에 index.js로 설정되어 있을 것입니다. 이 진입점에서 App 클래스를 인스턴스화할 것입니다.

./src/index.ts(Hello World 코드가 있던 곳)를 편집하여 기존 내용을 모두 지우고, App 클래스와 필요한 다른 객체들을 가져오는 import 문을 추가합니다.

진입점은 new 키워드를 사용하여 App 클래스를 인스턴스화하는 한 가지만 수행합니다.

import IndexController from './routes/indexController';
import App from './app';

new App(
  [
    new IndexController()
  ],
  3000
);

이게 전부입니다!

npx tsc를 사용하여 프로젝트를 빌드한 다음, node를 사용하여 컴파일된 진입점을 실행합니다.

npx tsc && node ./dist/index.js

모든 과정이 성공적이었다면 콘솔에 App listening on port: 3000이라는 메시지가 표시됩니다.

이제 브라우저에서 http://localhost:3000에 접속하거나 curl을 사용하여 응답을 확인하십시오. index route!가 보인다면 축하합니다! Express가 애플리케이션을 제공하고 라우트에 응답하고 있습니다!

이 튜토리얼의 다음 모듈에서는 라우트와 인증에 대해 더 자세히 알아보고 Snyk API 작업을 시작해 보겠습니다.