천천히 앞으로!

(Node.js) Nestjs + MSA 기반 서버 구축 (3) - 게시물 CRUD

JJeongHyun — Sat, 21 Jun 2025 13:00:06 +0900

https://developerjjh.tistory.com/212

(Node.js) Nestjs + MSA기반 서버 구축 (2) - MongoDB & Docker 연동

2025.06.05 - [Node.js] - (Node.js) Nestjs + MSA 기반 서버 구축 (1) (Node.js) Nestjs + MSA 기반 서버 구축 (1)● 순서 요지환경 설정 및 Lib 설치코드 구현테스트 통신마무리 1. 요지우연히 NestJS + MSA + MongoDB를 기반

developerjjh.tistory.com

● 순서

요지
기능 설명
예제 코드
테스트 통신 결과
마무리

1. 요지

이전 게시물에서는 NestJS에 MSA 패턴을 적용한 후 데이터베이스 중 MongoDB를 연동하였다

이제 해당 요청에 따른 기능을 만들어보려고 한다

2. 기능 설명

- 게시물 전체 조회

등록되어 있는 모든 게시물을 조회한다

- 게시물 등록

게시물의 제목과 내용으로 요청
제목은 필수 값이지만 내용은 없어도 등록되도록 설정
제목은 중복을 방지

- 게시물 수정

게시물의 id값과 수정하고자 하는 내용을 요청
해당 id값에 대한 존재여부도 확인하여 유효성 검사를 실시

- 게시물 삭제

수정과 마찬가지로 id값으로 삭제하고자 하는 게시물을 삭제
존재하지 않는 게시물의 id값으로 요청 시 에러를 반환하도록 한다

3. 예제 코드

gateway controller

- API의 진입점으로 요청의 필수값에 대한 존재 여부를 검사

// gateway/src/app.controller.ts

import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Delete,
  Param,
} from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('boards')
  async getBoards() {
    return this.appService.getBoards();
  }

  @Post('board')
  async createBoard(@Body() data: { title: string; text?: string }) {
    if (!data.title) throw new Error('Title is required for creating a board');
    return this.appService.createBoard(data);
  }

  @Patch('board/update/:id')
  async updateBoard(
    @Param('id') id: string,
    @Body() data: { title: string; text?: string },
  ) {
    if (!id || !data.title) {
      throw new Error('ID and title are required for updating a board');
    }
    return this.appService.updateBoard(id, data);
  }

  @Delete('board/delete/:id')
  async deleteBoard(@Param('id') id: string) {
    if (!id) throw new Error('ID is required for deleting a board');

    return this.appService.deleteBoard(id);
  }
}

gateway service

- board 서비스와 TCP 연결 후 일치하는 통신을 요청

// gateway/src/app.service.ts

import { Injectable } from '@nestjs/common';
import {
  ClientProxy,
  ClientProxyFactory,
  Transport,
} from '@nestjs/microservices';

@Injectable()
export class AppService {
  private boardClient: ClientProxy;

  constructor() {
    this.boardClient = ClientProxyFactory.create({
      transport: Transport.TCP,
      options: { host: '0.0.0.0', port: 4002 },
    });
  }

  getHello(): string {
    return 'Hello World!';
  }

  getBoards() {
    return this.boardClient.send({ cmd: 'get-boards' }, {});
  }

  createBoard(data: any) {
    return this.boardClient.send({ cmd: 'create-board' }, data);
  }

  updateBoard(id: string, data: { title: string; text?: string }) {
    return this.boardClient.send({ cmd: 'update-board' }, { id, ...data });
  }

  deleteBoard(id: string) {
    return this.boardClient.send({ cmd: 'delete-board' }, { id });
  }
}

board controller

- gateway에서 TCP 통신에 대한 service 메서드를 호출

import { Controller } from '@nestjs/common';
import { MessagePattern, Payload } from '@nestjs/microservices';

import { AppService } from './app.service';
import { Board } from './schema/board.schema';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @MessagePattern({ cmd: 'get-boards' })
  getBoards() {
    return this.appService.findAll();
  }

  @MessagePattern({ cmd: 'create-board' })
  createBoard(@Payload() data: Partial<Board>) {
    return this.appService.create(data);
  }

  @MessagePattern({ cmd: 'update-board' })
  updateBoard(@Payload() data: { id: string; title: string; text?: string }) {
    return this.appService.updateBoard(data.id, {
      title: data.title,
      text: data.text,
    });
  }

  @MessagePattern({ cmd: 'delete-board' })
  deleteBoard(@Payload() data: { id: string }) {
    return this.appService.deleteBoard(data.id);
  }
}

board service

- 각 메서드 별 비즈니스 및 DB 로직을 작성

import { Injectable } from '@nestjs/common';
import { Model } from 'mongoose';
import { InjectModel } from '@nestjs/mongoose';

import { Board } from './schema/board.schema';

@Injectable()
export class AppService {
  constructor(@InjectModel(Board.name) private boardModel: Model<Board>) {}

  async findAll(): Promise<Board[]> {
    return this.boardModel.find().exec();
  }

  async create(data: Partial<Board>): Promise<Board> {
    const isBoard = await this.boardModel.findOne({ title: data.title }).exec();
    if (isBoard) throw new Error('Board with this title already exists');

    if (!data.text) data.text = '';

    const createdBoard = new this.boardModel(data);

    await createdBoard.save();

    return createdBoard;
  }

  async updateBoard(id: string, data: Partial<Board>): Promise<Board | null> {
    const board = await this.boardModel.findById(id).exec();
    if (!board) throw new Error('Board not found');

    if (data.title) board.title = data.title;

    if (data.text) board.text = data.text;

    await board.save();

    return board;
  }

  async deleteBoard(id: string): Promise<Board | null> {
    const board = await this.boardModel.findByIdAndDelete(id).exec();

    if (!board) throw new Error('Board not found');

    return board;
  }
}

4. 테스트 통신 결과

전체 게시물 호출

전체 게시물 호출
게시물 등록
게시물 등록
특정 게시물 수정

수정 결과 및 수정 후 전체 조회
특정 게시물 삭제

삭제 전 전체 목록, 삭제 결과, 삭제 후 전체 목록

5. 마무리

간단하게 최소한의 중복이나 존재 여부 정도만 검사하고 CRUD 하는 과정을 담아봤습니다

