웹소켓, 카카오맵 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에 북마크 테이블 추가
• 프론트엔드에서 유저의 북마크 목록을 조회 및 관리

4. 위치 도달 알림

• 사용자의 현재 위치를 주기적으로 업데이트 (Geolocation API 사용)
• 백엔드에서 사용자의 위치와 북마크 위치를 비교하여 도달 여부 확인
• 도달 시 WebSocket을 통해 프론트엔드에 알림 전송

북마크-알림은 구현 성공후에

sub업적-업적P

핑크몽-캐치필크몽  

으로 바꾸기

 

 

1. 북마크 사용(유저가 인근위치 가면 알람 발생)

유저 위치 업뎃 - 10초(클라이언트 상에서 위치이동 10m이내면 DB 업데이트 안함)
//..? DB에 저장하는건 -10분
   타임윈도우 사용
   데이터가 새로 들어올 때 가장 오래된 데이터를 삭제해 유저당 DB에 저장된 위치데이터의 개수를 유지


2.길찾기(북마크사용 목요일까지 되면 하기)
 클라이언트가 보고 있는 화면 중앙의 위치로 카카오맵 새페이지에서 열기

 

 

핑크몽

지정 위치에 도달 시

등급정하기 - 확률
일치타입
해당 등급 핑크몽-확률

해서 나오는 핑크몽을 채집(시도)한다

핑크몽에게 주어진 좌표는 없음