Closed 0gyun closed 1 year ago
Jaewook-Lee
commented
1 year ago npm start 를 통해 Firefox 웹 브라우저로 테스트를 진행해봤습니다.
게임 버튼 클릭을 통한 접속
의견 전송
1번을 통해 WebSocket이 연결됨을 확인했습니다. 하지만 수신 받은 메시지는 모두 "Forbidden" 값이었습니다.
정상적으로 테스트 되면 백엔드에서 정의한 메시지로 수신되는건가요?
0gyun
commented
1 year ago @Jaewook-Lee 방에 접속하는 과정에서 battleId, userId, nickname을 이미 들고 있어야 하는데 해당 내용은 백엔드와 아직 통합 테스트를 할 수 없으므로 제가 하드코딩으로 박아놓고 테스트를 했었습니다. 추후 배포시에는 하드코딩이 없어야 하므로 해당 부분을 주석처리했던 것이 원인입니다. 임의의 정보를 넣고 테스트를 해보니 재욱님 소캣도 잘 동작하는 것을 확인했습니다.
Feat 설명
본 PR은 Front-end에서 WebSocket을 이용해 AWS API Gateway와 연동을 적용한 PR입니다. 또한 전체적인 컴포넌트에 대한 설명과 전체적 프론트의 구조에 대해 설명합니다.
테스트
현재 웹소켓은 API Gateway에서 dev-serverless-naruhodoo-websockets 과 연동되어 있습니다. 테스트는 하드코딩을 통해 진행되었으며 연결 과 의견 제출 을 제외한 다른 api 들은 아직 테스트하지 않았습니다. 테스트는 battleId, userId, nickname을 임의의 값을 넣어서 테스트를 했습니다. 혹 테스트를 하고 싶으신 분들은 해당 부분의 주석을 지우고 진행하시길 바랍니다.
터미널에서
npm start를 통해 테스트를 해볼 수 있으며 게임 페이지에 들어가면 콘솔 창에 웹소캣 연결이 되었다는 로그가 작성되는 것을 확인할 수 있습니다.컴포넌트 설명
BattlePage.js: 게임이 진행되는 페이지입니다. 싱글 페이지 어플리케이션으로 동작할 예정이며 웹소캣을 연결하는 부분이 현재 구현되어 있습니다.InGameNavBar.js: 게임 중의 상단 바에 대한 컴포넌트를 정의한 파일입니다. 컴포넌트를 BattlePage에 import해서 팀 이름들을 넘기면 해당 이름들이 상단 바에 적용됩니다.CardComponent.js: 의견들이 작성될 카드 뷰에 대한 형식을 정의한 파일입니다. 컴포넌트를 BattlePage에 import해서 작성한 유저의 이름과 의견, 그리고 좋아요 수를 넘기면 해당 내용들이 카드 형식으로 나타납니다.