아직 부족한 점이 많지만 새로운 패턴과 환경 등을 적용하는 과정이니 참고 정도만 해주시면 감사하겠습니다

다음에는 또 다른 서비스(서버)를 연결하여 더 많은 기능들을 내포하는 프로젝트로 확장하는 게 목적입니다

유저 서비스를 별도로 생성하여서 로그인 상태를 검증하는 거를 생각하고 있으며 더 나아가 권한까지 부여하여 점차 커져가는 게 목표입니다

천천히 과정을 담아 볼테니 많은 관심 부탁드려요!!

(Node.js) Nestjs + MSA기반 서버 구축 (2) - MongoDB & Docker 연동

JJeongHyun — Wed, 11 Jun 2025 13:00:33 +0900

2025.06.05 - [Node.js] - (Node.js) Nestjs + MSA 기반 서버 구축 (1)

(Node.js) Nestjs + MSA 기반 서버 구축 (1)

● 순서 요지환경 설정 및 Lib 설치코드 구현테스트 통신마무리 1. 요지우연히 NestJS + MSA + MongoDB를 기반으로 한 서버를 docker-compose로 구축할 수 있는 기회가 생겼었다그래서 해당 구축한 내용을

developerjjh.tistory.com

● 순서

MongoDB 설치
docker 설치
docker-compose로 실행

지난 게시물에 이어서 연결된 서버에 요청온 데이터들을 별도의 저장소인 DB내에 저장하는 과정을 기록하려고 한다

DB는 MongoDB로 정해서 진행할 예정이다

MongoDB 및 몽구스 설치

# nestjs 몽구스 모듈 설치
npm install @nestjs/mongoose mongoose

modules 설정

- 해당 파일에서 몽구스를 이용해서 모듈을 추가

// board/src/app.modules.ts
import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';

import { AppController } from './app.controller';
import { AppService } from './app.service';
import { BoardSchema } from './schema/board.scheme';

@Module({
  imports: [
    MongooseModule.forRoot('mongodb://localhost/nest'),
    MongooseModule.forFeature([{ name: 'Board', schema: BoardSchema }]),
  ],

  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Schema 생성

- mongoDB내 사용할 테이블의 스키마를 정의하는 파일 생성

// board/src/schema/board.schema.ts
import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { Document, Types } from 'mongoose';

export type BoardDocument = Board & Document;

@Schema()
export class Board {
  @Prop({ required: true })
  title: string;

  @Prop()
  text: string;
}

export const BoardSchema = SchemaFactory.createForClass(Board);

이렇게 설정하고

# board 서비스 실행
npm run start:dev

하니... 덜컥....

mongoDB가 로컬에서 실행되고 있지 않아서 생긴 에러를 만날 수 있다

어쩌지 어쩌지... 검색하고 찾아보고 알아보다가

계속 각 서비스 마다 터미널을 열어서 실행했던 것도 불편하고

mongodb를 로컬에 설치해서 환경변수 설정 하는 등 까다로워서

한번에 실행하고 mongdb도 실행 할 수 있도록

docker와 docker-compose를 이용해보기로 했다

Docker 설치 및 설정

docker desktop 프로그램을 설치
docker-compose.yml 파일 생성
각 서비스별 Dockerfile 생성

docker desktop은 설치하는 법이 어렵지 않아서 간단히 설치를 해주고

파일 예제는 다음과 같다

docker-compose.yml

- 해당 파일은 프로젝트 최상단(root)에 생성

# docker-compose.yml

services:
  gateway:
    build:
      context: ./gateway
      dockerfile: Dockerfile
    ports:
      - '3000:3000'
    depends_on:
      - board
    networks:
      - nest-net

  board:
    build:
      context: ./board
      dockerfile: Dockerfile
    ports:
      - '4002:4002'
    environment:
      - MONGO_URI=mongodb://${{mongodb이름}}:${{비밀번호}}@mongodb:27017/board?authSource=admin
    depends_on:
      - mongodb
    networks:
      - nest-net

  mongodb:
    image: mongo
    container_name: mongodb
    restart: always
    ports:
      - '27017:27017'
    environment:
      MONGO_INITDB_ROOT_USERNAME: ${{mongodb이름}}
      MONGO_INITDB_ROOT_PASSWORD: ${{비밀번호}}
    networks:
      - nest-net

networks:
  nest-net:
    driver: bridge

각 서비스별 Dockerfile

- 해당 파일을 각 서비스별로 생성

FROM node:22-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["node", "dist/main.js"]

node버전은 22
컨데이너 내부에서 작업할 디렉토리를 /app으로 설정
package.json과 lock.json을 복사
의존성 설치
빌드
포트는 3000번으로 설정
빌드내 dist/main.js로 실행

여기까지 왔다면 우리는 이제 실행을 해볼 수 있다

docker 명령어를 실행하기 전에 docker desktop은 실행해둬야 한다!

# 프로젝트 최상단(root)
# docker-compose.yml 파일이 있는 곳
docker compose up --build
#혹은
docker-compose -up --build

※ 만일 mongodb를 설치하지 않았다면 아래의 docker 명령어로 설치

docker run -d --name mongodb -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=${{mongodb이름}} -e MONGO_INITDB_ROOT_PASSWORD=${{설정 비밀번호}} mongo

`docker-compose up --build` 명령어가 정상적으로 동작한다면 아래와 같은 화면을 볼 수 있다

터미널과 docker desktop에서의 실행 화면

두 화면에 찍히는 로그들은 같은 내용들이다, 본인이 좀 더 편한 화면으로 보면 좋을 듯 하다

여기까지 설정하고 다음 게시물에서는 게시물을 등록해서 데이터베이스에서 확인하고 조회할 수 있도록 해보겠습니다~

(Node.js) Nestjs + MSA 기반 서버 구축 (1)

JJeongHyun — Sun, 8 Jun 2025 13:00:22 +0900

● 순서

요지
환경 설정 및 Lib 설치
코드 구현
테스트 통신
마무리

1. 요지

우연히 NestJS + MSA + MongoDB를 기반으로 한 서버를 docker-compose로 구축할 수 있는 기회가 생겼었다
그래서 해당 구축한 내용을 기록하기 위해 작성해보고자 한다
단, 해당 내용이 아닌 다른 내용으로 기초 구축 단계만 작성하며, 단계 별로 나눠서 연동하고 부분적으로 업로드할 예정

MSA란?

- 마이크로서비스 아키텍처(Microservices Architecture)의 약자로 하나의 애플리케이션을 여러 개의 독립적인 서비스로 분리하여 운영하는 것을 의미한다
- NestJS는 MSA를 기본적으로 지원하여 서비스 간의 통신, API Gateway, 메시지 큐(RabbitMQ, Kafka)와의 통합 등을 쉽게 구현 가능
- 독립적인 개발, 배포, 확장이 될 수 있어서 유지보수 및 유연성에 편리

MSA의 구성 및 Gateway 예제

서버 구성

- 서버 구성은 다음과 같다

Gateway 서버 - 모든 API의 진입점
- 단일 진입점을 통해서 클라이언트 측에서 서비스 간의 관리와 네트워킹을 간소화
- 보안 상의 위협으로부터 서비스를 보호
- 서비스들 사이에서 요청을 분산하여 로드 밸런싱을 수행하여 서비스에 균등한 트래픽 분산을 제공하고 서비스의 가용성과 성능을 최적화
- API 관리 기능을 제공할 수 있습니다. API 버전 관리, 요청 및 응답의 변환, 캐싱, 로깅, 분석 등의 기능을 수행하여 개발자가 API를 효과적으로 관리하고 모니터링할 수 있도록 지원
- 하나의 클라이언트 요청에 대해 여러 개의 서비스를 호출해야 하는 경우, Gateway 서버는 이러한 요청을 통합하여 단일 응답으로 반환하여, 클라이언트 측의 응답 처리를 간소화
Board 서버 - 게시물 관련 CRUD

- TCP를 이용한 Nest Microservices

Nest에서 제공하는 라이브러리로 MSA를 구성

2. 환경 설정 및 Lib 설치

- 먼저 NestJS를 전역에 설치

# nestjs cli 전역 설치
npm install -global @nestjs/cli@latest

# 혹은
npm install -g @nestjs/cli@latest

- 구성할 서버(서비스) 명으로 구축 및 라이브러리 설치

# gateway 서비스 구축
nest new gateway

# gateway 라이브러리 설치
cd gateway
npm install @nestjs/microservices

# 프로젝트 root로 이동
cd .. 

# board 서비스 구축
nest new board
cd board
npm install @nestjs/microservices

설치 과정

`nest new gateway` 혹은 `nest new board` 를 입력하면 위와 같은 화면을 만날 수 있다
나는 npm을 사용하기 위해 npm를 선택!!

설치 완료

여기까지 성공했으면

cd gateway
npm run start:dev

npm 실행화면

그리고 http://localhost:3000으로 접속하면

웹 화면

이런 화면을 만날 수 있다~!!

3. 코드 구현

3-1. gateway 서버
gateway controller

- API 진입점을 정의

// gateway/src/app.controller.ts
import { Controller, Get, Post, Body } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }

  @Get('boards')
  async getBoards() {
    return this.appService.getBoards();
  }

  @Post('board')
  async createBoard(@Body() data) {
    return this.appService.createBoard(data);
  }
}

