SteamPlus 프로젝트 링크 (https://steam-plus-theta.vercel.app/) Steam Plus steam-plus-theta.vercel.app 🏡 아키텍쳐 🎲기술적 의사 결정 사용기술 기술 설명 recoil 리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다. socket.io Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합..
socket.io 친구 개인 채팅2 어제 것을 이어서 하면 일단 서로의 소켓 방은 연결이 됐다. 이제 서로 채팅을 보내줘야 하는데 일단 react로 채팅방은 미리 만들어줬다. 그리고 input에 값을 넣어 보낼 때 일어날 함수를 만들어줬다. 보낼 정보를 만들어 준 후 socket에 보내줬다. 보낼 정보엔 방 이름도 넣어서 보내줬다. const chatInputOnSubmit = (e: any) => { e.preventDefault(); //빈칸 예외 처리 if (textInput === "") { return; } //채팅으로 보낼 시간 const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const..
socket.io 친구 개인 채팅 1 어제 했던 세팅에 추가해서 작업을 했다. 우선 친구를 우클릭을하면 1대1 채팅을 클릭해 넘어갈 수 있는 구조로 만들고 싶었다. 1. 유저 정보 전달 우선 상대와 socket으로 방을 친구별로 각각 만들어 통신하려면 상대의 고유 socket id를 알아내야 했다. 상대의 고유 socket id를 알아내기 위해 실행할때 id를 가져오고 그 socket id가 누구의 것인지 구분할 필요도 있었다. 처음에 useEffect로 서버에 각자 자신의 id와 socket id를 보낸다. useEffect(() => { socket.emit("nickName", myId, socket.id); }, []); server.js에서 받은 후 고유유저아이디/소켓아이디 의 구조로 만든후 배..
