Kanban-Board

0️⃣ 서비스 소개

1️⃣ 기술 스택

2️⃣ 핵심 기능

3️⃣  개발 내용

3.1 메시지 알림 (SSE)

• 기능 설명: 클라이언트에게 단방향 메시지를 실시간으로 전달하여 업무 현황 및 알림을 제공합니다.

• SSE 활용 이유: 프로젝트의 특성상 단방향 메시지가 주로 필요하며, 복잡한 웹소켓을 도입하지 않고도 간편하게 실시간 업데이트를 제공하기 위해 SSE를 활용했습니다.

// sse.controller.ts
import { Controller, Param, Sse } from "@nestjs/common";
import { SseService } from "./sse.service";

@Controller("sse")
export class SseController {
    constructor(private readonly sseService: SseService) {}

    @Sse(":userId")
    sendClientAlarm(@Param("userId") userId: string) {
        return this.sseService.sendClientAlarm(+userId);
    }
}

// sse.service.ts
import { Injectable, MessageEvent } from "@nestjs/common";
import { Observable, Subject, filter, map } from "rxjs";

@Injectable()
export class SseService {
    private users$: Subject<any> = new Subject();

    private observer = this.users$.asObservable();

    emitCardChangeEvent(userId: number, message: string) {
        this.users$.next({ id: userId, message: message });
    }

    sendClientAlarm(userId: number): Observable<any> {
        return this.observer.pipe(
            filter((user) => user.id === userId),
            map((user) => {
                return {
                    data: {
                        message: user.message,
                    },
                } as MessageEvent;
            }),
        );
    }
}

3.2 칼럼 및 카드 정렬 (LexoRank)

• 기능 설명: 칸반보드의 칼럼과 카드를 정렬하기 위해 LexoRank를 활용했습니다. LexoRank는 사전식 순서를 기반으로 한 카드 정렬을 가능케 하는 알고리즘입니다.

• LexoRank 활용 이유: 사용자들이 직관적으로 칼럼과 카드를 정렬하고 이동할 수 있도록 하기 위해 LexoRank를 도입했습니다. 이를 통해 정확한 사잇값을 생성하여 정렬 기준을 제공하고자 했습니다.

// LexoRank Test
import { Injectable } from '@nestjs/common';
import { LexoRank } from 'lexorank';

@Injectable()
export class AppService {
  insert(_data: string) {
    throw new Error('Method not implemented.');
  }
  items: { data: string; lexo: LexoRank }[] = [
    { data: 'item1', lexo: null },
    { data: 'item2', lexo: null },
    { data: 'item3', lexo: null },
    { data: 'item4', lexo: null },
    { data: 'item5', lexo: null },
    { data: 'item6', lexo: null },
    { data: 'item7', lexo: null },
  ];

  constructor() {
    let lexoRank = LexoRank.middle();
    this.items.map((item) => {
      item.lexo = lexoRank;
      lexoRank = lexoRank.genPrev();
    });
  }

  //! lexo 값 출력
  find() {
    const newItems = this.items
      .sort((a, b) => {
        return a.lexo.compareTo(b.lexo);
      })
      .map((item) => {
        return { data: item.data, lexo: item.lexo.toString() };
      });

    return newItems;
  }

  //! 위치 이동
  move(id: number, where: number) {
    let newLexo: LexoRank;

    if (where >= this.items.length) {
      newLexo = this.items[this.items.length - 1].lexo.genNext();
    } else if (where <= 0) {
      newLexo = this.items[0].lexo.genPrev();
    } else {
      newLexo = this.items[where].lexo.between(this.items[where + 1].lexo);
    }

    this.items[id].lexo = newLexo;

    return true;
  }
}

4️⃣ 성장 경험

LexoRank의 한계점과 해결방법

1. 모든 순서 정보 초기화 이동할 때마다 순서를 초기화하려면 기존의 순서 정보를 완전히 초기화해야 합니다. 저장된 순서 데이터를 삭제하거나 리셋합니다.

2. 새로운 순서 정보 생성 초기화 후, 새로운 아이템이나 변경된 순서에 대한 정보를 다시 생성합니다. LEXORANK 알고리즘을 다시 적용하거나 필요에 따라 다른 알고리즘을 사용할 수 있습니다.

3. 순서 정보 저장: 새로운 순서 정보를 저장하여 나중에 참조할 수 있도록 합니다.