gateway service

- 독립적인 서비스로 TCP 연결 후 통신 요청

// gateway/src/app.service.ts
import { Injectable } from '@nestjs/common';
import {
  ClientProxy,
  ClientProxyFactory,
  Transport,
} from '@nestjs/microservices';

@Injectable()
export class AppService {
  private boardClient: ClientProxy;

  constructor() {
    this.boardClient = ClientProxyFactory.create({
      transport: Transport.TCP,
      options: { host: '0.0.0.0', port: 4002 },
    });
  }

  getHello(): string {
    return 'Hello World!';
  }

  getBoards() {
    return this.boardClient.send({ cmd: 'get-boards' }, {});
  }

  createBoard(data: any) {
    return this.boardClient.send({ cmd: 'create-board' }, data);
  }
}

3-2. board 서비스
board main

- board에서도 TCP를 연결 설정

// board/src/main.ts
import { NestFactory } from '@nestjs/core';
import { MicroserviceOptions, Transport } from '@nestjs/microservices';

import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.createMicroservice<MicroserviceOptions>(
    AppModule,
    {
      transport: Transport.TCP,
      options: { host: '0.0.0.0', port: 4002 },
    },
  );
  await app.listen();
}
bootstrap();

board controller
- gateway에서 send메서드로 요청된 일치한 메시지패턴을 응답
- 비즈니스 로직 메서드를 호출

// board/src/app.controller.ts
import { Controller } from '@nestjs/common';
import { MessagePattern } from '@nestjs/microservices';

import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @MessagePattern({ cmd: 'get-boards' })
  async getBoards() {
    return this.appService.findAll();
  }

  @MessagePattern({ cmd: 'create-board' })
  async createBoard(data: any) {
    return this.appService.create(data);
  }
}

board service
- controller에서 호출된 비지니스 로직을 구현

// board/src/app.service.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  async findAll(): Promise<any[]> {
    // This should return a list of boards from the database
    // console.log('Fetching all boards');
    return [];
  }

  async create(data: any): Promise<any> {
    // This should create a new board in the database
    // console.log('Creating a new board with data:', data);
    return data;
  }
}

두 개의서버를 실행 후

npm run start:dev

- findAll 메서드나 create메서드에 가벼운 콘솔로 확인
- postman으로 통신 확인

localhost:3000 접속시

GET localhost:3000/boards

(Node.js) nodemailer로 파일첨부

JJeongHyun — Sun, 2 Jun 2024 15:47:36 +0900

● 순서

요지
적용 코드
마무리

1. 요지

업무를 보면서 특정 데이터를 누구(타 부서 직원)에게 전달해야 하는 일이 생겼다
단, 이 과정이 매일 반복되고 일정한 시간마다 보내야 되는데, 일일이 데이터를 추출해서 메신저로 보내줬다
이에 이러한 불편함을 버리고자 단순하게 메일만 보냈던 이메일 전송 라이브러리에서 파일 첨부가 되는지 알아보았다

2. 라이브러리 설치

https://developerjjh.tistory.com/200

(Node.js) nodemailer 라이브러리

어느덧 취직을 해서 업무 하는 와중에 NodeJS를 이용해서 이메일 인증 코드를 전송하는 기능을 만들 수 있다고 한다 이에 저는 'nodemailer' 라는 라이브러리를 통해 이메일 인증코드를 보내서 좀 더

