name : Build and Deploy to EC2

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  AUTO_DEPLOY:
    runs-on: ubuntu-latest

    steps:
      - name: Check out code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Run scripts in server
        uses: appleboy/ssh-action@master
        with:
          host: ${{secrets.HOST }}
          username: ${{secrets.USERNAME }}
          password: ${{secrets.PASSWORD }}
          port: ${{secrets.PORT }}
          timeout: 40s
          script: ${{secrets.SCRIPT }}

script 파일에는

cd workflow-service
git pull origin main
npm install
npm run build
sudo pm2 restart

이렇게 작성해두었는데 stack overflow에서 찾아보니 빌드할 때 앞에서 했었던 node.js의 사용 메모리를 늘려주는 코드를 작성해야 한다고 함 수정 script

cd workflow-service
git pull origin main
export NODE_OPTIONS=--max_old_space_size=2048
npm install
npm run build
sudo pm2 restart

해당 오류는 수정됐으나

err: From https://github.com/toy-workflow-service/workflow-service
err:  * branch            main       -> FETCH_HEAD
out: Already up to date.
out: up to date, audited 1141 packages in 3s
out: 179 packages are looking for funding
out:   run `npm fund` for details
out: 13 vulnerabilities (2 moderate, 11 critical)
out: To address all issues possible (including breaking changes), run:
out:   npm audit fix --force
out: Some issues need review, and may require choosing
out: a different dependency.
out: Run `npm audit` for details.
out: > work-flow@0.0.1 build
out: > nest build
2023/09/07 16:24:06 Process exited with status 1
err:   error: missing required argument `id|name|namespace|all|json|stdin'

missing required argument 오류가 발생하여 해결예정,,

EC2 SSH 환경 비밀번호로 로그인

ssh - i key-pair.pem ubuntu@ip_address

키페어를 사용하여 아이피를 넣고 로그인 한 뒤

sudo 원하는 비밀번호 ubuntu 

원하는 비밀번호를 설정!

sudo vi /etc/ssh/sshd_config

sshd_config파일을 열어 준 뒤 a or i를 눌러 입력모드로 전환 후 아래로 좀 내려가면

PasswordAuthentication yes

no로 되어있는 값을 yes로 변경해주고

PermitRootLogin prohibit-password
->
PermitRootLogin yes

prohibit-password를 지우고 yes로 변경하여 루트로그인을 허용함 이후 exit을 한 뒤

ssh ubuntu@ip_address

를 입력하면 패스워드를 입력하고 로그인 가능!

const used = process.memoryUsage();
console.log(`메모리 사용량: ${Math.round(used.rss / 1024 / 1024)}MB`);

main.ts에 해당 코드를 작성 후 사용 메모리를 봤는데 123mb로 512mb보다 한참 떨어지는데 왜 저런 오류가 날까 해서 구글링 해보니 일단 build하는 과정 중에 node.js에서 사용할 수 있는 메모리양을 넘어서 그렇다는 이유, 또 t2.micro는 사용할 수 있는 기본 용량이 1gb라 swap메모리를 사용해야 한다 하여 둘 다 적용하였음

$ node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'
-> 499.25

500mb를 2048mb로 늘려주고

$ export NODE_OPTIONS=--max_old_space_size=2048

dd if=/dev/zero of=/swap-file bs=1k count=2048000

swapfile을 생성해주고 dd : 크기를 가진 파일을 만드는 명령 if : 초기화할 때 사용하는 장치 파일명 of : 생성할 파일명 bs : 블록크기 지정 (단위없을 경우 : 바이트 처리) count : bs에 설정한 블록의 개수 -> 위 명령어대로라면, 현재위치에 swap-file이라는 이름의 2GB를 가진 파일이 하나 만들어진다.

읽기쓰기 권한 설정을 해줌

sudo chmod 600 /swapfile

swap-file을 저장할 공간을 생성해주고

sudo mkswap /swapfile
// vi에디터를 열어 줌
sudo vi /etc/fstab
// 파일의 맨 끝 다음줄에 아래의 명령어를 작성하여 ec2 서버가 꺼져도 활성화 될 수 있도록 함
/swapfile swap swap defaults 0 0

ubuntu에서 정상적으로 build가 되고 있으나 git action에서 같은 오류가 발생하였음

name : Build and Deploy to EC2

on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]

jobs:
  AUTO_DEPLOY:
    runs-on: ubuntu-latest

    steps:
      - name: Check out code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Run scripts in server
        uses: appleboy/ssh-action@master
        with:
          host: ${{secrets.HOST }}
          username: ${{secrets.USERNAME }}
          password: ${{secrets.PASSWORD }}
          port: ${{secrets.PORT }}
          timeout: 40s
          script: ${{secrets.SCRIPT }}

// 워크스페이스에 업로드된 모든 파일 조회
  async getAllFiles(workspaceId: number): Promise<File[]> {
    const workspace = await this.workspaceRepository
      .createQueryBuilder('workspace')
      .innerJoinAndSelect('workspace.boards', 'boards')
      .innerJoinAndSelect('boards.board_columns', 'board_columns')
      .innerJoinAndSelect('board_columns.cards', 'cards')
      .where('workspace.id = :workspaceId', { workspaceId })
      .select([
        'cards.id',
        'cards.file_original_name',
        'cards.file_url',
        'cards.file_size',
        'cards.created_at',
        'cards.updated_at',
      ])
      .getRawMany();
    return workspace;
  }

필요한 컬럼들을 선택해 준 뒤 프론트에서 요청 시 데이터가 넘어가는 지 확인 원하는 정보가 넘어온 것을 확인하고 하나의 카드에 여러개의 파일이 존재하는 경우도 있으므로 다음과 같이 코드를 작성

// 전체파일 조회
async function getAllFiles() {
  try {
    await $.ajax({
      method: 'GET',
      url: `/workspaces/${workspaceId}/getFiles`,
      beforeSend: function (xhr) {
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.setRequestHeader('authorization', `Bearer ${accessToken}`);
      },
      success: async (data) => {
        let result = '';
        data.forEach((file) => {
          const fileOriginalName = file.cards_file_original_name;
          const fileUrl = file.cards_file_url;
          const fileSize = file.cards_file_size;
          let fileNames = [];
          let fileSizes = [];
          let fileUrls = [];

          if (typeof fileOriginalName === 'string') {
            try {
              fileNames = JSON.parse(fileOriginalName);
            } catch (err) {
              fileNames = [fileOriginalName];
            }
          } else {
            fileNames = fileOriginalName;
          }

          if (typeof fileSize === 'string') {
            try {
              fileSizes = JSON.parse(fileSize);
            } catch (err) {
              fileSizes = [parseInt(fileSize)];
            }
          } else {
            fileSizes = fileSize;
          }

          if (typeof fileUrl === 'string') {
            try {
              fileUrls = JSON.parse(fileUrl);
            } catch (err) {
              fileUrls = [fileUrl];
            }
          } else {
            fileUrls = fileUrl;
          }

          if (Array.isArray(fileNames) && fileNames.length > 0) {
            for (let i = 0; i < fileNames.length; i++) {
              const fileName = fileNames[i];
              const fileUrl = fileUrls[i];
              const imgSrc = getImgSource(fileName);
              const fileSize = getFileSize(fileSizes[i]);

              result += printFilesHtml(fileName, imgSrc, fileSize, fileUrl);
            }
          } else if (typeof fileOriginalName === 'string') {
            const fileName = fileOriginalName.replace(/"/g, '');
            const fileSize = getFileSize(fileSizes);
            const fileUrl = fileUrls;
            const imgSrc = getImgSource(fileName);

            result += printFilesHtml(fileName, imgSrc, fileSize, fileUrl);
          }
        });

        const totalSize = getTotalFileSize(data);
        const storage = await printStorageSize(totalSize);

        printStorage.innerHTML = storage;
        printFiles.innerHTML = result;
      },
    });
  } catch (err) {
    console.error(err);
  }
}

배열이 문자열로 넘어오는 형태기때문에 문자열이라면 JSON형태로 파싱해주는 코드를 작성하고 파일의 아래 용량을 표현해주기위해 파일사이즈를 구하는 함수를 작성

// 파일 메가바이트로 변환
function getFileSize(fileSize) {
  const fileSizeInMb = fileSize / (1024 * 1024);
  return fileSizeInMb.toFixed(2);
}

확장자에 따라 붙여주는 이미지가 다르므로 확장자 구분 함수도 작성

// 파일의 확장자 분류
function getImgSource(fileName) {
  const extension = fileName.split('.').pop().toLowerCase();
  const fileExtension = extension.replace(/"/g, '');
  let imgSrc = '';

  switch (fileExtension) {
    case 'jpg':
    case 'jpeg':
      imgSrc = './assets/img/jpg@2x.png';
      break;
    case 'png':
      imgSrc = './assets/img/png@2x.png';
      break;
    case 'zip':
      imgSrc = './assets/img/zip@2x.png';
      break;
    case 'pdf':
      imgSrc = './assets/img/pdf@2x.png';
      break;
    case 'psd':
      imgSrc = './assets/img/psd@2x.png';
      break;
    default:
      imgSrc = './assets/img/document.png';
      break;
  }
  return imgSrc;
}

출력결과 중간의 []빈 파일은 카드 수정 시 파일을 변경하지 않으면 기존파일이 그대로 들어있어야 하는데 빈값으로 변경되는 현상이 있어서 수정필요

파일출력의 구현이 끝났으면 파일 용량을 계산해줘야 하므로 getAllFiles()로 불러왔던 파일사이즈를 활용하여 전쳬용량을 계산

// 파일 전체용량 계산
function getTotalFileSize(files) {
  let totalSize = 0;
  for (const file of files) {
    const fileSize = file.cards_file_size;

    if (typeof fileSize === 'string') {
      const sizes = JSON.parse(fileSize);
      if (Array.isArray(sizes)) {
        for (const size of sizes) {
          totalSize += parseInt(size, 10) || 0;
        }
      } else {
        totalSize += parseInt(sizes, 10) || 0;
      }
    } else if (typeof fileSize === 'number') {
      totalSize += fileSize;
    }
  }

  const totalSizeInMb = totalSize / (1024 * 1024);

  return totalSizeInMb.toFixed(2);
}

무료버전의 제한용량이 100mb이므로 mb단위로 변환, parseInt는 10진수로 고정을 해주고 여기서 합산된 사이즈를 printStorageSize()로 보내줌

// 워크스페이스 용량 조회
async function printStorageSize(totalSize) {
  try {
    const results = await $.ajax({
      method: 'GET',
      url: `/workspaces/${workspaceId}`,
      beforeSend: function (xhr) {
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.setRequestHeader('authorization', `Bearer ${accessToken}`);
      },
    });

    const { data } = results;
    const totalSizeInGb = (totalSize / 1024).toFixed(2);
    const usagePercentageGb = ((totalSizeInGb / 10) * 100).toFixed(0);
    const usagePercentageMb = ((totalSize / 100) * 100).toFixed(0);

    if (data.memberships.length) {
      return `<div class="user-group-progress-bar">
                    <p>워크스페이스 사용량</p>
                    <div class="progress-wrap d-flex align-items-center mb-0">
                      <div class="progress">
                        <div
                          class="progress-bar bg-success"
                          role="progressbar"
                          style="width: ${usagePercentageGb}%"
                          aria-valuenow="${usagePercentageGb}"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                      <span class="progress-percentage">${usagePercentageGb}%</span>
                    </div>
                    <span class="">10GB 중 ${totalSizeInGb}GB 사용</span>
                  </div>`;
    } else {
      return `<div class="user-group-progress-bar">
                    <p>워크스페이스 사용량</p>
                    <div class="progress-wrap d-flex align-items-center mb-0">
                      <div class="progress">
                        <div
                          class="progress-bar bg-success"
                          role="progressbar"
                          style="width: ${usagePercentageMb}&"
                          aria-valuenow="${usagePercentageMb}"
                          aria-valuemin="0"
                          aria-valuemax="100"
                        ></div>
                      </div>
                      <span class="progress-percentage">${usagePercentageMb}%</span>
                    </div>
                    <span class="">100MB 중 ${totalSize}MB 사용</span>
                  </div>`;
    }
  } catch (err) {
    console.error(err);
  }
}

멤버십을 가입한 워크스페이스라면 용량제한이 10gb이므로 gb로 사이즈를 변환해주고, 불러온 데이터 중 멤버십배열을 기준으로 있으면 10gb, 없으면 100mb로 html을 붙여줌

출력결과 무료버전인 경우

멤버십에 가입된 경우

OSI 7 계층은 네트워크 통신을 구성하는 요소들을 7개의 계층으로 표준화 한 것임 통신이 일어나는 과정을 단계별로 파악할 수 있어 문제 발생 시 해당 문제를 해결하기 좋음

• 7 계층 (Application Layer, 응용 계층) : 사용자에게 통신을 위한 서비스 제공, 인터페이스 역할
• 6 계층 (Presentation Layer, 표현 계층) : 데이터의 형식을 정의하는 계층 (코드 간의 번역 담당)
• 5 계층 (Session Layer, 세션 계층) : 컴퓨터끼리 통신을 하기 위해 세션을 만드는 계층
• 4 계층 (Transport Layer, 전송 계층) : 프로그램과 프로그램의 연결, 최종 수신 프로세스로 데이터의 전송을 담당하는 계층(단위 : Segment, ex. TCP, UDP)
• 3 계층 (Network Layer, 네트워크 계층) : 패킷을 목적지까지 가장 빠른 길로 전송하기위한 계층 (단위 : Packet, ex. Router ICMP IP APR)
• 2 계층 (Datalink Layer, 데이터링크 계층) : 데이터의 물리적인 전송과 에러 검출, 흐름 제어를 담당하는 계층 (단위 : Frame, ex. 이더넷, mac)
• 1 계층 (Physical Layer, 물리 계층) : 데이터를 전기 신호로 바꿔주는 계층 (단위 : bit, 장비 : 케이블, 리피터, 허브)

세션 기반 인증 vs 토큰 기반 인증

세션 기반 인증은 클라이언트로부터 요청을 받으면 클라이언트의 상태 정보를 저장하므로 Stateful한 구조를 가지고, 토큰 기반 인증은 상태 정보를 서버에 저장하지 않으므로 Stateless한 구조를 가짐.

세션의 경우 Cookie 헤더에 세션ID만 실어 보내면 되므로 트래픽을 적게 사용하지만 JWT는 사용자 인증 정보와 토큰의 발급, 만료시작, 토큰의 ID등 담겨있는 정보가 세션보다 많아 훨씬 더 많은 트래픽을 사용함.

세션의 경우 모든 인증 정보를 서버에서 관리하기 때문에 토큰 보다 보안 측면에서 조금 더 유리함. JWT의 특성상 토큰에 실린 Payload가 별도로 암호화 되어있지 않으므로 누구나 내용을 확인할 수 있고 토큰이 한 번 탈취되면 해당 토큰이 만료되기 전까지는 피해를 입을 수 밖에 없음.

그러나 세션에 비해 토큰 기반 인증은 확장성이 높음. 일반적으로 웹 어플리케이션의 서버 확장 방식은 수평 확장을 사용함. 즉, 한 대가 아닌 여러대의 서버가 요청을 처리하게 되는데, 이 때 별도의 작업을 해주지 않는다면, 세션 기반 인증 방식은 세션 불일치 문제를 겪게 됨. 하지만 토큰 기반 인증 방식의 경우 클라이언트가 저장하는 방식을 취하기 때문에 이런 문제로부터 자유로움.

마지막으로 세션 기반 인증 방식은 서비스가 세션 데이터를 직접 저장하고, 관리함. 따라서 세션 데이터의 양이 많아지면 많아질수록 서버의 부담이 증가.

// audit-log.entity.ts
import { Column, CreateDateColumn, Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
import { User } from './user.entitiy';
import { Workspace } from './workspace.entity';
import ActionType from '../utils/action-type';

@Entity('audit_logs')
export class Audit_log {
  @PrimaryGeneratedColumn({ type: 'bigint' })
  id: number;

  @Column({ type: 'enum', enum: ActionType, nullable: false })
  actions: ActionType;

  @Column({ nullable: false })
  details: string;

  @CreateDateColumn()
  created_at: Date;

  @ManyToOne(() => User, (user) => user.audit_logs)
  user: User;

  @ManyToOne(() => Workspace, (workspace) => workspace.audit_logs, {
    onDelete: 'CASCADE',
    nullable: false,
  })
  workspace: Workspace;
}

초반에는 board, boardColumn, card도 관계설정을 해뒀다. 어떤 부분에서 이벤트가 발생하는지 출력을 해주기 위함이였는데 다시 생각해보니 워크스페이스 디테일에 들어가는 로그기 때문에, 어떤 유저와 어떤 워크스페이스에서 이벤트가 발생했는지만 출력해주면 될 것 같다고 판단되어 변경하였음

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Audit_log } from 'src/_common/entities/audit-log.entity';
import ActionType from 'src/_common/utils/action-type';
import { Repository } from 'typeorm';

@Injectable()
export class AuditLogsService {
  constructor(
    @InjectRepository(Audit_log)
    private auditLogRepository: Repository<Audit_log>
  ) {}

  async inviteMemberLog(
    workspaceId: number,
    inviterUserId: number,
    inviterUserName: string,
    invitedUserName: string
  ): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: inviterUserId },
      actions: ActionType.INVITE,
      details: `멤버 초대 - ${inviterUserName}님이 ${invitedUserName}님을 워크스페이스에 초대하였습니다. `,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async deleteMemberLog(
    workspaceId: number,
    userId: number,
    userName: string,
    deletedUser: string
  ): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.DELETE,
      details: `멤버 삭제 - ${userName}님이 ${deletedUser}님을 워크스페이스에서 내보냈습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async roleChangeLog(
    workspaceId: number,
    userId: number,
    userName: string,
    targetUser: string,
    role: string
  ): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.ROLE_CHANGE,
      details: `역할 변경 - ${userName}님이 ${targetUser}님의 역할을 ${role}로 변경했습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async createBoardLog(workspaceId: number, boardName: string, userId: number, userName: string): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.CREATE,
      details: `보드 생성 - ${userName}님이 ${boardName} 보드를 생성하였습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async updateBoardLog(
    workspaceId: number,
    beforeBoardName: string,
    afterBoardName: string,
    userId: number,
    userName: string
  ): Promise<Audit_log> {
    if (beforeBoardName === afterBoardName) {
      const newLog = this.auditLogRepository.create({
        workspace: { id: workspaceId },
        user: { id: userId },
        actions: ActionType.UPDATE,
        details: `보드 수정 - ${userName}님이 ${beforeBoardName} 보드를 수정하였습니다.`,
      });

      return await this.auditLogRepository.save(newLog);
    } else {
      const newLog = this.auditLogRepository.create({
        workspace: { id: workspaceId },
        user: { id: userId },
        actions: ActionType.UPDATE,
        details: `보드 수정 - ${userName}님이 ${beforeBoardName} 보드를 ${afterBoardName} 보드로 수정하였습니다.`,
      });

      return await this.auditLogRepository.save(newLog);
    }
  }

  async deleteBoardLog(workspaceId: number, boardName: string, userId: number, userName: string): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.DELETE,
      details: `보드 삭제 - ${userName}님이 ${boardName} 보드를 삭제하였습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async createColumnLog(workspaceId: number, columnName: string, userId: number, userName: string): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.CREATE,
      details: `컬럼 생성 - ${userName}님이 ${columnName} 컬럼을 생성하였습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async updateColumnLog(
    workspaceId: number,
    beforeColumnName: string,
    afterColumnName: string,
    userId: number,
    userName: string
  ): Promise<Audit_log> {
    if (beforeColumnName === afterColumnName) {
      const newLog = this.auditLogRepository.create({
        workspace: { id: workspaceId },
        user: { id: userId },
        actions: ActionType.UPDATE,
        details: `컬럼 수정 - ${userName}님이 ${beforeColumnName} 컬럼을 수정하였습니다.`,
      });

      return await this.auditLogRepository.save(newLog);
    } else {
      const newLog = this.auditLogRepository.create({
        workspace: { id: workspaceId },
        user: { id: userId },
        actions: ActionType.UPDATE,
        details: `컬럼 수정 - ${userName}님이 ${beforeColumnName} 컬럼을 ${afterColumnName} 컬럼으로 수정하였습니다.`,
      });

      return await this.auditLogRepository.save(newLog);
    }
  }

  async deleteColumnLog(workspaceId: number, columnName: string, userId: number, userName: string): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.DELETE,
      details: `컬럼 삭제 - ${userName}님이 ${columnName} 컬럼을 삭제하였습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async createCardLog(workspaceId: number, cardName: string, userId: number, userName: string): Promise<Audit_log> {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.CREATE,
      details: `카드 생성 - ${userName}님이 ${cardName} 카드를 생성하였습니다.`,
    });

    return await this.auditLogRepository.save(newLog);
  }

  async updateCardLog(
    workspaceId: number,
    beforeCardName: string,
    afterCardName: string,
    userId: number,
    userName: string
  ) {
    if (beforeCardName === afterCardName) {
      const newLog = this.auditLogRepository.create({
        workspace: { id: workspaceId },
        user: { id: userId },
        actions: ActionType.UPDATE,
        details: `카드 수정 - ${userName}님이 ${beforeCardName} 카드를 수정하였습니다.`,
      });

      return await this.auditLogRepository.save(newLog);
    } else {
      const newLog = this.auditLogRepository.create({
        workspace: { id: workspaceId },
        user: { id: userId },
        actions: ActionType.UPDATE,
        details: `카드 수정 - ${userName}님이 ${beforeCardName} 카드를 ${afterCardName} 카드로 수정하였습니다.`,
      });

      return await this.auditLogRepository.save(newLog);
    }
  }

  async deleteCardLog(workspaceId: number, cardName: string, userId: number, userName: string) {
    const newLog = this.auditLogRepository.create({
      workspace: { id: workspaceId },
      user: { id: userId },
      actions: ActionType.DELETE,
      details: `카드 수정 - ${userName}님이 ${cardName} 카드를 삭제하였습니다.`,
    });
    return await this.auditLogRepository.save(newLog);
  }
}

다소 반복되는감이 없지 않아 있긴 하지만 각 이벤트별로 출력될 로그들을 미리 작성해두고 테스트

//workspace.service.ts

  // 멤버 권한 변경
  async setMemberRole(
    body: SetRoleDto,
    workspaceId: number,
    userId: number,
    loginUserName: string,
    loginUserId: number
  ): Promise<IResult> {
    const existMember = await this.workspaceMemberRepository.findOne({
      where: { workspace: { id: workspaceId }, user: { id: userId } },
      relations: ['user'],
    });
    const loginUserRole = await this.loginUserRole(loginUserId, workspaceId);

    if (!existMember) throw new HttpException('해당 멤버가 존재하지 않습니다.', HttpStatus.NOT_FOUND);

    if (loginUserRole / 1 >= existMember.role)
      throw new HttpException('관리자 또는 어드민 계정은 역할 변경이 불가합니다.', HttpStatus.BAD_REQUEST);

    await this.workspaceMemberRepository.update(
      { user: { id: userId }, workspace: { id: workspaceId } },
      { role: body.role }
    );

    let role = '';
    if (body.role === 2) role = 'Manager';
    if (body.role === 3) role = 'Member';
    if (body.role === 4) role = 'OutSourcing';

    await this.auditLogService.roleChangeLog(workspaceId, userId, loginUserName, existMember.user.name, role);

    return { result: true };
  }

멤버권한 변경하는 코드의 하단부에 roleChangeLog 메서드를 추가해준 뒤 실행해보면

2번 유저가 15번 워크스페이스에서 만든 이벤트가 audit_log 테이블에 잘 쌓이고 있는 것을 확인.

이것을 이제 프론트에 연결해주는 작업 및 socket도 연결하여 실시간으로 이벤트가 발생할때마다 접속해있는 인원도 확인할 수 있게 만들면 마무리 될 것 같음!

참고블로그 https://limjunho.github.io/2021/06/22/traffic-handling.html

 //보드 생성
  async CreateBoard(workspaceId: number, name: string, description: string): Promise<Object> {
    const workspace = await this.workspaceService.getWorkspaceDetail(workspaceId);
    console.log(workspace);
    const boardCount = await this.GetBoards(workspaceId);
    const hasMembership = workspace.memberships.length > 0;

    if (boardCount.length >= 3 && !hasMembership)
      throw new HttpException('무료 워크스페이스는 보드를 3개까지만 생성할 수 있습니다.', HttpStatus.BAD_REQUEST);

    const board = await this.boardRepository.insert({ name, description, workspace });
    const findBoard = await this.boardRepository.findOneBy({ id: board.raw.insertId });
    await this.boardColumnRepository.insert({ name: 'Done', sequence: 1, board: findBoard });
    return board;
  }

워크스페이스가 멤버십을 가지고 있는지 확인 후, 멤버십이 없고 보드의 개수가 3개 이상이라면 오류 출력

마찬가지로 워크스페이스 멤버초대 로직도 수정

// 워크스페이스 멤버초대
  async inviteWorkspaceMember(body: InvitationDto, workspaceId: number, userName: string): Promise<IResult> {
    const existWorkspace = await this.workspaceRepository.findOne({
      where: { id: workspaceId },
      relations: ['memberships'],
    });
    const hasMembership = existWorkspace.memberships.length > 0;
    const entityManager = this.workspaceRepository.manager;

    if (!existWorkspace) throw new HttpException('해당 워크스페이스가 존재하지 않습니다.', HttpStatus.NOT_FOUND);

    const { id } = await this.userService.findUserByEmail(body.email);

    const existMember = await this.workspaceMemberRepository.findOne({
      where: { user: { id }, workspace: { id: workspaceId } },
    });

    const countMember = await this.workspaceMemberRepository.find({ where: { workspace: { id: workspaceId } } });

    if (countMember.length >= 5 && !hasMembership)
      throw new HttpException('무료 워크스페이스는 멤버를 5명까지만 초대 가능합니다.', HttpStatus.UNAUTHORIZED);

    if (existMember) throw new HttpException('이미 초대된 유저입니다.', HttpStatus.CONFLICT);
    try {
      await entityManager.transaction(async (transactionEntityManager: EntityManager) => {
        await this.mailService.inviteProjectMail(body.email, userName, existWorkspace.name, workspaceId);

        await transactionEntityManager.save(Workspace_Member, {
          workspace: { id: workspaceId },
          user: { id },
          role: body.role,
        });
      });
      return { result: true };
    } catch (err) {
      console.error(err);
    }
  }

같은 방식으로 멤버십이 없고 멤버가 이미 5명이상 초대되어 있다면 오류를 출력

출력 결과 정상작동 확인

payment 컬럼의 status를 활용하여 true인 경우에만 push를 할 수 있도록 변경

const paymentHistory = [];
    for (const payment of payments) {
      const workspaceId = payment.workspaceId;
      const status = payment.status;
      const workspace = await this.workspaceService.getWorkspaceDetail(workspaceId);

      if (workspace.memberships.length > 0 && status === true) {
        const membership = workspace.memberships[0];
        const paymentInfo = {
          paymentId: payment.id,
          paymentCreatedAt: payment.created_at,
          workspaceId,
          workspaceName: workspace.name,
          membershipCreatedAt: membership.created_at,
          membershipEndDate: membership.end_date,
          membershipPrice: membership.package_price,
        };
        paymentHistory.push(paymentInfo);
      } else {
        const paymentInfo = {
          paymentId: payment.id,
          paymentCreatedAt: payment.created_at,
          workspaceId,
          workspaceName: workspace.name,
        };
        paymentHistory.push(paymentInfo);
      }
    }
    return paymentHistory;

true가 아닐 경우 취소된 결제 내역이므로 membership의 정보를 담지 않음, 프론트에서는 멤버십의 생성정보가 없을 경우 모두 취소된 결제로 볼 수 있도록 아래와 같이 코드를 작성

          const paymentDate = new Date(history.paymentCreatedAt);
          if (paymentDate >= oneMonthAgo && paymentDate <= currentDate) {
            if (!history.membershipCreatedAt) {
              result += ` <tbody>
                            <tr>
                              <td data-workspace-id="${history.workspaceId}" id="workspace-name-table">${history.workspaceName}</td>
                              <td>취소된 결제입니다.</td>
                              <td>-</td>
                              <td>`;

출력 결과

추가로 한달 이내의 결제 내역만 출력되도록 설정 52번 paymentId가 취소된 워크스페이스 결제이며 payment 생성날짜를 한달 이전으로 세팅하면 결제내역에 출력되지 않는 것을 확인

추가로 아직 테스트하지 못한 내용이지만 멤버십을 이용 후 다시 결제하지 않는 경우가 있을수도 있으므로 node schedule을 사용하여 멤버십의 endDate를 확인하고 현재날짜 이전이라면 삭제하는 코드를 작성

  @Cron('0 0 * * *')
  async deleteExpiredMembership(): Promise<IResult> {
    return await this.membershipService.deleteExpiredMembership();
  }

  // 만료된 멤버십 삭제
  async deleteExpiredMembership(): Promise<IResult> {
    const expiredMembership = await this.membershipRepository.find({
      where: {
        end_date: LessThan(new Date()),
      },
    });
    await this.membershipRepository.remove(expiredMembership);
    return { result: true };
  }

생성과 마찬가지로 트랜잭션을 생성, 취소하려는 결제와 멤버십을 조회하고 해당 멤버십의 남은 기간을 계산해줌 남은 기간에 일할계산 된 금액을 곱하고 환불금액을 유저포인트에 다시 넣어준 뒤 커밋

• 멤버십 가입 후 취소 테스트

  console.log(remainingDays); // 179
  console.log(dailyPrice); // 173
  console.log(refundPrice); // 30967
  console.log(roundedRefundPrice); // 30900

  금액이 정확히 일치하진 않지만 정상적으로 환불되는 것을 확인

  // 멤버십 취소
  async cancelMembership(workspaceId: number): Promise<IResult> {
    const targetMembership = await this.membershipRepository.findOne({ where: { workspace: { id: workspaceId } } });

    if (!targetMembership) throw new HttpException('결제된 멤버십이 없습니다.', HttpStatus.NOT_FOUND);

    await this.membershipRepository.remove(targetMembership);

    return { result: true };
  }

결제내역 조회를 위해 payment는 status만 false로 바꿔주고 삭제하지 않음

  // 나의 결제내역 조회
  async getMyPayments(userId: number): Promise<Payment[]> {
    const payments = await this.paymentRepository.find({ where: { user: { id: userId } }, relations: ['user'] });
    const paymentHistory = [];
    for (const payment of payments) {
      const workspaceId = payment.workspaceId;
      const workspace = await this.workspaceService.getWorkspaceDetail(workspaceId);

      if (workspace.memberships.length > 0) {
        const membership = workspace.memberships[0];
        const paymentInfo = {
          paymentId: payment.id,
          paymentCreatedAt: payment.created_at,
          workspaceId,
          workspaceName: workspace.name,
          membershipCreatedAt: membership.created_at,
          membershipEndDate: membership.end_date,
          membershipPrice: membership.package_price,
        };
        paymentHistory.push(paymentInfo);
      } else {
        const paymentInfo = {
          paymentId: payment.id,
          paymentCreatedAt: payment.created_at,
          workspaceId,
          workspaceName: workspace.name,
        };
        paymentHistory.push(paymentInfo);
      }
    }
    return paymentHistory;
  }

paymentHistory 빈배열을 만들고 워크스페이스에 멤버십이 있다면 멤버십의 정보를 출력해주고 아니라면 취소된 결제라 판단

** 발생한 문제 ** 취소된 결제가 존재할 때 새로운 멤버십을 결제하는 경우 아래 취소되었던 멤버십도 같이 활성화되는 문제를 발견

  // 멤버십 결제
  async purchaseMembership(body: MembershipDto, workspaceId: number, userId: number): Promise<IResult> {
    const entityManager = this.paymentRepository.manager;

    await entityManager.transaction(async (transactionEntityManager: EntityManager) => {
      const findUserById = await this.userService.findUserById(userId);

      if (findUserById.points < body.packagePrice)
        throw new HttpException('포인트가 부족합니다', HttpStatus.BAD_REQUEST);
      findUserById.points -= body.packagePrice;
      await transactionEntityManager.save(findUserById);

      const newPayment = this.paymentRepository.create({
        workspaceId,
        user: { id: userId },
      });
      await transactionEntityManager.save(newPayment);
      await this.membershipService.createMembership(body, workspaceId);
    });

    return { result: true };
  }

entityManager를 사용하여 트랜잭션을 걸어줌. 우선 현재 접속중인 유저의 포인트를 조회한 뒤 결제에 문제가 없다면 새로운 payment를 생성해주고 멤버십을 생성

  // 멤버십 생성
  async createMembership(body: MembershipDto, workspaceId: number): Promise<IResult> {
    const startDate = new Date();
    const servicePeriod = body.servicePeriod * 24 * 60 * 60 * 1000;
    const endDate = new Date(startDate.getTime() + servicePeriod);

    const existMembership = await this.membershipRepository.findOne({ where: { workspace: { id: workspaceId } } });
    if (existMembership) throw new HttpException('이미 멤버십 결제가 되어있습니다.', HttpStatus.CONFLICT);

    const newMembership = this.membershipRepository.create({
      package_type: body.packageType,
      package_price: body.packagePrice,
      end_date: endDate,
      workspace: { id: workspaceId },
    });

    await this.membershipRepository.save(newMembership);

    return { result: true };
  }

이용기간은 body값으로 30일 또는 180일만 들어오게 되어있고 시작일에 해당 body값의 기간을 더해주어 끝나는 날짜를 계산 후 생성

멤버십은 워크스페이스 단위로 적용되기 때문에 결제의 경우 member role이 Admin일 경우에만 가능하게 구현

 // 결제
  @Post()
  @UseGuards(AuthGuard)
  @UseInterceptors(CheckAdminInterceptor)
  async purchaseMembership(
    @Body() body: MembershipDto,
    @Param('workspaceId') workspaceId: number,
    @GetUser() user: AccessPayload
  ): Promise<IResult> {
    return await this.paymentService.purchaseMembership(body, workspaceId, user.id);
  }

membe role이 Admin인지 체크하는 interceptor를 만들어서 해당 api가 실행될 때 검사

socket.on('welcome', async (roomName) => {
  try {
    makeConnection(roomName);
    myDataChannel = myPeerConnection.createDataChannel('chat');
    myDataChannel.addEventListener('message', addMessage);

    const offer = await myPeerConnection.createOffer();
    myPeerConnection.setLocalDescription(offer);
    socket.emit('sendOffer', { offer, roomName });
  } catch (err) {
    console.log(err);
  }
});

function handleIce(data, roomName) {
  socket.emit('sendIce', { data: data.candidate, roomName });
  console.log('send ice');
}

function handleAddStream(data) {
  try {
    console.log('스트림', myPeerConnection);
    const peerVideo = document.querySelector('#peer-video');
    const peerStream = data.streams[0];
    peerVideo.srcObject = peerStream;
    console.log('peer와 스트림 연결');
    console.log('peers', data);
    console.log('peers', peerVideo.srcObject);
    console.log('my', myStream);
  } catch (err) {
    console.error(err);
  }
}

function makeConnection(roomName) {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: [
          'stun:stun.l.google.com:19302',
          'stun:stun1.l.google.com:19302',
          'stun:stun2.l.google.com:19302',
          'stun:stun3.l.google.com:19302',
          'stun:stun4.l.google.com:19302',
        ],
      },
    ],
  });
  myPeerConnection.addEventListener('icecandidate', (event) => {
    console.log('아이스 이벤트 발생');
    if (event.candidate) {
      handleIce(event.candidate, roomName);
    }
  });
  myPeerConnection.addEventListener('track', handleAddStream);
  myStream.getTracks().forEach((track) => myPeerConnection.addTrack(track, myStream));
}

스트림을 추가할 때 원래는 addStream을 사용했으나 더이상 사용하지 않는 방법으로 권장하지 않는다고하여 track으로 변경하여 사용

송신자가 offer를 전송하면 수신자는 해당 offer의 SDP를 바탕으로 Answer를 작성하고 송신자에게 전달

socket.on('receiveOffer', async (offer) => {
  const remoteOffer = new RTCSessionDescription({
    type: 'offer',
    sdp: offer.payload.sdp,
  });
  if (myPeerConnection.signalingState === 'stable') {
    try {
      await myPeerConnection.setRemoteDescription(remoteOffer);

      const answer = await myPeerConnection.createAnswer();
      await myPeerConnection.setLocalDescription(answer);
      socket.emit('sendAnswer', { answer, roomName: offer.roomName });
    } catch (error) {
      console.error('SDP 파싱 오류', error);
    }
  } else {
    console.log('stable 상태가 아님');
  }
});

수신자의 mediaStream이 된것으로 보이지만 화면 출력이 진행되지 않는 문제가 발생

동영상이 로드 되고있지 않는 문제가 있어 코드를 다시 한번 살펴보았는데

두 브라우저간 연결이 잘 되었다면 connectionState와 iceConnetionState가 "connected"로 변경되어야하는데 현재 상태를 보니 연결이 되지 않은 것으로 보임

socket.on('welcome', async (roomName) => {
  try {
    makeConnection(roomName);
    myDataChannel = myPeerConnection.createDataChannel('chat');
    myDataChannel.addEventListener('message', addMessage);

    const offer = await myPeerConnection.createOffer();
    myPeerConnection.setLocalDescription(offer);
    socket.emit('sendOffer', { offer, roomName });
  } catch (err) {
    console.log(err);
  }
});

이쪽 코드를 console로 찍어보니 offer를 peer A 즉 송신자가 peer B 수신자에게 보내야 하는데 둘 다 offer를 보내고 있음 -> 아직 명확하게 개념이 잡히지 않아 이 부분이 문제인가 싶기도 함

프로젝트 마감기한이 얼마 남지 않아 멤버십과 결제 기능을 먼저 도입해야 하므로 추후 다시 해결해 볼 예정

// 음성 통화 시작
function startVoiceCall(element) {
  const receiverId = element.getAttribute('id');
  const receiverName = element.getAttribute('name');
  console.log('Starting voice call...');
  voiceCall(`/call?callerName=${userName}&receiverName=${receiverName}`, '음성 통화', receiverId, receiverName);
}

async function voiceCall(url, callType, receiverId, receiverName) {
  const width = 800;
  const height = 900;
  const left = (window.screen.width - width) / 2;
  const top = (window.screen.height - height) / 2;
  window.open(url, callType, `width=${width},height=${height},left=${left},top=${top}`);
  socket.emit('invite', { callerName: userName, callerId, receiverId, receiverName });
}

function startVideoCall(element) {
  const receiverId = element.getAttribute('id');
  const receiverName = element.getAttribute('name');
  console.log('Starting video call...');
  videoCall(`/call?callerName=${userName}&receiverName=${receiverName}`, '영상 통화', receiverId, receiverName);
}

async function videoCall(url, callType, receiverId, receiverName) {
  const width = 800;
  const height = 900;
  const left = (window.screen.width - width) / 2;
  const top = (window.screen.height - height) / 2;
  window.open(url, callType, `width=${width},height=${height},left=${left},top=${top}`);
  socket.emit('invite', { callerName: userName, callerId, receiverId, receiverName });
}

• 송신자가 먼저 음성/영상 통화를 걸고 수신자가 수락을 하면 통화가 시작되는 구조로 코드를 구성하였음

  @SubscribeMessage('invite')
  handleInvite(client: Socket, data: any): void {
    let user = [];
    for (let key in this.connectedClients) {
      if (this.connectedClients[key] === data.receiverId / 1) user.push(key);
    }
    user.forEach((sock) => {
      this.server.to(sock).emit('response', {
        callerId: client.id,
        callerName: data.callerName,
        receiverId: data.receiverId,
        receiverName: data.receiverName,
      });
    });
  }

invite를 보낼때 receiverId의 socket.id값을 추출하여 response를 보냄

socket.on('response', (data) => {
  responseAlert(data.callerName, data.receiverName);
});

function responseAlert(callerName, receiverName) {
  const messageHtml = `${callerName}님이 대화에 초대했습니다. <br />
  <button type="button" class="accept" data-dismiss="alert" aria-label="accpet">수락</button>
  <button type="button" class="refuse" data-dismiss="alert" aria-label="refuse">거절</button>
  <span aria-hidden="true"></span>`;

  const alt = document.getElementById('customerAlert');
  if (alt) {
    alt.innerHTML = messageHtml;
  } else {
    const htmlTemp = `<div class="alert alert-sparta alert-dismissible show fade" role="alert" id="customerAlert">${messageHtml}</div>`;
    document.body.insertAdjacentHTML('beforeend', htmlTemp);
  }

  const acceptBtn = document.querySelector('.accept');
  const refuseBtn = document.querySelector('.refuse');

  acceptBtn.addEventListener('click', () => {
    acceptCall(callerName, receiverName);
    acceptBtn.style.display = 'none';
    refuseBtn.style.display = 'none';
  });

  refuseBtn.addEventListener('click', () => {
    refuseBtn.style.display = 'none';
    acceptBtn.style.display = 'none';
  });

  setTimeout(() => {
    refuseBtn.style.display = 'none';
    acceptBtn.style.display = 'none';
  }, 60000);
}

// 응답 버튼을 누를 때 호출되는 함수
function acceptCall(callerName, receiverName) {
  const width = 800;
  const height = 900;
  const left = (window.screen.width - width) / 2;
  const top = (window.screen.height - height) / 2;

  // 새 창을 열어서 WebRTC 연결을 설정
  const callWindow = window.open(
    `/call?callerName=${callerName}&receiverName=${receiverName}`,
    `width=${width},height=${height},left=${left},top=${top}`
  );
  callWindow.onload = () => {};
}

const params = new URLSearchParams(window.location.search);
let callerName = params.get('callerName');
let receiverName = params.get('receiverName');

socket.on('connect', async () => {
  await initCall();
  socket.emit('joinRoom', { callerName, receiverName });
  console.log('Web-RTC 소켓 연결');
});

• 새 창을 열 때 파라미터로 송수신자의 이름을 넣어주었고 해당 값을 추출하여 수신자가 수락을 누르면 양쪽 다 room에 입장

수락 창을 누르면 좌측과 같은 창이 오픈되며 setTimeout을 설정하여 60초이내 수락 또는 거절을 하지않으면 사라지게 구성

HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청과 응답데이터를 전송하는 방식을 말한다.

주요 메서드 - GET : 리소스 조회 서버에 전달하고 싶은 데이터는 query를 통해서 전달함. 메시지 바디를 사용하여 데이터를 전달할 수는 있지만, 지원하지 않는 곳이 많아 권장하지 않음. POST도 조회가 가능하지만, GET 메서드는 캐싱이 가능하기에 유리 - POST : 요청 데이터 처리, 주로 등록에 사용 메시지 바디를 통해 서버로 요청 데이터를 전달하면 서버는 요청 데이터를 처리하여 업데이트. 만일 데이터를 GET하는데 있어, JSON으로 조회데이터를 넘겨야 하는 애매한 경우 POST를 사용 - PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없다면 생성 - PATCH : 리소스 부분 변경 (PUT = 전체, PATCH = 일부) PATCH를 지원하지 않는 서버에서는 POST로 대체 가능 - DELETE : 리소스 삭제 상태코드는 대부분 200을 사용하고 상황에 따라 204를 사용

기타 메서드 - HEAD : GET과 동일하지만 메세지 부분(body)를 제외하고 상태 줄과 헤더만 반환 응답의 상태 코드만 확인할때와 같이 Resource를 받지 않고 오직 찾기만 원할때 사용 (일종의 검사 용도) 서버의 응답 헤더를 봄으로써 Resource가 수정 되었는지 확인 가능 - OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명 (주로 CORS에서 사용) 서버의 지원 가능한 HTTP 메서드와 출처를 응답 받아 CORS 정책Visit Website을 검사하기 위한 요청 - CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정 - TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 서버에 도달 했을 때의 최종 패킷의 요청 패킷 내용을 응답 받을 수 있다. 요청의 최종 수신자는 반드시 송신자에게 200(OK) 응답의 내용(Body)로 수신한 메세지를 반송해야 한다. 최초 Client의 요청에는 Body가 포함될수 없다.

HTTP 메서드의 속성

• 안전

• 계속해서 메서드를 호출해도 리소스를 변경하지 않는다는 의미. (GET)

• 멱등

• 메서드를 계속 호출해도 결과가 똑같다는 의미, GET·PUT·DELETE는 멱등하다고 볼 수 있지만 POST나 PATCH는 볼 수 없음

• 캐시가능

• 데이터를 효율적으로 가져올 수 있다는 의미. GET, HEAD, POST, PATCH가 캐시가 가능하지만 실제로는 GET과 HEAD만 주로 캐싱이 쓰임

참고

• https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%A2%85%EB%A5%98-%ED%86%B5%EC%8B%A0-%EA%B3%BC%EC%A0%95-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC

• https://velog.io/@haron/HTTP-%EB%A9%94%EC%84%9C%EB%93%9C%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%84%EB%8A%94%EB%8C%80%EB%A1%9C-%EB%A7%90%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94

Error: Cannot find alias for relation at workspace
    at UpdateQueryBuilder.findColumnsForPropertyPath (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\query-builder\QueryBuilder.ts:1305:27)
    at UpdateQueryBuilder.getPredicates (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\query-builder\QueryBuilder.ts:1454:26)
    at getPredicates.next (<anonymous>)
    at UpdateQueryBuilder.getWhereCondition (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\query-builder\QueryBuilder.ts:1621:50)
    at UpdateQueryBuilder.where (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\query-builder\UpdateQueryBuilder.ts:224:32)
    at EntityManager.update (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\entity-manager\EntityManager.ts:790:18)
    at Repository.update (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\repository\Repository.ts:361:29)
    at MembershipsService.extensionMembership (C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\memberships\memberships.service.ts:63:37)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at C:\Users\dltkd\OneDrive\바탕 화면\개발 공부\workflow-service\src\payments\payments.service.ts:64:9

해결방법

• OneToOne으로 관계 설정 시 FK를 관리하지 않는 테이블에서는 참조하는 테이블의 id값 컬럼이 생성되지 않는 것을 확인 (이유는 튜터님에게 확인해봐야 할 듯)

  // 멤버십 연장
  async extensionMembership(body: MembershipDto, workspaceId: number): Promise<IResult> {
    const targetMembership = await this.membershipRepository.findOne({ where: { workspace: { id: workspaceId } } });
    const servicePeriod = body.servicePeriod * 24 * 60 * 60 * 1000;
    const newEndDate = new Date(targetMembership.end_date.getTime() + servicePeriod);
  
    if (!targetMembership) throw new HttpException('결제된 멤버십이 없습니다.', HttpStatus.NOT_FOUND);
  
    await this.membershipRepository.update({ workspace: { id: workspaceId } }, { end_date: newEndDate });
  
    return { result: true };
  }

• 따라서 기존처럼 update를 사용할 경우 해당 오류가 발생하는 것으로 판단

• update를 save로 바꾸어서 사용

  // 멤버십 연장
  async extensionMembership(body: MembershipDto, workspaceId: number): Promise<IResult> {
    const targetMembership = await this.membershipRepository.findOne({ where: { workspace: { id: workspaceId } } });
    const servicePeriod = body.servicePeriod * 24 * 60 * 60 * 1000;
    const newEndDate = new Date(targetMembership.end_date.getTime() + servicePeriod);
  
    if (!targetMembership) throw new HttpException('결제된 멤버십이 없습니다.', HttpStatus.NOT_FOUND);
  
    await this.membershipRepository.save({ ...targetMembership, end_date: newEndDate });
    return { result: true };
  }

QueryFailedError: ER_DUP_ENTRY: Duplicate entry '5' for key 'workspaces.PRIMARY'
  query: 'INSERT INTO `workspaces`(`id`, `name`, `type`, `description`, `created_at`, `updated_at`, `user_id`, `membership_id`) VALUES (?, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT)',
  parameters: [ '5' ],
  driverError: Error: ER_DUP_ENTRY: Duplicate entry '5' for key 'workspaces.PRIMARY'
      {
    code: 'ER_DUP_ENTRY',
    errno: 1062,
    sqlMessage: "Duplicate entry '5' for key 'workspaces.PRIMARY'",
    sqlState: '23000',
    index: 0,
    sql: "INSERT INTO `workspaces`(`id`, `name`, `type`, `description`, `created_at`, `updated_at`, `user_id`, `membership_id`) VALUES ('5', DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT)"
  },
  code: 'ER_DUP_ENTRY',
  errno: 1062,
  sqlMessage: "Duplicate entry '5' for key 'workspaces.PRIMARY'",
  sqlState: '23000',
  index: 0,
  sql: "INSERT INTO `workspaces`(`id`, `name`, `type`, `description`, `created_at`, `updated_at`, `user_id`, `membership_id`) VALUES ('5', DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT, DEFAULT)"
}

초기에는 membership과 workspace의 관계를 1:1로 설정해주었는데 콘솔을 찍어가며 확인해보니 workspace의 membership_id를 업데이트를 해주려는 과정에서 충돌이 일어났던 것으로 추정되었음

const membership = await this.membershipService.createMembership(body, workspaceId);

const findWorkspace = await this.workspaceService.getWorkspaceDetail(workspaceId);

findWorkspace.membership = membership.id
await transactionEntityManager.save(findWorkspace);

원래는 워크스페이스 생성 시 membership_id가 null값이어서 membership이 생성이 되면 업데이트를 해주는 구조를 생각했었는데, 해당 코드를 주석 처리 후 생성해보니 따로 업데이트를 해주지 않아도 membership_id가 업데이트 되는 것을 발견함

해당 코드를 살리고 실행해보면 똑같은 오류가 발생하는 것으로 보아, 이미 업데이트가 되어있는데 중복된 로직이 실행되어서 발생하는 에러인가? 싶었는데 관계 설정해두었던 CASCADE도 문제가 있는 것을 발견

@OneToOne(() => Membership, (membership) => membership.workspace, {
    onDelete: 'CASCADE',
    nullable: true,
  })
  @JoinColumn()
  membership: Membership;

@OneToOne(() => Workspace, (workspace) => workspace.membership, {
    // cascade: true,
    nullable: true,
  })
  workspace: Workspace;

아래의 cascade : true를 활성화 하면 같은 중복오류가 발생을 하였고, 주석 처리 후 실행했을때 정상적으로 생성이 되는 것 까지 확인. 결제 취소를 할 경우 membership_id로 해당 membership을 찾아 삭제하는 로직을 구성했는데 취소를 하게되면 워크스페이스와 워크스페이스 멤버까지 같이 삭제되는 현상을 발견하였음

이것저것 시도해보다 둘의 관계를 1:N으로 변경해도 문제가 없을 것 같아 변경한 뒤 실행해보니 이번엔 멤버십만 정상적으로 삭제되는 것을 확인

@OneToMany(() => Membership, (membership) => membership.workspace, {
    onDelete: 'CASCADE',
    nullable: true,
  })
  memberships: Membership[];

일단 얼렁뚱땅 해결하긴 했지만 정확한 이유를 모르겠어서 다음주에 튜터님에게 질문 후 원인 파악이 필요

• 워크스페이스 CRUD
• 워크스페이스 멤버 CRUD 및 Role 설정
• 권한 확인을 위한 Interceptors 구현

MVC 패턴이란?

MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴 중 하나이다.

디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말한다. ex)라이브러리, 프레임워크

MVC 패턴을 사용해야 하는 이유

• 비즈니스 로직과 UI로직을 분리하여 유지보수를 독립적으로 수행가능
• Model과 View가 다른 컴포넌트들에 종속되지 않아 애플리케이션의 확장성, 유연성에 유리함
• 중복 코딩의 문제점 제거

MVC 패턴의 한계

MVC패턴에서 View는 Controller에 연결되어 화면을 구성하는 단위 요소이므로 다수의 View를 가질 수 있다. 그리고 Model은 Controller를 통해서 View와 연결되지만, Controller에 의해서 하나의 View에 연결될 수 있는 Model도 여러 개가 될 수 있어 View와 Model이 서로 의존성을 띄게 된다. 즉, Controller에 다수의 Model과 View가 복잡하게 연결되어 있는 상황이 발생할 수 도 있다.

1. 이상훈

Keep ** 팀 별 규칙을 준수하고 매일 14시에 서로의 코드 진행 상황을 알 수 있도록 스크럼 회의를 진행한 점 모르는 내용이 있으면 공유하고 서로의 지식을 공유하여 부족한 부분을 채워준 점 **Problem 전반적은 프로젝트 진행은 문제 없이 진행됐으나 개인적으로 프론트 연결 및 프론트 관련 코드 작성이 미흡했던 점 위와 같은 문제로 시간이 부족하여 파일다운로드를 구현해보지 못한 아쉬움 이전 보다 nest.js를 좀 더 활용했으나 아직 잘 활용하지 못하고 있다고 판단 Try 공식 문서를 참고해보고 검색을 통해 활용 예제를 많이 봐둘 것 이미지 업로드는 많이 활용해봤으니 파일 업로드 및 다운로드를 구현해볼 것!

2. 인한별

Keep : 협업시 코드리뷰를 함으로써 로직에 대한 이해도가 높아짐을 느낌 Problem : X Try : 깃 활용 능력이 다소 떨어지는 듯 하여 추후 깃 강의 재수강 후 트레이닝을 통해 능숙해질 수 있도록 공부 예정

3. 이재혁

Keep : 네스트를 좀 더 알게 되었고, 협업과정에서 소통이 원할하게 이루어지면 더 효율이 올라간다는걸 느낌 Problem *: 아직 DI개념이나, this, class 개념이 좀 부족해서 api 만들때 많이 어려웠음 *Try : 남는시간에 틈틈히 js문법 + 타입 + 네스트 공부를 할것

4. 박성민

Keep *: 적극적인 의사소통과 상황 공유로 개발 단계의 진척이 빨랐음, nest 프레임워크와 템플릿을 이용해 작성을 하다보니 구현해야 할 기능에 좀 더 집중 할 수 있게 되어서 좋았음, 구현하고 싶었던 부분을 빠짐없이 구현해서 좋았음 *Problem : 소켓에 대한 이해도가 높지 않아 실시간 대화는 금방 구축했지만 해당 대화방에 없어도 대화 내용을 저장하는 기능을 구현하는데 시간이 좀 소요됨(로직을 잘못 작성해 여러번 고쳤음) Try : 기본적인 필수 기능만 돌아가는 코드가 아닌 디테일을 살려 실제 서비스에서 사용되는 코드처럼 여러가지의 경우를 생각해 로직을 꼼꼼히 짜는 방향으로 구현을 해볼 예정

RDBMS란?

• DBMS : DataBase Management System의 약자로써, 사용자와 데이터베이스 사이에서 사용자의 요청을 해석하여 데이터베이스에 저장된 정보를 관리할 수 있도록 해주는 소프트웨어이다.

RDBMS는 위의 DBMS에 Relation이 붙은, 즉 관계형 데이터베이스 관리 시스템을 뜻한다. 엑셀의 형식과 유사한 2차원 테이블 형식으로 구성되며 속성Attribute과 값Value를 이용하여 데이터를 정의하고 저장·관리한다.

각각의 속성과 값을 가진 테이블들은 서로 관계를 맺으며 존재하고, 이러한 데이터들을 활용하기 위해서 SQL을 활용한다.

장점

• Data를 Column과 Row 형태로 저장
• 데이터의 분류, 정렬, 탐색 속도가 비교적 빠름
• SQL이라는 구조화 된 질의를 통해 데이터를 다룰 수 있음
• 작업의 완전성을 보장
• 데이터의 Update가 빠름

단점

• 스키마의 규격에 맞춰서 데이터를 다뤄야 함
• 데이터 처리에 대한 부하 발생 시 처리가 어려움

NoSQL이란?

RDBMS 방식으로는 더이상 처리할 수 없을만큼의 복잡하고 큰 데이터들의 등장으로, NoSQL 방식이 부각 되기 시작했다.

데이터/테이블간의 관계를 정의하지 않아 정해진 스키마가 없어 보다 자유롭게 데이터를 저장할 수 있다. Key값만 가지고 데이터에 대한 입·출력을 수행할 수 있다.

장점

• 데이터간의 관계를 정의하지 않음
• RDBMS보다 복잡도가 떨어져 훨씬 대용량의 데이터를 저장·관리할 수 있음
• 테이블에 스키마가 정해져있지 않아 데이터 저장이 자유로움
• 많은 양의 데이터를 저장·처리할 수 있음

단점

• Key값에 대한 입·출력만 지원
• 스키마가 정해져 있지 않아 데이터에 대한 규격화가 되어있지 않음
• 데이터의 Update가 느림

// 보드(카드) 동일 컬럼 내 이동
  async orderBoard(body: orderBoardDto, projectId: number, boardId: number): Promise<IResult> {
    const { newBoardSequence } = body;
    const entityManager = this.boardRepository.manager;

    const findBoard = await this.boardRepository.findOne({ where: { id: boardId, project: { id: projectId } } });

    if (!findBoard) throw new HttpException('해당 보드를 찾을 수 없습니다', HttpStatus.NOT_FOUND);

    await entityManager.transaction(async (transactionEntityManager: EntityManager) => {
      const targetBoard = await this.boardRepository.findOne({ where: { boardSequence: newBoardSequence } });

      if (targetBoard) {
        const changeSequence = findBoard.boardSequence;
        findBoard.boardSequence = targetBoard.boardSequence;
        targetBoard.boardSequence = changeSequence;
        await transactionEntityManager.save(Board, [findBoard, targetBoard]);
      }

      findBoard.boardSequence = newBoardSequence;
      await transactionEntityManager.save(Board, findBoard);
    });

    return { result: true };
  }

  // 보드(카드) 다른 컬럼으로 이동
  async moveBoard(projectId: number, boardId: number, columnId: number): Promise<IResult> {
    const targetBoard = await this.boardRepository.findOne({ where: { id: boardId, project: { id: projectId } } });
    const targetColumn = await this.boardColumnRepository.findOne({ where: { id: columnId }, relations: ['boards'] });
    const entityManager = this.boardRepository.manager;

    if (!targetBoard || !targetColumn) throw new HttpException('해당 보드 또는 컬럼을 찾을 수 없습니다.', HttpStatus.NOT_FOUND);

    await entityManager.transaction(async (transactionEntityManager: EntityManager) => {
      const maxSequence = targetColumn.boards.reduce((max, b) => Math.max(max, b.boardSequence), 0);

      targetBoard.boardColumn = targetColumn;
      targetBoard.boardSequence = maxSequence + 1;
      await transactionEntityManager.save(Board, targetBoard);
    });

    return { result: true };
  }

같은 컬럼 내의 보드 이동을 진행할 때는 클라이언트가 선택한 보드를 findBoard에 담아 존재하는지 검색하고 변경하고자 하는 보드를 targetBoard로 잡아 해당 보드의 sequence번호와 교환해주는 방식을 채택

다른 컬럼으로 이동하는 경우 이동하고자 하는 보드를 targetBoard에 담고 map() 과 reduce()를 통해 해당 보드의 maxSequence값을 구해준 뒤 + 1하여 맨 뒤에 들어갈 수 있도록 로직을 구성하였음

썬더클라이언트로 정상작동 확인 후 프론트 연결 작업 시작 JQueryUI라이브러리 중 .sortable을 사용하여 drag & drop을 구현하려고 함

오류가 생겼던 부분의 정확한 코드가 기억이 나진 않지만 구글링을 통해 드래그앤드랍을 어떻게 하는지 찾아보던 중 prev()와 next()라는게 있어서 적용 후 테스트

-> DB에 있는 시퀀스값이 1, 2, 3, 4, 5 라한다면 1번을 선택후 5번으로 이동했을때 prev()는 5번에 있는 시퀀스값을 읽어오지 못하고 undefined 에러가 발생 -> 반대로 next()의 경우 5번에서 1번으로 이동 시 undefined 발생

정확한 원인은 모르겠어서 콘솔을 찍어보면서 확인한 결과 첫 번째 카드 이동할 때는 숫자가 정상적으로 바뀌다가 두번 째 이동할 때 시퀀스번호가 +1되는 현상이 있어 번호가 불규칙적으로 바뀌는 것을 확인

    // 컬럼 아래에 보드 카드 추가
        const columnElement = document.querySelector(`[data-column-id="${columnId}"]`);

        if (columnElement) {
          columnElement.innerHTML = columnHtml;

          $(columnElement).sortable({
            handle: '.card-title',
            connectWith: `.card-body[data-column-id]`,
            opacity: 0.5,
            update: function (event, ui) {
              const targetBoard = ui.item;
              const boardId = targetBoard.find('.card-title').attr('data-board-id');
              const columnId = targetBoard.closest('.card-body').attr('data-column-id');
              // 엘리먼트 순서가 0부터시작하므로 +1하여 DB와 동기화
              const newBoardSequence = targetBoard.index() + 1;

              orderBoardSequence(boardId, newBoardSequence);
              moveBoard(boardId, columnId);
            },
          });
        }

columnId를 받아오는 방식을 targetBoard의 부모요소의 columnId값을 가져오는것으로 변경하고 시퀀스 번호는 인덱스번호와 일치시키는 것으로 문제를 해결하였음

DB에서 보드나 컬럼이 생성될 때 번호를 1부터 생성하도록 로직을 구성하였기에 인덱스에 +1을 하여 순서를 일치시킨 후 매개변수로 전달

// 보드 동일 컬럼 내 이동
async function orderBoardSequence(boardId, newBoardSequence) {
  await $.ajax({
    method: 'PATCH',
    url: `/projects/${projectId}/boards/${boardId}/order`,
    headers: {
      Accept: 'application/json',
    },
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.setRequestHeader('authorization', accessToken);
    },
    data: JSON.stringify({ newBoardSequence }),
    success: () => {},
    error: (error) => {
      console.error(error);
    },
  });
}

// 보드 다른 컬럼으로 이동
async function moveBoard(boardId, columnId) {
  await $.ajax({
    method: 'PATCH',
    url: `/projects/${projectId}/boards/${boardId}/${columnId}/move`,
    headers: {
      Accept: 'application/json',
    },
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.setRequestHeader('authorization', accessToken);
    },
    success: () => {},
    error: (error) => {
      console.error(error);
    },
  });
}

전달 된 매개변수는 아래의 함수에서 각자에 맞는 API를 호출

// upload-middleware.ts
import { HttpStatus, Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';
import * as multer from 'multer';
import * as multerS3 from 'multer-s3';
import * as AWS from 'aws-sdk';
import * as path from 'path';
import { uuid } from 'uuidv4';

@Injectable()
export class UploadMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    try {
      const s3 = new AWS.S3({
        accessKeyId: process.env.S3_ACCESS_KEY,
        secretAccessKey: process.env.S3_ACCESS_KEY_SECRET,
        region: process.env.AWS_REGION,
      });

      const allowedExtensions = ['.png', '.jpg', '.jpeg', '.jfif', '.exif', '.tiff', '.bmp', '.gif'];

      const upload = multer({
        storage: multerS3({
          s3,
          bucket: process.env.BUCKET_NAME,
          contentType: multerS3.AUTO_CONTENT_TYPE,
          shouldTransform: true,
          key: function (_, file, callback) {
            const fileId = uuid();
            const type = file.mimetype.split('/')[1];

            if (!allowedExtensions.includes(path.extname(file.originalname.toLowerCase())) || !file.mimetype.startsWith('image/')) {
              const errorMessage = '이미지 파일만 업로드가 가능합니다.';
              const errorResponse = { errorMessage };
              return res.status(HttpStatus.BAD_REQUEST).json({ errorResponse });
            }

            const fileName = `${fileId}.${type}`;
            callback(null, fileName);
          },

          acl: 'public-read-write',
          limit: { fileSize: 5 * 1024 * 1024 },
        }),
      });
      upload.single('newFile')(req, res, next);
    } catch (error) {
      console.error(error);
      res.status(HttpStatus.INTERNAL_SERVER_ERROR).json({ errorMessage: '파일 업로드 에러' });
    }
  }
}

이게 직전 프로젝트에서 사용하던 것인데 location을 찾을 수 없다는 에러는 직접 index.d.ts파일을 만들어서 type을 지정해주고 해결했었던 문제였다.

//index.d.ts
declare namespace Express {
  export interface Request {
    file: Express.Multer.File;
    user: { userId: number; isAdmin: boolean };
  }
}

그래서 이번에도 타입을 직접 지정해줘야하나 싶어 추가해봤는데 추가를 해도 계속 Multer를 찾을 수 없다는 에러가 발생하여 이것저것 찾아보다 팀원분에게 여쭤보고 해결방법을 찾았다.

// 내가 적용했던 코드
import { Request } from 'express';
import { User } from '../entities/user.entity';

export interface IRequest extends Request {
  user?: User;
  file: Express.Multer.File
}

이 부분에서 처음엔 Multer를 찾을 수 없다고 나오다가 vscode를 껐다키니 Request를 확장하여 사용할 수 없다는 에러가 발생하여 아래와 같이 수정하여 해결

import { Request } from 'express';
import { User } from '../entities/user.entity';

export interface IRequest extends Request {
  user?: User;
  file: any;
}

먼저 file을 any타입으로 변경해주고

// upload-middleware.ts
key: function (_, file: Express.Multer.File, callback) {
            const fileId = uuid();
            const type = file.mimetype.split('/')[1];

업로드 미들웨어의 file을 Express.Multer.File로 직접 넣어주니 req.file.location을 읽어올 수 있었다.

다음은 form-data의 값을 가져올 수 없는 문제가 있어서 nest-form-data 패키지를 다운받고 데코레이터를 적용했더니 unexpected end of form이라는 오류가 발생했다. stackoverflow에 나와 같은 문제를 겪은 사람이 많아 댓글을 읽어보니 multer의 버전을 1.4.3을 사용하면 된다해서 @types/multer의 버전을 1.4.3으로 다운그레이드 후 nest-form-data패키지를 삭제하고 실행해보니 정상작동했다.

service.js 코드

isDelivered = async (orderId, res) => {
    try {
      const user = res.locals.user;
      const existStore = await this.storeRepository.getStoreInfo(user.id);
      if (!existStore) throw errorHandler.notRegistered;

      const order = await this.orderRepository.findOrder(orderId);
      if (!order) throw errorHandler.noOrder;

      if (order.order_status === 'delivered') throw errorHandler.completedOrder;
      else if (order.order_status === 'refundRequest') throw errorHandler.refundOrder;
      else if (order.order_status === 'cancelled') throw errorHandler.cancelledOrder;

      const total_sales = existStore.total_sales + order.total_price;
      const t = await sequelize.transaction({
        isolationLevel: Transaction.ISOLATION_LEVELS.READ_COMMITTED,
      });
      try {
        await this.orderRepository.updateDeliveryStatus(orderId, t);
        await this.storeRepository.updateStoreInSales(user.id, total_sales, t);
        await t.commit();
        return {
          code: 201,
          message: `배달이 완료되었습니다. ${order.total_price}포인트가 입금 되었습니다.`,
          data: { userId: order.user_id },
        };
      } catch (transactionError) {
        await t.rollback();
        throw transactionError;
      }
    } catch (err) {
      throw err;
    }
  };

repository.js

// order
  updateDeliveryStatus = async (orderId, t) => {
    await Order.update({ order_status: 'delivered' }, { where: { id: orderId }, transaction: t });
    return;
  };
// store
  updateStoreInSales = async (userId, price, t) => {
    await Store.update({ total_sales: price }, { where: { user_id: userId }, transaction: t });
  };
}

이렇게 로직을 구성한 뒤 레포지토리에 트랜잭션도 같이 보내주면 해결되는 문제였다.