자바스크립트 기반 NestJS 웹 애플리케이션의 프론트엔드 라우팅 방법

08 Nov 2023

nestjs

NestJS는 Node.js 기반의 프레임워크이며, 백엔드 개발에 주로 사용됩니다. 그러나 NestJS를 사용하여 개발한 웹 애플리케이션의 프론트엔드 부분에서도 라우팅을 구현해야 할 경우가 있습니다. 이를 위해 NestJS에서는 자바스크립트 기반 프론트엔드 프레임워크인 Angular, React, Vue.js와 같은 라이브러리를 사용할 수 있습니다. 이번 블로그에서는 NestJS 웹 애플리케이션에서 Angular를 이용한 프론트엔드 라우팅 방법을 알아보겠습니다.

Angular에서 NestJS 프론트엔드 라우팅 설정하기

먼저, NestJS 애플리케이션과 Angular 프론트엔드 애플리케이션이 각각 독립적으로 구성되어 있다고 가정하겠습니다.
NestJS 애플리케이션에서 Angular로 프론트엔드를 개발하기 위해 Angular CLI를 이용하여 새로운 Angular 프로젝트를 생성합니다. 다음 명령어를 사용합니다.
```
ng new frontend-app
```
Angular 프로젝트를 만든 후, 프론트엔드 애플리케이션을 개발하며 필요한 모든 라우팅을 설정합니다. 이때, Angular의 라우터를 사용하여 필요한 URL 매핑 및 라우팅 로직을 작성합니다.
NestJS 애플리케이션에서 Angular 프론트엔드 애플리케이션을 호스팅하기 위해 Express 서버를 사용할 수 있습니다. 먼저, Express 패키지를 설치합니다. 다음 명령어를 사용합니다.
```
npm install express
```

NestJS 애플리케이션의 main.ts 파일에서 Express 서버를 설정합니다. 다음 코드를 추가합니다.

import * as express from 'express';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
    const app = await NestFactory.create(AppModule);
    const expressApp = express();
   
    // Angular 프론트엔드 애플리케이션을 정적 파일로 호스팅
    expressApp.use(express.static('frontend-app/dist/frontend-app'));
   
    // 모든 요청에 대해 index.html 파일을 반환
    expressApp.get('*', (req, res) => {
        res.sendFile('index.html', { root: 'frontend-app/dist/frontend-app' });
    });

    app.use(expressApp);

    await app.listen(3000);
}
bootstrap();

이제 NestJS 애플리케이션과 Angular 프론트엔드 애플리케이션이 함께 실행됩니다. NestJS 애플리케이션은 백엔드 API를 제공하며, Angular 프론트엔드 애플리케이션은 Angular 라우터를 통해 프론트엔드 라우팅을 처리합니다.

이제 NestJS 웹 애플리케이션에서 자바스크립트 기반 프론트엔드 라우팅을 구현하는 방법을 알아보았습니다. Angular를 사용한 예제를 설명했지만, React, Vue.js 등의 프론트엔드 라이브러리를 사용하는 경우에도 비슷한 방식으로 라우팅을 설정할 수 있습니다.

#NestJS #Angular