developerjjh.tistory.com

3. 적용 코드

- transport의 sendMail 메서드의 옵션인 attachments 값을 설정해주면 된다‎

// ... 이하 생략 ...

// 보내고자 하는 파일의 값을 가져온다 (buffer형식)
const sendFileData:Buffer = readFileSync(`upload/${파일_이름.확장자}`);

await transporter.sendMail({
      from: process.env.NODEMAILER_USER,
      to: '보내고자 하는 대상의 이메일 주소', // ~~~@gmail.com, ~~~@naver.com 등등
      subject: '이메일 내용',
      html: '이메일 제목',
      attachments: [
        { filename: '첨부파일의 이름', content: sendFileData },
      ],
});
    
// ... 이하 생략 ...

attachments
- 배열형식으로 첨부하고자 하는 파일의 이름(filename)
- 해당 파일의 buffer값(content)을 설정할 수 있다
- 객체형식으로 여러개도 가능하다

첨부파일 이메일 전송 결과물

4. 마무리

진작에 알아볼껄 ... 그랬다..ㅋㅋㅋㅋ
처음에 만들떄는 생각도 안 하고 있다가, 필요하니까 그때 가서야 있나..?라고 찾아보다니
앞으로도 알아가야할 것들과 공부할 것들은 정말 많다는 걸 느꼈다

(Node.js) 업로드 이미지 리사이징

JJeongHyun — Sat, 1 Jun 2024 23:51:27 +0900

https://developerjjh.tistory.com/74

(Node.js) multer

multer 라이브러리 express 서버에서 파일을 업로드하기 위한 미들웨어이다 HTML에서 form데이터를 처리하여 클라이언트에서 서버로 파일을 업로드할 수 있다 multer.diskStorage({}) POST 방식으로 전송된

developerjjh.tistory.com

● 순서

요지
라이브러리 설치
sharp 설정 및 적용 코드
마무리

1. 요지

multer 라이브러리 통해서 서버에 파일을 업로드할 수 있다
그중 이미지를 업로드하는 과정에서 만약에...
특정 유저가 이미지에 대한 크기, 너비, 높이 등 감당할 수 없는 스케일의 사진을 업로드를 한다면...?
- 라이브러리에서의 기본 설정에는 제한이 없지만,
  프로젝트의 방향성이나 기획에서 그리고 서버를 구축함에 있어서 메모리를 생각한다면....
이에 이미지 파일의 크기를 제한하고 제한된 이미지 중 리사이징이 가능하다면 조절해보자..!

2. 라이브러리 설치

npm i sharp

3. sharp 적용 코드

- 다행히..? import 정도만 해주면 추가적인 설정 없이 리사이징 관련 메서드를 사용하면 된다

3-1. userService.ts

// userService.ts
import sharp from 'sharp';

// .. 이하 생략 ..

// 단순하게 multer.uploader를 single로 전제 하였다.
 const { filename } = req.profile;

let selectImg: Buffer;

const uploadImgs = fs.readdirSync(UPLOAD_PATH);

uploadImgs.forEach((imgName) => {
	if (imgName === filename)
    selectImg = fs.readFileSync(UPLOAD_PATH + filename);
});

// sharp 메서드로 확인하고 하는 이미지의 버퍼값을 넘겨서 metadata에 접근한다
const temp = await sharp(selectImg).metadata();

// 이미지의 너비가 500 보다 크다면 리사이징 한다고 가정해서
// 해당 이미지의 너비를 300으로 설정해준다.
if (temp.width > 500) {
	const tempPath = path.join('upload', `resized-${filename}`);
	await sharp(profile.path) // 바꿀 이미지의 주소
	.resize({ width: 300 }) // 리사이징 하고자 하는 너비
	.withMetadata() // 기존 이미지의 메타데이터를 유지
	.toFile(tempPath); // 리사이징할 이미지 파일을 원하는 주소에 저장

// 리사이징한 이미지를 기존 원본이미지랑 별도로 두지 않고 덮어쓴다.
fs.rename(tempPath, profile.path, (err) => {
	if (err) throw err;
	});
}
// .. 이하 생략 ..

3-2. multer.setting

const uploader = multer({
  storage,
  limits: { fileSize: '원하는 사진의 크기(숫자)' },
  fileFilter: (_, file, cb) => {
    if (
      file.mimetype !== 'image/png' &&
      file.mimetype !== 'image/jpg' &&
      file.mimetype !== 'image/jpeg'
    ) {
      cb(null, false);
      return cb(new Error('지원되지 않는 이미지 확장자 입니다.'));
    } else cb(null, true);
  },
});

업로드를 지원하는 multer 라이브러리의 설정

4. 마무리

특정 유저가 내 정보 보기에서 본인의 프로필 이미지를 적용할 수 있는 기능을 한다고 했을 때
- 변경하고자 하는 이미지의 크기를 제한할 것인가?
- 너비 및 높이 또한 제한할 것인가?
- 제한이라고 하면 접근자체가 안되게 할 것인지... 아니면 리사이징을 해줄지
라는 고민을 하고 있다가 같이 일하는 기획자의 방향에 따라 좋은 경험을 할 수 있었다
시간적 여유가 있었으면 공부하다가 찾아봤을 텐데... 없어서 넘어갈 뻔했지만 다행

(Node.js) 서버에서 차트 그려서 이미지로 변환

JJeongHyun — Sun, 25 Feb 2024 13:06:15 +0900

● 순서

1. 요지

2. 기능 설명

3. 라이브러리 설치

4. 코드 설명

5. 마무리

1. 요지

특정 데이터에 대한 차트를 매번 그려서 브라우저에 과부하를 주기보다는 가능하다면 서버에서 차트를 그린다
그린 차트를 이미지로 만들어서 보내줄 수 있는지 없는지 있다면, 그렇게 해준다면 브라우저에 과부하를 막자
원하는 차트를 빠르게 출력할 수 있지 않을까 라는 ..... 작은... 생각...

몇 번의 검색과 OpenAI에게 물어본 결과로는 가능한 이야기였다

2. 기능 설명

총 2가지의 라이브러리가 도입됐다

1. chart.js : 데이터로 차트를 그리는 라이브러리
2. chartjs-node-canvas : chartjs를 노드(서버)에서 그릴 수 있게 도와주는 라이브러리

