Week4 Peer Session

4주차 피어세션

참여자

J081	J113	J119	J125	J127	J152	J200	J212
박가연	신우진	안병웅	오석호	우재석	이유노	조현정	표석훈

프로젝트 공유 및 소개

• Web - 12
  • 배포 페이지
• Web - 19
  • 배포 페이지

4주차 간단 후기

• Web - 12

  • 물음표 핑 중독성이 너무 강합니다.
    • 22222222
  • 맥주둘이 서로 치얼스 하는 애니메이션이 너무 멋집니다.
  • 디자인이 술취한 느낌이 난다고 하셧는데 오히려 좋은것 같습니다. 의도하신거 아니었나요
  • 메인 페이지 색상 녹색이 술병 색깔이랑 맞게 배치하신 디테일 맞나요?
  • 이런 기발한 아이디어들은 대체 어떻게 나오는 걸까요! 재밌는 기능들 잘 보았습니다 ㅎㅎ
    • 22222
  • 초대 코드도 좋은데 초대 링크도 괜찮을 것 같습니다
  • 술게임을 간단하게 키워드로 줘서 자율성을 주도록 하는거 너무 좋은거같습니다.
  • 저희도 나중에 술트리밍으로 회식 한번 하겠습니다

• Web - 19

  • 디테일을 신경 많이 쓰신 것 같습니다!! 대단해요!
  • 나름 써본다고 써봤는데 제가 써보지 못한 기능들이 소소하게 많이 존재하네요!
  • 100만개의 테스트.. 지난주 데모때 보고 깜놀했는데 그걸 바탕으로 개선까지 멋지게 해내셨네요!! 멋있으십니다!!
  • 최적화가 정말 존경스럽습니다,,
    • 222222222
    • 33333
    • 4444444
    • 👍
  • 디테일 챙기시면서 많이 하셨네요 대단 ㅠ UI도 귀여워요
  • 별로 하신거 없다고 하셨는데 엄청 많이하셨는데요..! 갓벽...
  • 이런 디테일들은 도대체 누가 찾는건가요...?

4주차 구현 내용

• web - 12

  • 사용자 정보 페이지
    • 닉네임 변경
    • 닉네임 로그 확인
    • 갈고리, 클로즈업, 채팅 횟수 로그 DB에 저장 (통계내기)
    • 친구 페이지 더미데이터까지 구현
  • MongoDB를 쓰기 위한 API 구성
    • socket.io에 API를 달아서 이벤트가 발생할 때마다 log에 1 추가
  • 클로즈업 기능
    • 직접 누른 클로즈업은 직접 취소가 가능
  • 방장 기능
    • 사용자들의 카메라 및 마이크 끄기 가능
    • 방 출입 제어 기능
    • 방장이 나가면 다음 접속자로 교체되는 기능
  • 투표 기능
    • 투표로 인한 클로즈업은 방장만 해제 가능
    • 60초가 끝나면 그 때 까지 투표한 사람들을 기준으로 처리
    • 현재 투표한 사람들이 찬성인지 반대인지 안했는지 이미지로 표현
    • 3명 이상일 때만 투표가 가능 (50%가 넘으면 클로즈업 처리이기 때문)
  • 참가자
    • 참가자 리스트와 각 참가자 옆에 심판과 친구추가 가능('나'와 이미 친구인 사람은 뜨지 않음)
    • 친구 추가시 디비 친구요청 리스트에 추가 및 받는사람 친구 수신 리스트에 추가

• Web - 19

  • 위치 관련
    • Geolocation API를 통한 현재 위치 요청
    • 한 번 불러온 위치 좌표를 브라우저의 local storage에 저장
    • 현재 위치 로딩 화면 🦁
    • 게시글마다 본인과의 거리 출력
  • 채팅기능
    • 채팅을 보낼 시에 jwt 토큰을 같이 보내어 server에서 유효성을 확인
  • 호스트용 메뉴
    • 호스트는 참여자들을 강제 퇴장시킬 수 있음
    • 호스트는 모든 참여자들이 포인트를 제출했을 경우에 포인트를 수령해올 수 있음
  • 포인트 기능
    • 포인트 확정 버튼으로 포인트 제출 가능 - 잔여포인트에서 빠져나감
    • 취소 버튼으로 제출 취소 가능 - 잔여포인트 다시 채워짐
    • 호스트를 제외한 참여자가 모두 포인트를 제출하면 포인트 수령 버튼 활성화
  • LinkPreview
    • 게시글 작성 때 입력한 url의 html에서 metadata를 이용하여 출력(metadata 파싱은 npm 모듈이...)

