미새문지

대기 방에 악기 선택 추가대기 방에 악기 선택을 넣기 위해 서버에서 기존에 보내주던 roomData 인자에 nickname과 instrument를 객체로 전달해줬다. 근데 프론트에서 기존에 받던 roomData.nickname이 아닌 roomData.playerStatus.nickname이런식으로 한번더 안으로 접근했어야 했는데 이 부분을 놓쳐서 에러 수정에 시간이 좀 걸렸다. 지금 생각해보면 바로 값이 제대로 들어오는지부터 확인했어야 했는데, 코드 정리를 못해 많이 더러워서 더 헷갈렸던 것 같다. 이 후 값을 받아 webCam 컴포넌트까지는 가져왔는데 기존에 플레이어를 받아와 준비상황까지 합치는 코드가 있었는데, const [playerStatuses, setPlayerStatuses] = useSt..

소켓 에러 해결기존에 구현한 소켓을 테스트하던 중 다른 방에 입장한 상태에서도 한쪽 방의 데이터를 변경하면 다른쪽 방까지 같이 바뀌는 것을 확인했다. 소켓 자체는 통신되었지만 각 방마다의 데이터를 분리해놓은것이 아니였기 때문에 발생한 문제였다. 그래서 서버에서 뿌려주는 데이터를 socket.on(`joinRoom${room.code}`) 이런식으로 개별적으로 나누어서 통신을 했다. 노래가 개별적으로 돌아가는 걸 확인하고 준비버튼과 채팅도 제대로 작동하는 걸 확인했다.친구창 구현빠진 부분 없나 코드를 살펴보던 중 친구창 구현이 빠져있어 친구창 작동 로직을 생각하던 중 상림이형이 구현한 로그인 로그아웃에 소켓을 안 넣은걸 확인했다. 친구창이 켜있는 동안 누군가가 접속하면 오프라인에서 온라인으로 바뀌어야 하기..

발표 후 피드백오전에 에러나는 부분을 수정하고 dev 브랜치에 올려서 모두와 공유했다.ppt는 재희님이 이전의 ppt를 참고해 만들어줬고 대본까지 작성해줘서 현우님이 그거 보고 발표 연습을 했다.일단 시연되는 부분은 재희님과 본인이 구현한 소켓 통신 부분과 인우의 웹 캠에서 모션으로 히트 사운드가 나는 기능이다.이 후 1시에 바로 발표하고 피드백 받았다.. 우리가 발표할 때 대기 방에 악기를 선택하는 부분도 넣지 못했고, 인게임을 설명하는 부분에서도 악기에 대한 설명을 보여주는 시각적 효과가 없어서 그런지 설명을 못해서 원장님이 피드백을 주셨다. 지금 뭐라고 설명하는지 알 수가 없다. 사용자가 알기 쉽게 설명을 해줘야 하는데 이게 뭐냐, 효과음으로 넣은 악기 소리도 너무 별로고 지금 이걸 게임에 어떻게 ..

소켓으로 채팅을 구현했다. 프론트에서 채팅 텍스트를 채팅 리스트에 담아 서버로 보내서 저장된 채팅 리스트 데이터를 방에 있는 모두에게 뿌려주는 식으로 작성했다. 이제 강의처럼 실시간으로 채팅이 보이고 소켓 통신의 방식을 조금 이해하여 다른 데이터 통신도 다 바꿔주었다. 채팅 창 구현이 되었기에 노래 변경, 유저 참여 & 유저 퇴장, 준비완료 버튼 등 여러 기능을 구현했다.오늘 하루는 웹 캠을 제외한 대기방의 소켓기능을 다 구현했는데, 웹 캠은 현재 인우가 미디어파이프를 이용해서 모션 인식을 할당 중이고, 현우님은 openvidu?를 이용해서 화상 통신 서버를 배포한다고 했으니 이 부분은 완료되는대로 적용시킬 예정이다. 일단 이렇게 대기방 기능은 거의 다 구현했지만, 제일 중요한 부분인 인게임 부분이 테스..

대기방 재희 듀오로 거의 다 구현방 참여 시 생성된 방의 코드를 이용해 참여하기, 랜덤매치에서 들어갈 방이 있으면 거기로 들어가고 없으면 새로 생성하기, 나갈 때 방 유저 목록에서 본인 제외하기, 노래 선택 시 그 노래로 저장되기 등, 대기방에 연결할 api는 거의 다 구현했다. 이제 남은 부분은 자잘한 기능들과 소켓 통신 부분인데 한번 해봐야 감을 잡을 것 같다. 프론트에서 토큰 안넣어서 인증 오류 이슈오전에 계속 인증에러가 발생해서 프론트 백 둘 다 코드를 뒤져봤는데, 그냥 프론트가 요청보낼 때 토큰을 담지 않아서 발생한 문제였다.팀 프로젝트에서 구성한 기능들은 거의 다 로그인 이후 생성되는 토큰이 있어야 진입이 가능한데 정작 본인이 토큰을 세션에 저장해놓고 헤더에 넣어주질 않았다. 어이없는 실수라 ..

프론트, 백 레포지토리 분리재희님과의 회의를 통해 현우님이 프론트와 백 작업하는 폴더를 레포로 분리해놨다. 이유는 각자 커밋한 이슈로 내용 분류할 때 백은 백 내용만, 프론트는 프론트만 볼 수 있게 하는게 좋지 않겠냐 해서 나누게 됐다. 그리고 전 기수들의 프로젝트를 보니 대부분 프론트와 백을 나눠놨기 때문에 흐름을 따라갔다. 회사에서 자주 쓰인다는 커밋 방식그리고 커밋하는 법에 대해 현우님이 설명해줬는데 이 방식이 회사에서 많이 쓰이는 방식이라고 한번 따라서 해보는게 좋겠다하여 규칙을 추가하게 되었다.각자의 기능을 Feature로 작성하고 Feature 푸시한 것을 Dev로 머지해서 코드를 모은다.기능 구현들이 다 완료되면, Release로 올려 모든 기능을 테스트해보며 이상이 없을 때까지 수정한다.수..

1.https://moonmisae-cdpt.tistory.com/209 웹 소켓(Web Socket) 채팅 앱 만들기 - 클라이언트 서버 연결유튜브의 코딩알려주는누나 영상에서 채팅앱을 만드는 강의를 듣고 작성한다. 코딩알려주는누나 강의 영상: https://www.youtube.com/watch?v=uE9Ncr6qInQ웹 소켓(WebSocket)웹 상에서 양방향 통신을 가능하게moonmisae-cdpt.tistory.com2.https://moonmisae-cdpt.tistory.com/211 웹 소켓(Web Socket) 채팅 앱 만들기 - 유저 로그인코딩알려주는누나 웹소켓 강의 : https://www.youtube.com/watch?v=oFiw5VvgRFg&t=0s 이전 학습 내용:https://..

코딩알려주는누나 메세지전송 강의 : https://www.youtube.com/watch?v=pRGOEtGjI-k&t=0s 이전 학습내용:https://moonmisae-cdpt.tistory.com/211 웹 소켓(Web Socket) 채팅 앱 만들기 - 유저 로그인코딩알려주는누나 웹소켓 강의 : https://www.youtube.com/watch?v=oFiw5VvgRFg&t=0s 이전 학습 내용:https://moonmisae-cdpt.tistory.com/209 웹 소켓(Web Socket) 채팅 앱 만들기 - 클라이언트 서버 연결유튜브의 코딩알려moonmisae-cdpt.tistory.com이전 강의에선 유저 이름을 넘겨 서버에서 유저 정보를 응답해주고 useState를 이용해 값을 받아놓기까지..