차트를 이미지로 변환하기에 애니메이션, 마우스 hover효과 기능이 없다
이미지의 크기를 정할 수 있다
차트의 모양을 정할 수 있다
차트의 라벨지, X, Y축의 라벨지, 범례 등 설정 가능
차트의 색상 등 CSS효과를 넣을 수 있다

API 작동 순서 요약
1. 원하는 속성에 대한 값을 요청받는다
1-1. 차트의 모양, 각 라벨지들의 이름, 보일지 말지, 선의 색깔, 내부 색깔, 크기, 확장자 등등
2. chartJS로 데이터에 해당하는 녀석들을 종합해서 그린다
3. 그린 차트를 buffer형식으로 변환한다
3-1. chart-node-canvas라이브러리를 통해서 변환
4. 변환된 buffer형식의 차트를 원하는 확장자의 이미지로 응답한다

라고 생각하고 만들어 보려고 한다

결론부터 말하면 조금.. 힘들었던 거 같다... 허허

3. 라이브러리 설치

npm i chart.js chartjs-node-canvas

4. 코드 설명

controller.ts

const generateLineChart = async (req: Request, res: Response) => {
  try {
   let chartObj.type = 'line';
	/*
    // 데이터 형식
    chartObj.data = [
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 4, y: 5 },
    ];
    */
    chartObj.options = setupOptions('line', 0, 45, 0, 50);

    const image = await generateImage(chartObj);

    res
      .writeHead(200, {
        'Content-Type': 'image/png',
        'Content-Length': image.length,
      })
      .end(image);
  } catch (error) {
    console.log(error);
    res.status(500).json(error);
  }
};

차트의 모양은 선 그래프를 기준으로 만든다고 가정 (type = 'line')
차트를 그릴 데이터의 형식은 하나의 객체에 x, y축에 넣을 값을 배열형식으로 정의 (data)
- x축, y축의 데이터 형식이 숫자가 아니어도 된다. 다만, 편의상 숫자로 구현

option.ts

// ... 생략 ...
switch(chartOption){
	option = {
          plugins: {
            //x,y축에 대한 범례 표시 안함
            legend: { display: false },
            datalabels: { display: false },
          },
          scales: {
            // x축에 대한 설정
            x: {
              // 선형의 형식
              type: 'linear',
              // x축의 수직된 기준선 제거
              grid: { display: false },
              min: 0, // x축에서의 최소값
              max: 45, // x축에서의 최대값
            },
            y: {
              type: 'linear',
              min: 0,
              max: 50,
              // y축에 표시하는 값들의 구간 설정
              ticks: {
                stepSize: 10,
              },
            },
          },
        }
	break;
}      
// ... 생략 ...

차트에 대한 옵션을 설정 (option)
- 차트에 대한 전체적인 제목, 부제목, x&y축에 대한 범례 설정
- 각 x, y축 마다의 기준선 표시 여부
- 최소/최대 범위
- 표시되는 틱마다의 간격
- x,y축 표시 여부
- 기타 등등

createImage.ts

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
import { IChart, INodeCanvas } from '../interfaces';

const generateImage = async ({
  type,
  data,
  options,
}: {
  type: IChart['type'];
  data?: IChart['data'];
  options?: IChart['options'];
}): Promise<Buffer> => {
  let chartJSNodeCanvas: INodeCanvas = new ChartJSNodeCanvas({
    width: 292,
    height: 180,
  });

  const image: Buffer = await chartJSNodeCanvas.renderToBuffer({
    type,
    data,
    options,
  });
  return image;
};

export { generateImage };

chartNodeCanvas : 쉽게 말해서 차트의 너비와 높이를 설정

위 속성들에 따른 그래프 결과 값(데이터 다름주의)

5. 마무리

차트(그래프)를 생성하고 그리는 것은 온전히 프론트엔드의 영역인 줄 알았다

하지만 서버에서도 차트를 생성하여 랜더링 후 이미지 형태로 용이하게 클라이언트에서 사용할 수 있는 경험 할 수 있었던 거 같다

※ 차트를 생성 후 이미지로 변환하는 API (type 별 다양한 그래프 그려버리기~)

const generateChartToImage = async (req: Request, res: Response) => {
  try {
    const { type, step, horizon, combo, multi } = req.query;

    const checkType: string = Object.values(CHART_TYPES).find(
      (item) => item == type,
    );

    // 제공되는 차트의 형식이 아닌 문자열이 넘어 왔을 때 에러반환
    if (!checkType) // ... 생략 ...
    else {
      // 차트 데이터와 그의 속성(옵션), 차트에 대한 전반적인 속성(옵션)들을 담은 객체 선언
      let chartObj: IChartObj = setupChartObject(type.toString());

      let setExtractData: IData[] | number[] =
        horizon || combo || multi
          ? // 조건에 맞는 데이터 형식
          : // 조건에 맞는 데이터 형식2

      // 그래프의 x,y축에 범례의 최소값과 최대값을 구하기 위함
      const { minX, maxX, minY, maxY }: IMinMax =
        calculateMinMaxValues(// 차트 데이터);

      // 그래프 형식에 따른 조건 분류
      switch (type) {
        // 선 그래프 일 경우 꺾은선(No step), 계단식 그래프(step) 분류
        case 'line':
          if (step) {
          	 // ... 생략 ...
          } else {
            // ... 생략 ...
          }
          break;

        // 막대 그래프일 경우 수직, 수평으로 분류
        case 'bar':
          if (horizon) {
            // ... 생략 ...
          } else if (combo) {
            // ... 생략 ...
          } else {
            // ... 생략 ...
          }
          break;

        // pie형식과 도넛형식은 옵션이 같으므로 아래와 같이 설정
        case 'pie':
        case 'doughnut':
          if (multi) {
           // ... 생략 ...
          } else {
            // ... 생략 ...
          }
          break;
        case 'bubble':
          // ... 생략 ...
          break;
        case 'polarArea':
          // ... 생략 ...
          break;
        case 'radar':
         // ... 생략 ...
          break;
        case 'scatter':
          // ... 생략 ...
          break;
      }
      const image = await generateImage(chartObj);
      res
        .writeHead(200, {
          'Content-Type': 'image/png',
          'Content-Length': image.length,
        })
        .end(image);
    }
  } catch (error) {
 	// ... 생략 ...
  }
};

계단식 선 그래프 / 파이 그래프 / 도넛 그래프 / scatter 그래프

레이더 그래프 / 폴라영역 / 버블 그래프 / 콤보(선, 막대) 그래프

P.S) 이미지 자체로 반환하거나 이미지를 base64 포맷으로 반환할 수도 있던데 하하...

