게임서버-스파르타코딩NodeJs_7기/CH6 최종 프로젝트26 위치 기반 북마크 도착 이벤트 기능 구현 계획 1. 개요목적: 사용자가 사전에 저장한 북마크 위치 반경 10m 내로 진입하면 도착 이벤트를 발생시키는 시스템 구현기술 스택:서버: NestJS, WebSocket클라이언트: Chrome, Kakao Maps API데이터베이스: Valkyrie (발키)2. 주요 기능 및 흐름1) 북마크 저장사용자가 특정 위치를 북마크로 저장하면 해당 좌표 (위도, 경도)를 Valkyrie DB에 저장2) 사용자 위치 추적클라이언트에서 정기적으로 (setInterval) 위치 정보를 가져옴Kakao Maps API 또는 Geolocation API를 활용하여 사용자의 현재 위치 확인3) 서버와 위치 데이터 통신클라이언트 → 서버: WebSocket을 통해 현재 위치를 주기적으로 전송서버 → 클라이언트: 사용자의 위치가 북.. 2025. 2. 26. 발키에서 복수 데이터 읽어오기 발키 서비스에 코드 추가 async getKeysByPattern( pattern: string, count: number = 100, ): Promise { let cursor = '0'; let keys: string[] = []; do { const [newCursor, foundKeys]: [string, string[]] = await this.client.scan( cursor, 'MATCH', pattern, 'COUNT', count.toString(), ); cursor = newCursor; if (Array.isArray(foundKeys)) { .. 2025. 2. 25. 마커로 길찾기 1. 마커 이동시켜 도착지로 카카오맵 불러오기더보기 🔥 업데이트된 기능길찾기 링크 자동 업데이트마커를 이동하면 새로운 위치를 반영하여 InfoWindow 업데이트https://map.kakao.com/link/to/장소명,위도,경도 링크가 마커의 최신 위치를 따라감.로컬 저장 (localStorage)새로고침해도 마지막으로 이동한 위치를 기억하여 복원.InfoWindow 자동 갱신updateInfoWindow(position) 함수로 마커 이동 시 InfoWindow를 자동 업데이트🎯 기대 효과마커를 이동한 후에도 최신 위치로 길찾기가 가능!사용자가 링크를 클릭하면 새 창에서 카카오 길찾기 페이지가 열림!2. 움직이는 마커 2개. 하나는 출발지, 하나는 도착지더보기 .. 2025. 2. 20. html에서 카카오 지도 api 사용하기 카카오 개발자 앱키 : https://developers.kakao.com/console/app/1202722/config/appKey카카오맵 : https://apis.map.kakao.com/web/wizard/html로 지도 띄우기더보기 마커 만들기더보기하나 만들기 // 마커 이미지의 주소(북마커아님. 이동이 자유로운 마커) var markerImageUrl = 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fch0TFq%2FbtsMojyLajz%2FbWu5fv0Ox11EuAlSI9RxA1%2Fimg.png', markerIma.. 2025. 2. 19. 웹소켓, 카카오맵 api 사용 계획 1. 만드는 방법기술 스택백엔드: NestJS (TypeScript), PostgreSQL (Prisma ORM), Redis (캐싱)프론트엔드: React (Next.js), Zustand (상태관리)지도 API: 카카오맵 API실시간 기능: WebSocket (Socket.io)구현 단계1. 기본 프로젝트 설정NestJS와 PostgreSQL을 설정하고 Prisma로 DB 스키마 정의카카오맵 API 키 등록2. 길찾기 기능프론트엔드에서 출발지/도착지를 입력하면 카카오맵 API로 경로 검색실시간 이동 업데이트를 위해 WebSocket 연결NestJS에서 경로 요청을 받아 처리하고 프론트엔드로 전송3. 북마크 기능유저가 특정 위치를 저장할 수 있도록 DB에 북마크 테이블 추가프론트엔드에서 유저의 북마크 .. 2025. 2. 19. 트러블슈팅 - 업적 dto의 날짜 타입이 적절치 않아 발생한 오류 문제 원인날짜관련 dto, 서비스에서의 처리가 entity의 타입과 다름.해결방법dto의 받는 형식을 문자열을 받아서 날짜형태로 바꿔 변수에 저장하도록 수정서비스에 받아온 문자열을 날짜 형태로 바꾸기 import { Type } from 'class-transformer'; @IsDate() @Type(() => Date) // 문자열을 Date 객체로 변환 expiration_at: Date; //서비스 // 📌 expiration_date를 Date 객체로 변환 const expirationAt = format(expiration_at, 'yyyy-MM-dd HH:mm:ss'); 2025. 2. 17. 이전 1 2 3 4 5 다음
