2023/03/27 Tech Stack 상세 검토 / Main UI Story board 작성

[Samsam-lee]

⏰ 투두리스트

• 승현 : Figma UI(메인 로직 대략적인 스토리), Front-End tech stack 검토
• 승형 : 소켓 서버 구현 후 배포
• 재순 : 소켓 로직 설계

[JeongJaeSoon]

Chat GPT 에게 물어봄

질문

플래닝 포커를 할수 있는 Scrum Dice 라는 서비스를 socket.io 로 만들 건데 그 흐름을 설계해줘

답변

Scrum Dice는 플래닝 포커 게임을 온라인으로 할 수 있는 서비스입니다. Socket.io를 이용하여 구현할 때는 다음과 같은 흐름을 가질 것입니다.

1. 클라이언트가 Scrum Dice에 접속합니다.
2. 클라이언트는 게임 방을 생성하거나 기존에 생성된 방에 참가합니다.
3. 방에 참가한 모든 클라이언트는 게임이 시작될 때까지 대기합니다.
4. 방장이 게임을 시작하면, 모든 클라이언트는 주어진 이야기 카드 중에서 자신이 생각하는 카드를 선택합니다.
5. 클라이언트는 선택한 카드를 서버에 전송합니다.
6. 모든 클라이언트의 선택이 완료되면, 서버는 선택한 카드를 모아 결과를 계산합니다.
7. 결과를 모든 클라이언트에게 전송합니다.
8. 게임이 끝날 때까지 4~7 단계를 반복합니다.
9. 게임이 종료되면 클라이언트는 게임 결과를 확인할 수 있습니다.

이러한 흐름을 구현하기 위해서는 다음과 같은 기능이 필요합니다.

1. 방 생성 및 참가 기능
2. 이야기 카드 선택 기능
3. 선택한 카드 결과 계산 및 전송 기능
4. 게임 종료 및 결과 확인 기능

이러한 기능을 구현하기 위해서는 클라이언트와 서버 간에 어떤 데이터를 주고받을지, 어떤 메시지를 주고받을지 등을 사전에 정의해야 합니다. 또한, 클라이언트와 서버 간에 정확한 동기화를 위해 상태 정보를 적절하게 관리해야 합니다.

[JeongJaeSoon]

Notion AI 에게 물어봄

질문

플래닝 포커를 할수 있는 Scrum Dice 라는 서비스를 socket.io 로 만들 건데 그 흐름을 설계해줘

답변

Scrum Dice

Scrum Dice는 Node.js와 Socket.io를 이용한 웹 기반 스크럼 도구입니다. 스크럼은 프로젝트 관리 방법론 중 하나로, 개발자들이 협업하여 프로젝트를 관리하는 방법입니다. Scrum Dice는 이러한 스크럼 방법론을 따르며, 팀원들이 더욱 쉽게 스크럼을 할 수 있도록 도와줍니다.

Node.js와 [Socket.io](http://socket.io/)

Scrum Dice는 Node.js와 Socket.io를 이용하여 구현되었습니다. Node.js는 서버 사이드 개발에 많이 사용되는 자바스크립트 런타임입니다. Socket.io는 실시간 양방향 데이터 통신을 위한 라이브러리입니다. Scrum Dice에서는 Node.js와 Socket.io를 이용하여 실시간으로 팀원들 간의 데이터를 주고받습니다.

작동 흐름

Scrum Dice의 작동 흐름은 다음과 같습니다.

1. Scrum Dice 서버를 실행합니다.
2. Scrum Dice 클라이언트에서 서버에 연결합니다.
3. 팀원들이 Scrum Dice에 접속합니다.
4. Scrum Dice에서는 팀원들이 입력한 데이터를 모아 스크럼 보드에 반영합니다.
5. 스크럼 보드에서는 팀원들이 입력한 데이터를 실시간으로 확인할 수 있습니다.
6. 스크럼이 끝나면, Scrum Dice에서는 스크럼 결과를 저장합니다.

위와 같이 Scrum Dice는 실시간으로 팀원들이 입력한 데이터를 반영하며, 스크럼 결과를 저장합니다.

결론

Scrum Dice는 Node.js와 Socket.io를 이용하여 구현된 웹 기반 스크럼 도구입니다. Scrum Dice를 이용하여, 팀원들은 더욱 쉽게 스크럼을 할 수 있으며, 스크럼 결과를 실시간으로 확인할 수 있습니다.

[JeongJaeSoon]

나의 생각

Socket.io 서버

• Front-End build 와 별도로 서버 실행이 필요할 듯
• Namespace & Room 으로 각각의 planning poker 를 구별
  
  • https://inpa.tistory.com/entry/SOCKET-📚-Namespace-Room-기능
  • https://berkbach.com/node-js와-socket-io를-이용한-채팅-구현-2-ce5ac35bb007
  • https://dalkomit.tistory.com/entry/Socketio-Room-Namespace

최초로 사용자가 방을 생성

Namespace

• 향후, 다른 서비스가 들어올 예정이기 때문에, 서비스 별로 namespace 를 사용
  • planning poker 용 namespace :/planningPoker
  • 예) /planningPoker/${roomId}