// 방식1
res
      .writeHead(200, {
        'Content-Type': 'image/png',
        'Content-Length': image.length,
      })
      .end(image);
      
// 방식2

res.json({path: `data:image/png;base64,${images.toString('base64')}`})

(Node.js) node-cron 라이브러리

JJeongHyun — Fri, 23 Feb 2024 15:17:00 +0900

● 순서

1. 라이브러리 설치

2. node-cron 설정

3. node-cron 실행 및 적용

1. 라이브러리 설치

npm i -D node-cron으로 라이브러리를 설치해 준다

npm i -D node-cron

2. node-cron 설정

서버가 작동하면서 실행되는 server.ts라는 최상단 서버파일에 라이브러리를 실행해 준다

import cron from 'node-cron';

cron.schedule('0 0 * * *', () => {
    console.log("실행")
});

schedule 메서드를 호출해서 첫 번째 인자에 실행할 주기를 설정할 수 있다
- 설정 주기 순 - 초(옵션)/분/시/날짜/월/요일
현재 기준은 매일 0시 00분에 실행하는 주기로 설정했다
만약 매초 마다 하고 싶다면 * * * * * * 처럼 6개를 설정하면 된다

3. node-cron 실행

Ex)
- 특정 플랫폼에서 회원탈퇴 기능을 추가
- 회원탈퇴 시 90일 동안 다시 회원가입을 할 수 없으며, 매일 일일이 수동으로 확인하고 회원정보를 지울 수 없다
- 따라서 node-cron이라는 라이브러리를 사용해 매일 0시 00분에 90일이 지난 회원정보들을 지워버린다

3-1. server.ts

// server.ts
import cron from 'node-cron';

import connectToDB from './utils/connectToDB';
import isWithdrawDB from './utils/withdrawDB';

/*
    ... 생략 ...
*/

connectToDB(false);

cron.schedule('0 0 * * *', () => isWithdrawDB());

// ... 생략 ...

3-2. withDrawDB

import { Op } from 'sequelize';

import WithdrawDetail from '../../models/withdrawDetail';
import User from '../../models/user';

const KOREA_OFFSET = 9 * 60 * 60 * 1000;

const isWithdrawDB = async () => {
  try {
    const korNow = new Date(new Date().getTime() + KOREA_OFFSET);

    korNow.setDate(korNow.getDate() - 90);
    const isExpire = await WithdrawDetail.findAll({
      where: {
        updatedAt: {
          [Op.lt]: korNow,
        },
      },
      attributes: ['id', 'userId'],
    });
    if (isExpire.length)
      isExpire.forEach(async (item) => {
        await WithdrawDetail.destroy({ where: { id: item.id } });
        await User.destroy({ where: { id: item.userId } });
      });
  } catch (error) {
    console.log(error);
  }
};
export default isWithdrawDB;

탈퇴내역 테이블에서 90일이 지난 데이터가 있으면 해당하는 유저의 정보와 탈퇴정보들을 삭제한다

(DevOps) AWS에서 S3+CodeDeploy로 EC2 자동배포 (2)

JJeongHyun — Mon, 25 Dec 2023 15:30:20 +0900

● 순서

1. S3 Bucket 만들기

2. AWS CodeDeploy 설정

3. GitHub Action 설정

이전 과정은 아래의 게시물에서 확인할 수 있습니다 (AWS IAM 설정 및 EC2 보안설정)

https://developerjjh.tistory.com/204

(DevOps) AWS에서 S3+CodeDeploy로 EC2 자동배포 (1)

● 순서 1. AWS IAM 설정 2. EC2 보안설정 1. IAM 설정하기 AWS에서 iam를 검색해서 접속한다 왼쪽 엑세스 관리 - 사용자 배너를 클릭해서 사용자 생성을 누른다 사용자이름 (원하는 이름으로) 작성 후 다

developerjjh.tistory.com

1. S3 Bucket 만들기

AWS에서 S3를 검색해서 버킷을 클릭한 후 생성하기를 눌러준다

AWS S3 버킷 만들기

만들기 과정에서 버킷 버전관리와 버킷 키에 관한 설정을 모두 비활성화로 선택 후 버킷 만들기를 눌러서 완성
버킷이름은 전세계적으로 사용하기에 중복될 일이 많으니 유의해야 한다
또한, 이름에 대문자를 넣을 수 없으므로 참고해야 한다

2. AWS CodeDeploy 설정

AWS에서 CodeDeploy를 검색 후 들어간다
왼쪽 배너에서 배포 > 애플리케이션 눌러서 애플리케이션 생성 버튼을 눌러 생성한다

이름은 원하는 대로 편하게 지으면 되고, 컴퓨팅 플랫폼은 EC2/온프레미스로 설정하면 된다
생성 후 해당 애플리케이션 이름을 눌러서 상세정보로 들어간다
베포 그룹을 눌러서 배포 그룹 생성을 클릭한다

배포 그룹 생성

이름은 마찬가지로 원하는대로 설정
서비스 역할은 이전 게시물에 설정한 IAM 역할을 추가해 주면 된다

배포그룹 서비스 역할 추가

환경 구성에는 우리가 codeDeploy를 적용할 EC2를 넣어주면 된다

CodeDeploy 환경 구성

그리고 EC2내에도 codeDeploy를 실행할 codeDeploy-agent 관련 설치 여부를 안 함으로 해준다
- 별도로 설치를 해줄 것이기에

AWS CodeDeploy 에이전트 설치 여부

나머지 설정은 아래와 같이 해준다

나머지 CodeDeploy 배포 그룹 설정

2-1. AWS codeDeploy Agent 설치

여기까지 설정이 됐으면 우리는 이제 EC2 인스턴스에 codeDeploy 에이전트를 설치를 해줘야 한다
인스턴스를 접속 후 다음과 같이 명령어를 순서대로 입력해서 설치한다

sudo apt-get update
sudo apt-get upgrade -y
sudo apt-get install ruby
wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto

