NestJS는 JavaScript 및 TypeScript로 서버 사이드 애플리케이션을 개발하기 위한 프레임워크입니다. MobX는 상태 관리 라이브러리로써 React 애플리케이션에서 주로 사용됩니다. 이번 글에서는 NestJS 프로젝트에서 MobX를 사용하는 방법에 대해 알아보겠습니다.
1. NestJS 프로젝트 생성하기
먼저 NestJS 프로젝트를 생성해야 합니다. 아래의 명령어를 사용하여 NestJS CLI를 전역으로 설치합니다.
npm install -g @nestjs/cli
다음으로 아래의 명령어를 사용하여 새로운 NestJS 프로젝트를 생성합니다.
nest new project-name
프로젝트 폴더로 이동한 후, 아래의 명령어를 사용하여 필요한 패키지를 설치합니다.
npm install mobx mobx-react-lite
2. NestJS에서 MobX 설정하기
NestJS에서 MobX를 사용하기 위해서는 MobX의 Provider를 생성하여 애플리케이션에 주입해야 합니다. 프로젝트의 루트 모듈(app.module.ts)에 아래와 같이 코드를 추가합니다.
import { Module } from '@nestjs/common';
import { MobxModule } from 'nestjs-mobx';
@Module({
imports: [
MobxModule.forRoot(), // MobX Provider 추가
],
})
export class AppModule {}
이제 MobX를 사용하기 위해 store를 만들어 보겠습니다. 프로젝트 루트 경로에 stores 폴더를 생성한 후, 예를 들어 counter.store.ts 파일을 생성합니다.
import { makeAutoObservable } from 'mobx';
export class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
3. NestJS에서 MobX 사용하기
다음으로, MobX store를 사용하는 컨트롤러를 생성해 보겠습니다. controllers 폴더에 예를 들어 counter.controller.ts 파일을 생성합니다.
import { Controller, Get } from '@nestjs/common';
import { CounterStore } from '../stores/counter.store';
@Controller('counter')
export class CounterController {
constructor(private readonly counterStore: CounterStore) {}
@Get('increment')
increment() {
this.counterStore.increment();
return `Count: ${this.counterStore.count}`;
}
@Get('decrement')
decrement() {
this.counterStore.decrement();
return `Count: ${this.counterStore.count}`;
}
}
이제 main.ts 파일에 아래와 같이 CounterStore를 프로바이더로 등록합니다.
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { CounterStore } from './stores/counter.store';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.useGlobalFilters(new HttpExceptionFilter()); // 예외 처리 필터 등록
app.useGlobalGuards(new AuthGuard()); // 인증 가드 등록
app.useGlobalInterceptors(new LoggingInterceptor()); // 로깅 인터셉터 등록
app.useGlobalPipes(new ValidationPipe()); // 유효성 검사 파이프 등록
app.useGlobalProviders([CounterStore]); // CounterStore 프로바이더 등록
await app.listen(3000);
}
bootstrap();
4. MobX 사용하기
이제 MobX를 사용하여 클라이언트와 통신하는 예제를 살펴보겠습니다. 예를 들어 Counter 컴포넌트를 생성하여 CounterStore와 상호작용하도록 구현해보겠습니다.
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useCounterStore } from '../stores/counter.store';
const Counter = observer(() => {
const counterStore = useCounterStore();
const handleIncrement = () => {
counterStore.increment();
};
const handleDecrement = () => {
counterStore.decrement();
};
return (
<div>
<h1>Count: {counterStore.count}</h1>
<button onClick={handleIncrement}>+</button>
<button onClick={handleDecrement}>-</button>
</div>
);
});
export default Counter;
위의 예제에서는 mobx-react-lite 라이브러리의 observer 함수를 사용하여 Counter 컴포넌트를 MobX의 store와 연결합니다. CounterStore의 count 상태를 표시하고 + 및 - 버튼을 클릭하여 상태를 변경할 수 있습니다.
마무리
위에서는 NestJS 프로젝트에서 MobX를 사용하는 방법에 대해 알아보았습니다. MobX를 사용하면 NestJS 프로젝트의 상태 관리에 용이하며, React 애플리케이션과의 통합도 원활하게 이루어집니다. MobX를 통해 더욱 유연하고 효율적인 상태 관리를 구현하여 개발 생산성을 향상시킬 수 있습니다.
참고 자료: