미새문지

월요일이 대체 휴무라 코치님들의 발표날이 화요일로 변경됐다. 그래서 내일까지 보여줘야 할 부분은 확실하게 보여줘야 한다.서로 각자 발표 전까지 맡은 본인 할 일을 싹 끝내보기로 했다. 현재 본인의 기능 구현은 거의다 끝나서 인우가 맡은 웹 캠 부분을 해결하기 위해 같이 분석하고 작업했으나, 점검단계인 24시까지 우리가 원하던 기능이 제대로 구현되지 않았고, 인우는 기능에 대해 더 파본다고 했고, 본인은 기존 페이지의 UI를 좀 다듬기로 했다. 본인과 상림이형만 밤을 새기로 했고 현우님은 체력보존한다고 11시에 일찍 퇴근했었고 재희님과 인우는 2시 딱 맞춰서 내려갔다. 본인은 밤새서 로그인하는 부분과 , 메인 페이지의 헤더 부분 UI 구현, 메뉴 카테고리도 구현했고 대기 방 UI는 웹 캠 부분이 지금 불확..

인게임에 웹 캠 추가하기화요일에 게임이 되는걸 어떻게든 보여주기 위해  일요일에 상림이형과 현우님이랑 같이 와서 작업하는데 상림이형이 인게임 구조를 구현하는 동안 대기방에서 게임시작을 눌렀을 때 동일한 데이터로 웹 캠을 띄울 수 있게 가져왔다.근데 데이터 값의 구조가 대기 방과 달라서 값이 이상하게 들어왔는데 대기방에서는 room.players 안에 객체로 닉네임과 악기를 가져오는 방식으로 되어있었는데 인게임에서 가져오는 데이터는 room.game.players.... 등으로 되어있어 깊게 파고 들어가야 했었다. 데이터는 가져와서 상관은 없긴한데 재희님이 데이터를 대기방과 동일하게 보내줄 테니 다시 확인해보라 해서 내일 오전에 같이 수정하기로 했다.친구창과 메인페이지 select UI 구현현재 데이터가 ..

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

발표 후 피드백오전에 에러나는 부분을 수정하고 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://..