마인드맵 데이터 구조 및 흐름 고민 - boostcampwm-2021/WEB08-AgileStorming GitHub Wiki

작성자: 김승현

데이터 구조

DB

//현재 존재하는 노드만 관리
Node:{
  id:1,
  type:epic,
  content:로그인,
  children:[Node,Node],
},
Node:{
  id:2,
  type:story,
  content: 아이디로 회원가입후~~,
  children:[Node,Node],
},

//type: create, delete, change
History{
  id:1,
  modifier: 김유석,
  type:create,
  newNode:{},
},
History{
  id:1,
  modifier: 김유석,
  type:delete,
  oldNode:{},
},
History{
  id:1,
  modifier: 김유석,
  type:change,
  oldNode:{},
  newNode:{},
},

Memory


Mindmap{
  Node:{},
  Node:{},
},
Histories{
  History:{},
  History:{},
}

통신 방법

  • Socket + API는 복잡도를 올린다.
  • 서버의 room단위로 map을 관리하며 Socket 통신을 활용하여 user 간 변경된 history 이력을 공유한다. 통신 방법

사용자 접속 시

  1. Map 정보를 DB에서 불러와 메모리에 올린다. (최초 1회)
  2. 사용자에게 소켓을 통해 Map 정보를 전송한다.
  3. 이전 History 이력은 요청이 올 시 API를 통해 전송한다.

모든 사용자 종료 시

  • DB에 모든 사항을 저장하고 세션을 종료한다.

  • 단점: Map이 크고 room이 많을 시 서버의 메모리가 많이 필요

  • 대안: 메모리에서가 아닌 DB에서 관리하는 방식

저장 방법

  • 메모리 상에서 일정 시간을 정해두고 주기적으로 DB에 저장한다.

렌더링

  • 자식 노드 간격은 gap 으로 처리한다.
  • CSS를 이용 자식이 증가하면 부모 노드의 height에 반영되게 한다. 렌더링

드래그 미리보기 처리

  • mindmeister 페이지 참고해서 구현

  • 현재 노드들은 변경하지 않고 미리보기용 노드 추가

  • 동시에 움직이기, 움직일 때 수정하기 등의 상황 정의 필요

  • 각 부모 노드에 mouseIn, out 이벤트리스너 처리

  • 밑의 그림처럼 각 영역에 따라 다른 이벤트 정의 드래그 미리보기

  • 실제 예시 노드 이벤트