# 데모데이 발표 관련 회의

## 데모데이 관련
- `바닐라 자바스크립트로 게임 만들기` 라는 주제로 발표를 하는 것은 어떨까요?
    - 과정을 표현하는 것은 좋다.
    - 게임 만들기 그 자체도 낯선 것들이라 괜찮음 
    - **어떻게 구조를 만들고 동작 방식은 어떠한지**
    - 웹 소켓과 WebRTC 이용한 것도 인터랙티브 웹사이트니까~ 
    - 웹 게임의 특성을 살리기 위해 어떻게 기술을 적용했는지 서술.
    - 게임을 게임답게 하기 위해(**게임성**) 노력한 점들을 위주로
    - 덕싯도 SPA => 코드 구조를 중점으로 (OOP, 클래스 구조)
    - 코드 구조를 도식화해서 보여주면 더 좋을 듯.
    - 좌충우돌... 시행착오... 개발자들의 흥미~

## 영상 제작 -> 민성
- 직접 데모하기는 시간 오래걸리니까. 영상 편집해서 만드는수밖에없다.
- 자르고 자막넣고 배속넣고 하는 거 쌉파서블~
- 풀영상(전체 플로우. 백로그처럼?) | 하이라이트 영상(데모데이용) 나누면 좋지 않을까?
- 좀 자세히 얘기하는 긴영상 <= 있으면 좋다??

### 녹화 계획
- teller 1명 화면, guesser 1명 화면
- 영상 녹화 후 편집 => 발표자료에 첨부 + 노션 첨부

### 하이라이트에 추가해야 할 부분
- 오리 움직이는거
- 스킵 기능
- 채팅 기능
- 설명서 => 풀영상
- 코드 잘못 됐을 때 => 풀영상으로 빼기
- 카드 hover시 효과
- 음성채팅 (private 그거로 들어가서 누르면 권한 확인 다시받아요 그것도 보여주면 좋을 듯)

### 발표자료 제작 >>
> 인트로(30초) + 영상(1분 30초) => 2분

1. 기획 (1분)
- ~~아이디어 선정과정 + 기술스택 선정 이유 => 발표 연습해보고 뺄지말지~~
- 게임 엔진 설계 (클래스 다이어그램) => 간단하게 언급하고 2번에서 구체적으로
- 피그마 작업 (디자인 작업), 백로그 작성 => 게임이 가지는 UX 고려 (하스스톤) => 애니메이션 기획, 음성 채팅 기획 등
- 소켓 API 명세 작성

2. 가독성과 통일성 고려하여 코드 작성하기(1분 30초)
- 개발
- 게임엔진 구축
- 통일된 구조로 코드 작성, 클래스 기반, 각 씬과 독립적인 매니저 클래스를 이용해 상태관리
- 고난
- 백엔드 소켓 관리 리팩토링
- 코드의 사용성을 고려하며 주기적 리팩토링

3. 시간 동기화 어떻게 했는가 (1분)
- 개발
- socket으로 scene 전환 타이밍 관리. (동시간대에 다른 scene을 보고있는 client들을 관리하기) => 처음엔 몇초뒤, 몇초뒤 이렇게 동작하게 만들었으나 후에 Date 객체 보내주기로 변경
- 고난
- RequestAnimationFrame 화면 안 볼 때도 동작하게 하기
4. 음성채팅 WebRTC (1분)
- 개발
- 로컬에서는 테스트가 안됨 => 원인 : CORS => PeerJS 스턴 서버 활용으로 해결
- 브라우저의 마이크 권한을 가져오려면 HTTPS 프로토콜을 사용했어야 함
- 고난 : https (why? WebRTC) => 뜻밖의 복사 성공

5. 그외
- 배포 자동화 => 게임과는 큰 관련은 없다고 생각해요(해람)
- 모듈화 (dotenv)
- 백로그와 이슈를 기반으로 프로젝트 관리

### 예상 질문에 대비하는 답변 준비 + 자료 조사
- 진정한 리뷰... => 노션 만들어서 권한 주기