Week3 Peer Session

3주차 피어세션

참여자

J017	J024	J081	J125	J167	J200	J202	J212
김기한	김미정	박가연	오석호	이태욱	조현정	차재명	표석훈

프로젝트 공유 및 소개

진짜 다들 열심히 함...

• Web - 02

  • 배포 페이지

• Web - 12

  • 배포 페이지

3주차 간단 후기

-> 서로의 프로젝트를 대상으로.. 써야하나요??

• [Web - 02]

• 궁금한게 너무 많아서 질문할게 많네요 ㅋㅋㅋ 페이지 너무 귀여워요!
• 인형까지 만들어서 판매하시는 거 맞죠?
• 3개만 맛보기 했더니 감질나요,, 넘 재밌어요 ㅠ 맞다 ui도 짱귀여움
  • 킹갓 미정님이 디자인 해주셨습니다.
• 마우스커서 진짜 너무귀여워요! 혹시 디자이너가 있나요?
• TDD 잘봤습니다. 기한재명미정님이 짱이군요!
  • ATDD는 ACE TAEWOOK 이죠?

• [Web - 12]

• 빨리 출시해주세요. 현기증나니까~
• WebRTC 신기하네요~!~~~~ ㄴ 죽겠어요... 💥0<-< 🥕 ㄴ 살려주세요... ㄴ @)))))) 김밥 먹고 하세요
• 물음표 핑 제 얼굴에 왜 찍죠?
• 잔 치는 거 너무 신기했어요 !
• 바람직한 팀 문화 부러워요! ㄴ 222 ㄴ 바람직하지 않아요... ㄴ 모두가 득달같이 까는 문화... ㄴ 단합력 굳... ㄴ 벌금 2만원 문화...? ㄴ ??? : 나만 아니면 돼~!!!! ㄴ 저희도 벌금 걷어서 맛있는 거 사먹죠(총알 준비됐습니다) ㄴ 대 주주 쌉 에이블 합니다. ㄴ 달달합니다

3주차 구현 내용

• [Web - 02]

  • 전체적인 코드 리팩토링
    • 코드 컨벤션에 맞게 수정
    • try catch 구문 컨트롤러에 추가
    • 컴포넌트 잘게 쪼개기
    • custom fetch 함수 생성
    • redux dispatch 성능 개선
  • 게임 옵션 변경
  • 마이페이지 - 플레이리스트 수정/삭제 및 좋아요한 플레이리스트 취소 기능
  • 플레이리스트 노래 수정
  • 플레이리스트 노래 순서 변경
  • 로비 화면에서 방 검색 기능
  • 로비 화면에서 초대코드를 이용한 방 입장 기능
  • 방 생성에서 플레이리스트 선택
    • 무한 스크롤 + 검색
  • 게임 플레이에 따른 노래 재생

• [Web - 12]

  • http -> https
  • ?찍기
  • 건배 띄우기
  • 코드 리팩토링, 버그 수정ㅠㅠ
    • recoil -> redux로 변경
  • 영상, 음성 장치 선택
  • 하단 컨트롤바 구현
  • 로그인 구현
  • 채팅 아이디 띄우기
  • 방 별로 애니메이션 및 채팅 분리

기술 시도 및 공유

• [Web - 02]

  • drag and drop
    • HTML drag and drop API 사용
    • dragOver, dragStart, drop, dragEnd
  • 커서 커스텀
    • 첫시도는 이미지를 absolute하여 사용하였으나, 움직이는 배경화면과 같이 리소스를 많이 잡아먹어, 현재는 cursor.cur 파일을 통해 커서만 바꿔주는 방식으로 사용하고 있습니다. (단점 : 커서에 자신의 색상을 입힐 수 없다..)
    • 추후 방안에 있는 유저들의 부덕이들을 화면에 띄워주는 작업을 해볼 예정입니다.
    • 움직이는 배경의 부하 줄이기 : (gif vs svg transition)-[https://www.sarasoueidan.com/blog/svg-vs-gif/] 결과 svg 압승
  • PassThrough로 노래 건네주기

• [Web - 12]

  • socket.io를 이용해서 방 안의 접속자들에게 이벤트 전송하기
    • emit / broadcast 노가다...
  • 캔버스에 GIF 그림그려서 건배그림 띄우기 - Reject
  • <audio> 태그로 미아핑 소리 출력하기 (use-sound 썼다가 삭제)
  • Passport 사용해보기
    • 소문의 Naver OAuth2.0 만져보기
  • Redux-Saga!
  • 이번주는 계속 ... webRTC 비동기....비동기....비동기....버그..
  • Letsencrypt 통해 ssl 인증서 발급 및 nginx 설정

질문사항

• 브랜치 전략 dev 브랜치 없이 바로 main으로 합치면 좋은점

  • 개발 단계에서는 바로바로 배포하여 확인할 수 있는 것이 편했다.

• WebRTC

  • mesh 구조를 이용하기 때문에 8명 이상 접속하면 끊길 수 있다.
  • 소규모 서비스. p2p로 충분히 서비스 가능.

• Recoil에서 Redux로 변경한 이유?

  • 전역 변수 관리
  • WebRTC, Socket 등의 비동기 컨트롤에 있어서 redux + saga 조합이 적합할 것으로 판단
  • redux를 학습해 보자!

• NEXTJS를 통해서 처리할(한) 부분?

  • 라우팅이 편리해짐(폴더 구조를 통한 라우팅 지원)

• 방 안에서 왼쪽 위 재생버튼이 어떤 기능을 하나요?

  • 볼륨 컨트롤러 역할입니다. (미완성)

• mongoDB를 사용한 이유가 있을까요? (유튜브 음성이 저장되는 구조는 아닌 것 같아서 여쭤봅니다!)

  • 플레이 리스트 안에 음악에 대한 정보가 들어있는데, RDBMS로 구현하면 테이블이 6~8개인가로 많아지더라고요. 현재 mongoDB로는 2개로 운영하고 있습니다! 그래서 유연하게 처리하기 위해 mongoDB를 사용하고 있습니다!