문미새 개발일지

웹소켓과 소켓 통신소켓과 포트의 차이가 무엇인가요?소켓 (Socket)소켓은 네트워크 통신의 종단점으로, 두 시스템 간의 데이터 전송을 가능하게 한다. 소켓은 IP 주소와 포트 번호를 결합한 것으로, 네트워크 상의 특정 프로세스와 통신하기 위한 인터페이스이다.IP 주소: 네트워크 상의 특정 장치(호스트)를 식별포트 번호: 장치 내의 특정 애플리케이션(프로세스)을 식별프로토콜: TCP, UDP와 같은 통신 방식소켓은 클라이언트와 서버 간의 연결을 설정하고, 데이터 전송 및 수신을 관리하는 역할을 하며, 소켓 프로그래밍에서는 소켓을 생성하고, 특정 주소와 포트에 바인딩한 후, 연결을 수립하고 데이터를 주고받는다. 포트 (Port)포트는 네트워크에서 특정 프로세스를 식별하는 숫자이며, 포트 번호는 IP 주소와..

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

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

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

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

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를 이용해 값을 받아놓기까지..

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