Room

• 방 생성 시, Room id 생성
• Room id 를 사용하여 각 방을 구별
• Room 참가에는 패스워드가 필요(?) → Zoom 과 유사

사용자 구분

• 사용자가 해당 룸에 최초로 입장하면 Client Id 를 발급
  • 아마 Socket.io 에 기본적으로 memberId 가 있을 듯?
  • https://www.npmjs.com/package/uuid
• 고유 Client Id 는 Cache 로 사용자 측에 저장
  • Key: scrum_dice_${RoomId}
  • 만료시간은 6시간
• Server 에서의 Client Id 관리
  • 1:N 으로 Room Id : Client Id 가 관리됨
• 방 최초 생성 6시간 경과 후에도 접속한 사람이 있을 경우
  • modal 로 알림을 띄우고, 60초 동안 반응 없으면 room 삭제
  • 그 뒤로는 1시간 단위로 연장

다른 사용자가 방에 입장

입장 직전

• Client 의 localstorage 를 확인
• localstorage 가 있을 경우
  • 그 사용자가 맞는지 물어보고, 맞으면 그대로 입력
  • 그 사용자가 아닐 경우
    • 사용자 측에 저장된 localstorage 를 삭제
    • Server 에서도 expired
• Cache 가 없을 경우
  • 새롭게 입장하기 때문에 Client Id 필요
  • 사용자 이름을 입력받을 필요가 있음

입장 중

• 일반적 Socket 통신과 동일

  {
  	'status': boolean,
  	'pokerNumber': number,
  	'title': {
  		'data': '1회차',
  		'updatedTime': 'yymmdd hh:mm:ss'
  	}
  }
  
  // isOpened, isHighlighted ...

방의 삭제

입장 종료

• 사용자가 접속을 해제하고 30 분 뒤에 해당 Client Id expired
• 모든 사람이 방의 접속을 해제하고, 10분이 경과하면, Server 에서는 Room Id expired
• 접속 해제의 기준
  • 브라우저 창을 닫았을 경우?
  • 탭을 닫았을 경우?

[hyunnnn98]

LGTM 👍

[hyunnnn98]

Front-End build 와 별도로 서버 실행이 필요할 듯

승형이형 Socket Connection 기술검증 결과가 기대되네요~

[Samsam-lee]

NextJS & Socket

• Vercel : 서버리스 배포툴로 커넥션이 유지되어야하는 소켓서버는 사용 불가능
  (https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections)
  (Netlify도 동일)