위 과정을 순서대로 오류나 실패 없이 완료했다면 'sudo service codedeploy-agent status' 명령어로 확인할 수 있다

3. GitHub Action 설정

여러 설정들을 해줄 것이다
먼저 우리는 GitHub Action에서 AWS 액세스키와 액세스비밀키를 등록을 해주어서 접근권한을 부여한다
그리고 .yml이라는 파일을 생성하여 우리의 작업 결과물인 build 된 폴더를 S3에 업로드
업로드된 파일을 codeDeploy를 통해 EC2 인스턴스로 보내준 뒤 해당 파일로 덮어씌워준다
이후에 apache2를 재가동시켜 변동된 파일로 적용해서 배포까지 완료!

3-1. 액세스 키, 비밀키 등록

gitHub 환경변수 추가

이전 게시물에서 IAM 사용자 설정 후 다운로드하거나 별도 저장 했던 AccessKey와 AccessSecretKey를 넣어준다
- AccessKey의 name : AWS_ACCESS_KEY
- AccessSecretKey의 name : AWS_SECRET_ACCESS_KEY

3-2. workflow ci.yml 및 appspec.yml & .sh 파일 생성

ci.yml
- gitHub Action을 작동에 관한 설정 파일이다
- 위치는 반드시 .github > workflows 내 위치해야 인식할 수 있다

name: portfolio
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout source code.
        uses: actions/checkout@v3
      - name: Install dependencies
        run: cd nextjh && yarn install
      - name: Build
        run: cd nextjh && yarn run build
      - name: zip distributions
        run: zip -r build.zip ./nextjh/build ./nextjh/appspec.yml ./nextjh/deploy.sh
      - name: Sync Bucket
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_EC2_METADATA_DISABLED: true
        run: aws s3 cp --region ap-northeast-2 ./build.zip s3://jjhportfolio/
      - name: AWS configure credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2
      - name: deploy with AWS codeDeploy
        run: |
          aws deploy create-deployment \
          --application-name portfolio-deploy \
          --deployment-config-name CodeDeployDefault.OneAtATime \
          --deployment-group-name jhfolio \
          --s3-location bucket=jjhportfolio,bundleType=zip,key=build.zip \

on : github action에 대한 트리거 설정이다
- 현재는 main이라는 브랜치에 push 했을 때 작동하도록 설정했다
jobs : action 작동 시 진행할 작업 순서 설정이다
- 현재 ubuntu 20.04 버전으로 작동
- steps : 아래의 오는 name별로 하나하나 작동
  1. 소스코드로 이동
  2. 의존성 설치
  3. 프로젝트 빌드
  4. 빌드파일과 codeDeploy를 실행할 yml과 sh파일을 압축
  5. AWS 접근 권한 키 인식 후 S3 Bucket로 압축파일 업로드
  6. S3에 있는 파일을 해당하는 codeDeploy 애플리케이션과 배포그룹에 배포시도
appspec.yml
- CodeDeploy에서 배포를 관리하는 데 사용하는 파일
- 파일에 정의된 일련의 수명 주기 이벤트 훅으로 각 배포를 관리하는 데 사용

version: 0.0
os: linux
files:
  - source: /
    destination: /var/www/
    overwrite: yes

permissions:
  - object: /var/www/
    pattern: "**"
    owner: ubuntu
    group: ubuntu
hooks:
  ApplicationStart:
    - location: deploy.sh
      timeout: 300
      runas: ubuntu

files
- source : S3에 업로드된 모든 파일들
- destination : EC2 인스턴스에 목적 파일경로
- overwrite : 덮어쓰기를 허용 여부 설정
permissions
- object : 해당 폴더
- pattern : 모든 권한
- owner : EC2 인스턴스 사용자이름
- group : EC2 인스턴스 사용자이름
hooks
- ApplicatiopnStart : codeDeploy 실행 시 애플리케이션에 연결된 EC2 내부에서 실행할 파일 설정
  - location : 실행할 sh파일의 위치와 파일명 (필수)
  - timeout : 최대 실행 시간 (선택)
  - runas : EC2 인스턴스 사용자이름 (선택)
deploy.sh
- codeDeploy 배포 스크립트 파일

#!/bin/bash

