Day16

오늘의 TMI

민지: 주말에 잘 쉬었다 원주: 조용한 주말을 보냄, 푹 쉼 명재: 아는사람이 크롱님을 알고 있었다 수용: 해커톤에 나감

남은 할일

• 팀 내부 관리 - 수용
• 팀 보드 - 명재, 원주
• 팀 채팅 - 민지

이번주 계획

• 팀 내부 관리 - 수용

  • 할 일
    • UI
    • 멤버 초대
    • 멤버 권한 수정
    • 멤버 강퇴
    • 팀 삭제
    • 팀 나가기
    • 팀 구성원 검색
    • 서로 상태 확인
  • 이번주에 할 일
    • UI
    • 팀 삭제
    • 팀 나가기
    • 팀 구성원 검색
    • 서로 상태 확인

• 팀 보드 - 명재, 원주

  • 회의
  • 학습
  • 할 일
    • 포스트잇
      • 생성
        • 생성 모달
      • 삭제
        • 삭제 모달 (삭제하시겠습니까? Y/N)
      • 수정
        • 수정 모달
      • 이동
      • 배경 색 변경

• 팀 채팅 - 민지

  • 할 일
    • UI
    • 채팅방 생성
    • 채팅방 초대
    • 채팅
    • 채팅방 목록 보기
      • 메시지 수 확인
    • 채팅방 나가기
    • 채팅 반응
    • 방장
      • 채팅방 이름 변경
      • 유저 강퇴
  • 이번주 할 일
    • UI
    • 채팅방 생성
    • 채팅방 초대
    • 채팅
    • 채팅방 목록 보기

궁금한 점

team에서 팀 선택해서 접속하는 경우는 괜찮은데, 새로고침하거나 주소로 접속한 경우 리코일에 유저 이메일이 없어서 빈칸으로 가져와집니다. 현재 PrivateRoute에서 유저 정보를 가져오는데 이부분 순서 조정이 조금 필요할 것 같습니다!

socket context 파일에서 export const SocketContext = React.createContext(null); 이거 도대체 타입 뭘까요?

팀 내부 관리 페이지 네이밍을 현재 그냥 UsersPage로 해놨는데 더 좋은 이름이 있을까요?

yarn workspace

dependancy vs devDependancy

- @types => dev
- typescript => dev
- eslint, prettier => dev
- @testing-library => dev

@(절대 경로)

---

대망의 팀 보드

(망하다의 망이 아님. 암튼 아님)

포스트잇 DOM vs Canvas

저는 Dom으로 하는게 더 쉬울 것 같습니다. 동감입니다.

초기화

1. DB에서 Postit 데이터 불러옴
2. 불러온 데이터를 x,y 정보에 맞게 Konva로 그려줌

생성

1. 생성 버튼 누르면, Modal 등장
2. Modal form을 채우고 Submit 버튼 누름
3. 서버에서 데이터 만들고, 만든 데이터를 socket으로 broadcasting
4. socket.on('draw', drawPostit)

삭제 & 수정

1. 포스트잇 우측 상단 ... 클릭시 드롭다운(수정, 삭제) 표시 2-1. 삭제 클릭: 삭제하시겠습니까? (Y/N) 모달 2-2. 수정 클릭: 생성 때와 같은 Modal

이동

0. disconnect 되는 순간의 위치만 DB에 반영
1. [Client] onDragStart가 발생하면, socket.emit('move')
2. [Server] socket.on('move', broadcast) https://konvajs.org/docs/react/index.html

    <stage>
        <layer>
            <postit onDragStart={handleDragStart}, onDragEnd={handleDragEnd}/>
        </layer>
    </stage>

DB <-> Server <-> Client

팀 내 다른 페이지에 있을 때 소켓 메시지를 계속 받는다?

페이지가 바뀌면 room이 바뀌는 거고 BE에서 room별로 메시지를 보내는 거면 안받을듯

실시간 서비스

• 쓰로틀링, 디바운싱
• offscreen canvas
• 데이터는 BE 소켓에서 유지, 가끔 DB에 저장
  • 서버 최초 실행 시 DB에서 불러와 동기화 (DB -> Server)
  • 유저가 팀 보드 page redirection 시, Server에서 불러옴 (Server -> Client)
• 뭔가 새로 다 그리는 게 아닌, 새롭게 추가된 것만 따로 그려내는 방법이 있으면 좋겠음