분류 전체보기168 [ 무물 ] 근처 사용자 찾기 #3 : 나와 동일한 프로필 유형 클릭하면 스탬프 적립 및 실시간 알림 애니메이션 내 주변 찾기를 통해 감지된 사용자 중 프로필 유형(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 업데이트등장 시 바운스 애니메이션 적용성능 최적화.. 2025. 6. 30. [ 무물 ] 근처 사용자 찾기 #1 : 위도 / 경도 GPS 기반 WebSocket 세팅하기 사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되는 기능을 만들기 위해 WebSocket을 도입했습니다.첫번째로 웹소켓을 세팅하고 연결하는 초기세팅 과정입니다. 🧭 전체 목표 기능‘무물’ 프로젝트는 다음 기능을 목표로 하고 있습니다.내 주변 100m 이내의 사용자 탐색실시간으로 사용자 위치 갱신 및 시각화사용자 클릭 시 실시간 알림 전송멀티 디바이스 간 통신 가능 (예: 핸드폰 ↔ 노트북)이러한 기능들은 기본적으로 사용자 간의 실시간 데이터 송수신이 필요합니다. 💡 왜 WebSocket인가?HTTP는 클라이언트가 요청해야 서버가 응답하는 구조라, 실시간 통신이 어렵고WebSocket은 양방향 통신을 통해 서버 → 클라이언트로도 메시지를 즉시 보낼 수 있다는 장점이 있습니다.프로젝트 .. 2025. 6. 29. [ 무물 ] 근처 사용자 찾기 #2 : 실시간 사용자 감지 및 사용자 아바타 불러오기 사용자 A와 B가 서로 100m 이내에 있으면 실시간으로 감지되는 기능을 추가하고, 해당 사용자의 아바타 모양대로 화면에 불러오는 과정입니다.단순히 감지하는 것이 아니라 A,B가 시간 차이를 두고 접속했을 때도 감지가 되어야 합니다. 🧭 요구 사항서버는 위치 정보를 기준으로 주변 사용자들을 계산하고, 클라이언트에 실시간 전송클라이언트는 서버로부터 받은 사용자 리스트를 상태값으로 저장하여 컴포넌트에 반영사용자마다 고유한 캐릭터 프로필이 존재하므로, userId를 기반으로 개별 정보 조회 API를 추가 호출 https://arty6848.tistory.com/189 [ 무물 ] 근처 사용자 찾기 #1 : 위도 / 경도 GPS 기반 WebSocket 세팅하기사용자 A와 B가 서로 10m 이내에 있으면 실시.. 2025. 6. 29. [ React ] 장바구니 구현 중 수량에 따른 가격 계산 오류 이슈 해결 React에서 useReducer를 사용해 장바구니 기능을 구현하던 중,수량을 조절하는 + 버튼을 클릭했을 때 가격이 NaN으로 표시되거나, 수량과 맞지 않는 가격이 표시되는 현상이 나타났습니다.이 글에서는 1️⃣ 문제 상황, 2️⃣ 원인 분석, 3️⃣ 해결 방법과 함께 관련 개념을 정리해보았습니다. 💡 내가 구현하고자 했던 기능"React 티셔츠 추가"버튼을 누르면 장바구니에 상품이 추가된다.+,- 버튼을 눌러 수량을 조절각 아이템의 수량에 따라 가격이 실시간으로 반영 🚨 문제 1: 가격이 NaN으로 표시됨📌 발생 상황수량 증가(+) 버튼을 눌렀을 때 가격이 NaN으로 표시됨🔍 원인sampleItem 객체 내부에서 total: this.price * this.quantity를 사용함하지만 일반.. 2025. 4. 7. [JavaScript] 텍스트 필드에 입력한 값을 화면에 추가하고 삭제하기 (투두리스트) ✅ 목표텍스트 필드 값에 값을 입력하면 아래 li에 내용이 추가된다.추가된 li를 클릭하면 '삭제하시겠습니까?' confrim 창이 뜨고 '확인'을 누르면 삭제된다.#appendChild #createTextNode # createElement #이벤트위임 ✅ Html Web Programming 공부할 주제를 기록해 보세요 주제 추가 추가할게요 label의 for과 input의 id를 맞춰줍니다. label의 for 속성은 해당 레이블이 어떤 입력 요소와 연결되어 있는지 알려줍니다.사용자가 label을 클릭하면 해당 입력 필드에 포커스가 가게 됩니다. 때문에 특히 모바일 기기에서 입력 필드보다 레이블을 클릭하여 사용자.. 2025. 2. 3. [Javascript] 버튼 하나로 다크 모드 설정하기 (toggle) 오늘 해 볼 실습입니다. ✅ 목표버튼 하나를 클릭하면서 다크모드, 라이트모드를 변환합니다.다크모드, 라이트모드의 자바스크립트 작성 시 toggle을 사용합니다. 먼저, html 코드를 작성합니다.이 실습은 다크모드, 라이트변환 자바스크립트 실습을 위한 것이니 html은 간단히 하겠습니다. ✅ Html가운데 중앙 정렬로 div 박스를 만듭니다.오른쪽 상단에 버튼을 고정합니다. Web Programming HTML CSS Javascipt 다크 모드 body 전체에 클래스를 주어 버튼을 누를 때마다 body 전체의 배경색, 글자 색을 한번에 변경합니다.body 클래스에 light-mode 클래스를 추가합니다.버튼이 눌릴 때 dar.. 2025. 2. 3. 이전 1 2 3 4 ··· 28 다음
