2주차 피어세션 J02

참여자

• Web07
  • J011 권재호
  • J037 김신혁
  • J092 박준석
  • J103 성기혁
• Web08
  • J036 김승현
  • J046 김유석
  • J122 안주영
  • J195 조성현

어려웠던 것

• WebRTC
• PeerJS

자랑할만한 것

차주 목표

• 히스토리 기능 만들기
• 마인드맵 기능 완성

질문사항

PeerJs

공부한 바에 의하면, 웹RTC에 기술적으로 정해진 스펙은 3가지입니다.

1. 로컬 get media stream
2. peer와 rtc media connection
3. data를 전송하는 data channel

두 명의 peer가 연결을 하기위해서는 sdp를 서로 전달해야 합니다. 그 이후에 데이터를 전송할 수 있습니다. 그렇다면, 어떻게 sdp를 주고 받아야하는가가 고민이었습니다.

주먹구구로 따라하다보니 잘 안되서, 라이브러리를 찾게 되었습니다. peerjs라는 웹 rtc를 추상화시킨 라이브러리를 발견했습니다. 알아서 session 정보를 주고받고 데이터를 주고받을 수 있게 되었습니다.

주고 받는 기능은 제공하지만 설계는 개발자의 몫이기 때문에, 저희는 소켓 io의 룸 기능으로 sdp를 주고받는 형태로 설계했습니다. 하지만, 로컬에서는 되지만 서버에 배포하니 에러가 났고, 기능의 커스텀이 가능한지 모르겠어서 좀 더 연구가 필요해보입니다. 추측하기로는 소켓 통신이 nginx에서 잘 안되는 것 같습니다.

p2p 연결방식에 대해

p2p 연결을 했을 때, 브라우저를 다섯 개를 키면 렉이 걸리기 시작했습니다. '감자같은 서버에서는 몇 개를 감당할 수 있을까? 중앙 서버라면 SFU든 MFU든 감당하기가 어려울것이다'라고 결론을 내렸습니다. 차라리 p2p가 낫지 않을까 결정을 내렸습니다.

SFU 방식으로 한다고 되는게 아니고, 미디어서버를 쓰더라도 scalable 하게 만드려면 개발자의 몫입니다. 미디어 수프라는 라이브러리를 찾기는 했으나, 거기에서 쓰이는 개념을 더 학습해야되서 러닝커브가 높다고 느꼈습니다.

마인드맵의 epic,story,task DB설계에 대해

테이블을 구분하지 않고 하나의 테이블로 관리하기로 했습니다. 노드간의 수정,삭제가 있기 때문입니다. 저희의 가장 핵심 목표는 노드들을 움직이고 수정하는 것을 history로써 제공해줘서 변경 이력을 확인할 수 있게 하는 것입니다. 사용자들은 socket을 통해 db에 event를 요청하고 db는 비동기적으로 전체 노드들을 업데이트 하는 식으로 구성하고자 합니다. 그래서 cqrs라고 명령어와 조회를 분리하는 방식을 적용해보려고 하고 있습니다.

RDB, Document DB에 대해

=> noSql, 예를 들어 몽고 디비를 예를 들면, json형태로 저장을 한다. 어떤 데이터가 들어갈지 자유롭게 구성을 할 수 있다. noSql에 동시에 접근했을때의 동시성 문제는 어려울 수 있겠다고 느꼈다. noSql로 해서 스냅샷을 저장하는 방식은 어떨까요?(그냥 의견임)

=> 히스토리 기능이 있기 때문에 작은 변화에도 스냅샷을 찍는 것보다는 diffing은 하는게 났다고 생각해습니다. 어쨋든 마인드맵의 재구성이 필요하기 때문에 RDB로 설계를 했습니다.

=> noSql 같은 경우 update 성능이 낮은 것으로 알고 있습니다. (삽입,삭제는 빠르다.) 한 데이터가 중복되어서 여러 컬렉션에 존재하기 때문. 반대로 RDB의 경우는 스키마가 빡빡해서 설계가 구체적으로 필요해보입니다.

elastic 서치에 대해

elastic 서치를 db로도 사용하는 경우도 있다고 하네요.

드래그 컴포넌트에 대해

드래그 이벤트를 활용했습니다. 노드에 id를 넣어놨습니다. 노드를 map 자료구조로 관리하고 있고 root node부터 children을 찾아가면서 맵을 구성합니다. 드래그 이벤트 중에 drop 이벤트 타겟이 해당위치 element를 알 수 있습니다. 그래서 해당 노드에 정보를 바꿔주고 맵을 다시 그리는 방식으로 구현을 했습니다.

앞으로는 소켓을 통해 변경 요청을 통해, 맵 변경을 반영시키도록 할 예정입니다.

팀원분들과의 소통에 대해

친해지기 위해 말을 놓게 되었습니다. 장단이 있는 것 같으나, 마지막 프로젝트는 말을 놓는 것 어떨까? 코드리뷰는 존댓말 쓰고 있습니다.. 쉽지않음

도커에 대해

저희조는 모두 윈도우 환경에서 사용중이다. 윈도우에서 도커 쓰는게 문제가 많다. mysql 이미지를 사용하니 도커가 죽는 경우를 경험해서 사용하기가 두렵다.

분업에 대해

백로그를 쓰고, 태스크를 분배해서, 각자 feature 브랜치에서 하고 있습니다. 핵심 기능을 안맡은 사람은 따라가기가 어렵습니다. => 저희는 코드리뷰를 통해 따라가려고 노력하고 있어요.

겪었던 이슈

typescript react dom router 이슈

타입스크립트가 Switch를 못 찾아오고 있습니다...ㅠㅠ

"react-router-dom": "^5.3.0" => Route "react-router-dom": "^6.0.0" => Routes로 변경 2021.11.04 자로 6.0.0 버전이 나와서 공식 문서를 찾아볼 필요가 있다

타입스크립트 + express 배포이슈

서버 단에서 pm2랑 .env가 잘 동작하지 않았다. => 도커를 사용해서 해결할 예정

NginX배포 환경에서 웹소켓이 뭔가 이상한 이슈

socket 연결이 실패했다고 로그가 계속 나온다. 근데 채팅은 됨. ??? 400

=> 희한하네요..ㅠㅠ

리뷰를 서로 남겨줍시다. 피드백!

좋아요~