기술 시도 및 공유

• Link Preview를 그대로 npm i해서 받으려고 했는데 모바일 웹앱에 맞는 크기가 안됨 항상 웹사이트에 맞는 크기만큼의 Link preview가 만들어짐

  • 깃헙에 들어가보니 html metadata 파싱하는게 있어서 직접 가지고 와서 서버에서 파싱해서 보내주는 식으로 바꿨다!

• 로그인 확인을 위해 항상 fetch요청을 보내는게 비효율적이라고 생각해서 jwt토큰을 가지고 있다면 로그인 상태를 전역상태로 줘서 관리하는 방식으로 구현했다

• 소켓을 생각보다 많이 사용하게 되면서, 파이프롤 통해 이벤트를 순차적으로 처리하려고 했으나 그것마저 부족해지면서 2차적인 방법이 필요했음. 1차적으로 커스텀 훅에 진입하고, 2차적으로 분리되어 있는 모듈을 통해 소켓의 리스너들을 등록. 파일을 좀 더 깔끔하게 관리할 수 있었음!

질문 및 개선사항

• Web - 12

  • 영상이 전혀 지연같은게 없는데 뭔가 처리를 해주신 건가요?
    • 클라이언트의 성능에 의존합니다
  • 방에 총 몇명까지 참여 가능한가요?
    • 무제한으로 참여 가능합니다.
  • P2P 방식에서 사용자가 많아질때 클라이언트의 부담을 어떻게 최적화해주실지 궁금하네요! 기대됩니다.
    • 222222
    • 영상 해상도를 조정하는 방향으로
    • 그 이상의 최적화를 하려면 P2P 방식을 사용하기 어렵고, 서버의 운영 비용이 증가하게 됨
  • 영상 화질과 프레임이 높아서 좋은데 사람이 많아지면 부담이 될 것
    • 정확하십니다....
  • 부캠 끝나고 술트리밍에서 같이 술마시면 재밌겠네요
    • 환영합니다 :) 8명... 노력해보겠습니다..
  • 방에 참여하는 인원이 많으면 p2p 때문인지 클라이언트 부하로 오류가 있던데, 방 개수도 많아지면 어떻게 되나요
    • 방 개수 자체는 상관이 없습니다
    • 물론 같은 컴퓨터에서 여러 방에 접속을 하면 컴퓨터가 터집니다...
  • 몽고디비를 선택하신 이유 궁금합니다.
    • 로그 데이터를 저장하는데 몽고디비의 장점이 있었음
  • 방장만 사용할 수 있는 기능이 몇 가지 있는 것 같은데, 방장이 맞는지의 여부를 클라이언트에서 판단하나요, 아니면 서버에서 판단하나요?
    • 서버에서도 방장 여부를 검사!
  • 하루 평균 근무 시간은...? ㄴ 방금 이번주 계산했습니다.. 14시간 입니ㅏㄷ.... ㄴ 헉!! ㄴ ???????????????? ㄴ ????????????????????????????????????????????????????? ㄴ 나눗셈 안하신거 아니에요??? 어제 한 시간 조기퇴근... ㄴ 1시간 일찍퇴근!! 👍

• Web - 19

  • 반응형을 제작할 생각이 있으신가요?

  • width에 따라 다른 화면이 뜨도록 구현하시고 있나요?!!

    • iphone 6,7,8 + 사용중

  • https를 어떻게 구현하셨는지 궁금합니다!

  • Material UI를 많이 사용하셨는데, 사용에 별다른 불편함은 없었나요?? 장점은 어떤게 있을까요??

    • 깔끔
    • 있어보임 (애니메이션)
    • 멘토링때 첫인상은 디자인이다라는 말을 들어서

  • recoil을 선택하신 이유

    • recoil이 쓰기가 쉽다 (Hook과 똑같아서)
    • react에 가장 맞는 상태라이브러리라고 생각해서
    • 재렌더링이 적다라고 생각 (ContextAPI에 비해서)