사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되는 기능을 만들기 위해 WebSocket을 도입했습니다.첫번째로 웹소켓을 세팅하고 연결하는 초기세팅 과정입니다. 🧭 전체 목표 기능‘무물’ 프로젝트는 다음 기능을 목표로 하고 있습니다.내 주변 100m 이내의 사용자 탐색실시간으로 사용자 위치 갱신 및 시각화사용자 클릭 시 실시간 알림 전송멀티 디바이스 간 통신 가능 (예: 핸드폰 ↔ 노트북)이러한 기능들은 기본적으로 사용자 간의 실시간 데이터 송수신이 필요합니다. 💡 왜 WebSocket인가?HTTP는 클라이언트가 요청해야 서버가 응답하는 구조라, 실시간 통신이 어렵고WebSocket은 양방향 통신을 통해 서버 → 클라이언트로도 메시지를 즉시 보낼 수 있다는 장점이 있습니다.프로젝트 ..

사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되는 기능을 추가하고, 해당 사용자의 아바타 모양대로 화면에 불러오는 과정입니다.단순히 감지하는 것이 아니라 A,B가 시간 차이를 두고 접속했을 때도 감지가 되어야 합니다. 🧭 요구 사항서버는 위치 정보를 기준으로 주변 사용자들을 계산하고, 클라이언트에 실시간 전송클라이언트는 서버로부터 받은 사용자 리스트를 상태값으로 저장하여 컴포넌트에 반영사용자마다 고유한 캐릭터 프로필이 존재하므로, userId를 기반으로 개별 정보 조회 API를 추가 호출 https://arty6848.tistory.com/189 [ 무물 ] 근처 사용자 찾기 #1 : 위도 / 경도 GPS 기반 WebSocket 세팅하기사용자 A와 B가 서로 10m 이내에 있으면 실시..

내 주변 찾기를 통해 감지된 사용자 중 프로필 유형(Chat, Youtube,SNS, Books, Savings, Call) 중 동일한 유형을 클릭했을 때 나의 stamp 가 즉각적으로 +1 이 되고, 또 내가 다른 사용자 B를 클릭했을 때 B의 화면에 알림이 가도록 하였습니다. 🧭 요구 사항 사용자 A가 B를 클릭하면 B의 화면에 A의 아바타 위에 💛 하트 이모지 표시A는 클릭한 위치에 empty_stamp 애니메이션을 보여주고 해당 위치를 유지이미 클릭한 사용자는 다시 클릭해도 반응 없음A와 B가 같은 프로필 유형일 경우 A의 invited_count가 실시간으로 증가invited_count에 따라 A의 아바타 이미지 및 boosterDisplay 업데이트등장 시 바운스 애니메이션 적용성능 최적화..