• Heroku : 소켓을 위한 서버 유지는 가능하지만, 타임아웃되지 않고 지속적으로 살리기 위해 핑을 던지는 등 필요한 작업들이 존재
  (https://devcenter.heroku.com/articles/websockets)
• 클라우드 서비스를 활용하여 서버를 운영하는 쪽이 좋을 것 같다.

NextJS 13 AppDir

• page 디렉토리를 사용하지 않고 app 디렉토리를 사용해 본 결과..
  • 자료가 많이 없을 뿐더러, 아직 완벽하게 구성되지 않은 Test 중인 기능
    
• app 디렉토리에서 서버를 따로 생성하는 작업이 불가능한건지.. 디렉토리의 route 파일만을 찾아가 http 통신을 한다.

힘두렁

[hyunnnn98]

🐻 Figma 로 구현해본 화면 리스트

화면 리스트

• 메인
• 로그인
• 방 생성 초기
• 플래닝 포커 룸 생성
• 플래닝 포커 메인 룸

Front-End tech stack 검토

https://github.com/2P3S/scrum-dice-front 리포지토리에서 기술 검증을 진행하였음.

• Next + Typescript
• Atomic Design Pattern
• Tailwind CSS
• daisyUI
  • Tailwind 유틸리티 클래스에 해당하는 부트스트랩

아토믹 디자인 패턴의 가장 최소 단위 Atoms(원자) 를 구현해보기 위해 Tailwind CSS / daisyUI 를 결합하여 Button Element 를 만들어 봤다. 모든 디자인 요소를 작은 부분으로 나누어 구성하기 때문에 디자인 요소 간의 일관성이 유지된다. 이는 디자인 시스템 전체에서 일관된 디자인을 제공하므로 개발할때 최소 단위(atoms)의 결합으로 생성되는 UI의 로직을 쉽게 이해하고 사용할 수 있을거 같다. ( 😎 추후 atoms 만 패키지화해서 다른 리포지토리에서도 사용 할 수 있게 만들고 싶다. )

daisyUI는 평소 업무에서 Tailwind CSS를 쓰던 나에게는 러닝커브가 높지 않았고, 기본적인 UI를 잡아주는 부트스크랩으로 사용할시 향후 UI 구현에 많은 도움이 될거라 생각된다.

[hyunnnn98]

📝 2023/03/27 회의록

🐶 재순

• 소켓 로직
  • chatgpt 로 기능 추려봤어요. 확인 부탁해요.
  • 설계한 서비스 라이프사이클 설명 후 의견 통합.
  • 사용자 구분 - 방 최초 생성 6시간 경과 후 room 삭제 로직.
    • 로직에 의견이 많이 나뉜다. socket 공식문서 검토.
  • 접속 해제 / 로컬스토리지 확인하는 로직 검토하기.
    • 어떤 기준을 가지고 만료 시간을 정할것인가.
  • 사용자가 접속을 해제하고 30 분 뒤에 해당 Client Id expired ?
    • 접속 해제 로직이랑 겹치지 않는가?
      • room 가 아니고 user 이기에 관련 없음.
      • user 라는 것을 알아두자.
    • 만료시간은 프로토타입 구현에 있어 필요한 기능인가?
      • db와 같은 외부저장소를 사용한다면 필요 없을 수도.
      • db 와 redis 중에 뭐가 좋을까?
      • 결론) 구현하자
  • 현재 프로토타입 구현에 있어 외부저장소는 필요한 기능인가?
    • 서비스의 필수(must) 기능에 대한 얘기를 하다보니 db의 필요성이 느껴졌다.
    • db를 제외하고 이야기를 하다보니 db를 도입하지 않음 / 도입함 을 나눠서 로직을 검토하는 것이 복잡해졌다.
    • 역시 db는 넣어야 하는 것인가!?
    • 결론) 🎊 외부저장소(db) 는 도입하기로 결정되었습니다 🎊
    • 외부저장소 도입으로 유효시간 기능은 구현하지 않아도 OK

🦁 승형

• 소켓 서버 구현 후 배포
  • vercel / netlify / heroku 로 서버리스 배포툴로 소켓서버 구현은 불가능했다.
  • 서버리스 배포툴은 timeout 이슈로 불안정하다.
  • 결론) ec2로 컨테이너를 만들어서 진행하기로 결정되었습니다
• Next 13 AppDir 도입 검토
  • https://blog.logrocket.com/next-js-13-new-app-directory/
  • 백엔드를 붙여서 모노리스 로 개발 시 발생하는 이슈가 무엇일까? ( 추가로 검토하는것도 좋을수도 )

🐻 승현

• 피그마로 구현한 화면 설명 후 의견 통합.
  • 메인페이지 OK
  • 게스트로그인 페이지
    • 로컬스토리지 에 로그인 정보가 없을 경우 로그인 페이지로 이동
    • 이용약관 동의 부분은 디스클로저? 모달 ?
  • 룸 생성 초기 페이지
    • 포커 기록은 sorting
    • 3회차 넘어가면 > 버튼으로 로 넘기기 기능 추가
  • 플래닝 포커 룸 생성
    • 카드 묶음에 대해 1안 / 2안 이라는 단어 보다는 직관적으로 숫자 배열 보여주는거로 변경하기
    • 방 이름은 default 로 들어갔으면 좋겠다.
      • yyyy-mm-dd-username
    • 비밀번호가 필요할까?
      • 결론) 🎊 비밀번호는 없애는 거로 결정되었습니다 🎊
    • 워딩에 대한 고민
      • 커스텀 카드 라는 단어가 맞는가? 옵션이 좋을수도
      • 옵션 카드에 대한 설명을 보여주는 화면이 추가로 필요하다
    • 1안 / 2안 ~ 옵션 카드 선택 하는 부분에 인터렉션 을 넣어서 사용자 경험을 높히는것도 좋겠다. 하스스톤 처럼
  • 플래닝 포커 메인 룸
    • 평균 산출은 회차 설명에 가장 오른쪽 부분에 넣어보자
    • 방 이름 / 회차별 이름 을 구현하는 부분은 어떻게?
      • h1 / h3 로 구분해서 위 아래로 구분해서 보여주자
    • 에그타이머
      • 시간 설정 / 시간을 임의로 멈출 수 있게 구현해야한다
      • UI 적으로 어떻게 풀어갈 건지 생각해보자
    • 룸 url 복사하기
      • UI 적으로 어떻게 풀어갈 건지 생각해보자