2020.12.12

데모데이 관련 회의

• 영상 - 데모데이 버전 / 실제 플레이 버전

딕싯 모바일 영상 토요일 오후 3시 줌~

정해야 할 것들

1. 어떤 발표를 할 것인지, 강조할 포인트 (프로젝트 목표가 뭐였을까??? => 즐겁게 할 수 있으면서도??? 실력 향상을 위한 ... <- 1주차 회의록 참고해도 좋을듯??)
   • 5주동안 바닐라자바스크립트를 이용해서 재밌게 개발하면서도 도전과 성취감을 느낄 수 있는..
   • 짧은 시간 안에 모든걸 쏟아낼 수 있는 프로젝트가 됐으면 좋겠다!
   • 소켓.
   • "지금 안하면 언제 해보냐"
   • 소속이 없을 때 해볼 수 있는 프로젝트
2. 노션 팀 내용 작성 (팀 소개, 프로젝트 소개, 기술 특장점)
3. 발표 플로우? (영상 몇 분, 발표자 등)
4. 팀 기술 정리
5. 리드미도 더 추가할 것 있을지

---

발표 주제

due date Dec 8, 2020 2:00 PM → Dec 16, 2020 12:00 PM

한 두 문장 이내로 적어주세요. 산출물에 대한 소개 보다는 지난 5주 동안 팀이 함께 배우고 성장한 부분을 어필할 수 있도록 적어 주는게 좋겠죠?

프로젝트 소개

due date Dec 9, 2020 2:00 PM → Dec 13, 2020 11:00 AM

DUXIT은 스토리텔링 보드게임인 DIXIT을 온라인으로 즐길 수 있도록 개발된 웹 기반 보드게임입니다. 🃏 부스트캠프의 대표 캐릭터 부스트덕🐥 과 함께 감성의 세계로~ 🃏 내 취향에 맞게 부덕이의 컬러와 닉네임도 원하는 대로 정할 수 있어요. 🃏 기다리는 시간이 지겹지 않도록 부덕이들과 복작복작한 인터랙션 🃏 텍스트 채팅 및 음성 채팅으로 다른 플레이어들과의 실시간 소통 🃏 역동적인 애니메이션으로 더해지는 시각적 즐거움! 🃏 지금 아니면 언제 또 써보냐! 주니어의 패기로 바닐라 자바스크립트로 개발

팀원 소개

due date Dec 9, 2020 2:00 PM → Dec 13, 2020 11:00 AM

캠퍼ID_이름, 분야(Web/iOS 중 택일), 팀 내 역할 등을 적어주세요.

J035 김민성 (Web🌐)

게으른 개발자가 되고 싶습니다 || 10X 개발자가 되고 싶습니다

• 기술 스택 및 코드 구조 계획
• 코드 리팩토링
• 개발 환경 및 배포 환경 구축

J060 김해람 (Web🌐)

기계랑 코드는 뚜드려 패면 말 들어요.

• FE/BE Webpack, Babel 설정
• GitHub Actions를 이용한 자동 배포
• VanillaJS FE Application 상태 관리 Manager 구현
• Scene 작성

J109 안샛별 (Web🌐)

자바스크립트 좋아~

• 게임 플로우 진행을 위한 로직 관리 및 Waiting time 관리
• BE 코드를 JavaScript에서 TypeScript로 migration
• FE Scene 구현 개발 및 리팩토링
• SVG 이미지 파일 구현 및 전반적인 프로젝트 문서 관리

J208 최진혁 (Web🌐)

한다면 하는 남자 최진혁 등장!

• FE Scene 및 애니메이션 구현
• Scene 연결 작업
• FE/BE Socket API 작성 및 연동
• PeerJS를 활용한 WebRTC 사용

기술 특장점

due date Dec 9, 2020 2:00 PM → Dec 13, 2020 11:00 AM

우리 팀만의 기술 특장점을 적어주세요. 프로젝트에서 사용한 기술 스택을 단순히 나열하기 보다는 해당 기술을 사용하여 어떤 차별점을 도출하였는지를 위주로 작성해주세요.

VanillaJS를 이용한 게임 엔진 구축

• 게임 내에서 사용되는 오브젝트들의 클래스 추상화
• 대표적인 기능으로 게임 오브젝트(HTML element)를 원하는 x, y 위치에 두거나, 이동시키거나, 회전하거나 그 기준점을 변경할 수 있습니다.
• 이 추상화 작업을 통해 애니메이션 코드를 굉장히 간결하게 작성할 수 있었습니다.

Socket.io

• 실시간으로 통신을 해야하는 게임 특징상, HTTP 프로토콜 보다 WebSocket 프로토콜을 활용할 수 있는 Socket.io 라이브러리를 사용했습니다.

WebRTC

• 소통이 중요시 되는 게임 특성상 보다 나은 UX를 위해 사용자가 음성 채팅을 더 원활히 사용할 수 있는 P2P 방식을 사용했습니다.

Winston => 적을까요?

vanilla JS를 이용한 애니메이션 구현

• vanilla JS와 pure css로 애니메이션을 구현하기 위해 requestAnimationFrame()과 animate()를 상황에 맞춰 취사사용했습니다.