cd /var/www
sudo cp -r ./build/* ./html
sudo service apache2 restart

cd /var/www : appspec.yml의 destination 경로 이동
sudo cp -r ./build/* ./html : build폴더 내부에 있는 모든 파일들을 ./html폴더안으로 전부 복사 이동
sudo service apache2 restart : 변경 파일 인식할 수 있도록 apache2 재가동

이렇게 한 뒤에 본인의 코드를 git 명령어로 push 하면

gitHub Action이 작동하면서 프로젝트 코드를 빌드한 뒤 빌드폴더와 codeDeploy에 사용될 yml파일들을 S3에 업로드
업로드된 파일이 codeDeploy를 통해 EC2 인스턴스로 이동
build폴더 내부의 파일들이 apache2가 인식하고 있는 html내부로 복사되어서 덮어쓰어짐
apache2를 재가동하면 변경된 파일로 적용된 걸 볼 수 있다

참고 출처)

https://senticoding.tistory.com/90

https://yoo11052.tistory.com/113

https://blossom6729.tistory.com/20

(DevOps) AWS에서 S3+CodeDeploy로 EC2 자동배포 (1)

JJeongHyun — Mon, 25 Dec 2023 14:20:51 +0900

● 순서

1. AWS IAM 설정

2. EC2 보안설정

1. IAM 설정하기

AWS에서 iam를 검색해서 접속한다
왼쪽 액세스 관리 - 사용자 배너를 클릭해서 사용자 생성을 누른다

AWS IAM 사용자 생성 첫화면

사용자이름 (원하는 이름으로) 작성 후 다음을 클릭한다
권한 옵션은 직접 정책 연결을 누른다
두 가지를 선택해서 넘어간다
S3FullAccess
CodeDeployFullAcess

AWS IAM 정책 검색(1)

AWS IAM 정책 검색(2)

체크박스만 눌러주고 다음을 눌러서 완성한다
해당 사용자 설정에 접근할 수 있는 AcessKey와 AccessSecretKey를 생성해야 한다

AWS IAM 엑세스 키 설정

엑세스 키 만들기

생성 후 나오는 AccessKey와 AccessSecretKey를 저장 둬야 한다
- 완성 후에만 볼 수 있고 그 이후에는 다시 접근할 수없기에 별도로 저장을 해야 한다
왼쪽에 액세스 관리 역할을 클릭 후 역할생성을 클릭한다

IAM 역할 생성

역할생성을 우리는 크게 두 가지를 할 것이다
- 먼저 EC2에 S3와 CodeDeploy에 접근하는 역할
- CodeDeploy에 관한 역할

IAM EC2 역할 선택(1)

IAM EC2 역할 선택(2)

codeDeploy역할은 선택 후 기본설정으로 완료하면 된다

CodeDeploy 역할 선택

2. EC2 보안설정

이제 사용할 EC2 인스턴스로 넘어가서 보안설정을 추가 및 수정해 주면 된다

EC2 인스턴스 보안 설정

IAM 역할 수정을 클릭 후 위 과정에서 생성한 IAM 설정으로 업데이트해주면 된다

(Node.js) MVC 디자인 패턴

JJeongHyun — Sun, 24 Sep 2023 16:46:21 +0900

MVC 패턴 NodeJS에 적용해 보기!!

0. MVC패턴을 적용하게 된 계기

1. MVC패턴이란

2. MVC 패턴을 선택한 이유

3. MVC 패턴에 대한 간단한 설명

4. 나의 MVC패턴 적용 전 / 후 Server Tree

5. 후기

0. 잊고 있던 디자인 패턴 ( MVC 패턴)

글 작성을 시작하기 전에

디자인 패턴... 이전에 국비교육을 다닐 때 지나가는 듯이 들었던 기억이 있다

그리곤 나중에 제대로 알아봐야겠다라고 생각하고 잊어버렸던 거 같다

그렇게 어느 날...

친한 N사 백엔드 개발자를 만나면서 궁금해하길래 내 gitHub를 보여줬다

그 녀석이 보자마자 하는 말은...

뭐야 형... 이거 패턴이 왜 이래?

이야기를 듣고 나선 아차 싶으면서 잊었던 디자인패턴이라는 것이 생각났다

그렇게 다시 디자인패턴을 알아봐야겠다라고 생각 했고

그중에서도 MVC패턴을 찾아서 적용해보려고 한다

1. MVC패턴이란 ?

MVC 패턴

2. MVC 패턴 선점이유

애플리케이션을 구성할 때 각자 맡은 역할대로 소스코드를 구분하여 코딩하고 유지보수 및 신규기능 추가를 더 수월하게 하겠다는 의도
Java에서 매우 많이 쓰이는 패턴으로 같이 작업하는 백엔드 인원들이 다가오기 수월한 패턴이라고 생각해서 적용

3. MVC 패턴에 대한 설명

Model
- 데이터를 관리하고 처리, 데이터베이스, 처음의 정의하는 상수, 초기화값, 변수
- MySQL로 Sequelize를 사용해서 ORM 하여 DB를 구성
View
- 사용자에게 보이는 인터페이스를 제공
Controller
- 사용자의 요청을 처리하고 Model과 View를 연결
- 기능을 수행하는 함수들 및 로직 폴더, 대부분의 요청에 대한 처리, 함수 선언을 한 곳에 모아둔 폴더
- 데이터와 사용자인터페이스 요소들을 잇는 다리역할
  - 사용자가 데이터를 클릭하고, 수정하는 것에 대한 "이벤트"들을 처리하는 부분

4. 나의 MVC 패턴 적용하기 전 / 후 Server Tree

MVC 패턴을 적용하기 전

나에게는 익숙했지만... 일을 같이 하는 개발자들이 다가가기 어려웠다고 이야기를 했었다

그래서 고민고민하다가 Java Spring에서 많이 쓰인다고 하는 MVC패턴을 적용했다

4-1. 적용 전 백엔드 서버 Tree

├─config

├─build

├─models

├─src

└─upload

.env

.gitignore

.prettierrc

package.json

README.md

index.ts

tsconfig.json

before_Tree

이런 식으로 그냥.. config폴더에 DB 설정파일 두고 models에는 DB 테이블 관련 파일들...

그 외 소스파일들은 src 폴더에 싹 다 집어넣고 사용했다

그때 당시에는 몰랐지만, 같이 이방식으로 공부한 게 아니라면 다들 어려워할 수 있다는 걸 알아챘다

4-2. 적용 후 백엔드 서버 Tree

├─config

├─controllers

├─models

├─routes

├─upload

└─utils

.env

.gitignore

.prettierrc

package.json

README.md

server.ts

tsconfig.json

after MVC 패턴 적용 후

config : 서버와 DB가 시작할 때 처리되는 파일들을 모아둔 폴더
controllers : 기능에 따른 관리 파일들을 모아둔 폴더
models : DB의 테이블명과 해당 컬럼들의 대한 속성 파일들을 모아둔 폴더
routes : 사용자의 요청에 따른 API url 분산해둔 폴더
upload : 업로드된 파일을 저장해 두는 폴더
utils : 기타 자주 쓰이거나 공통으로 사용하는 모듈, 설정 값들을 관리 (interface, multer 등등)

5. MVC 패턴 적용 후기

위와 같이 기능에 대한 controller를 나눠서 쪼개놨더니 기존에 Java를 배우던 개발자들이 보기 쉬워졌다고

그제야 이야기해 줬다 ㅋㅋㅋㅋ

( 불편한 거 있으면 이야기해 줘.... 난 몰랐단 말이야...)

폴더 내 파일이름도 기능+Controller로 하자고 해서 적용했고

단순히 API 라우터 내에 실행되는 기능들도 네이밍을 해서 함수화 하여서 controller에 분리해두니

협업하는 과정에서 다들 이전보다 편하다고 이야기해 줬다

사실 이 지금이 상태도 MVC를 적용하고 직후의 상태는 아니다

계속해서 바꾸고 바꾸고 공통적으로 사용하거나 각 파일별 interface파일은 별도로 존재했다가 하나로 합치는 등

누군가 이런 식으로 하면 어때? 혹은 변화를 주고 회의를 진행함으로써 조금이라도 편하고 보편화된 방법을 수용하려고

노력 중에 있다

P.S 뭐.. ㅋㅋㅋ 많은 분들이 보고 있지는 않지만 누군가 보고 좀 더 괜찮은 방법이 있다면 따끔하게 알려주세요!!!

감사합니다 !!