[필기노트] 카카오맵, API 구현

Click 이벤트는 마우스 클릭이 종료될 때 발생한다.


kakao.maps.Size(width, height) : 크기 정보를 담고 있는 사이즈 객체를 생성한다.

kakao.maps.Point(x, y) : 화면 좌표 정보를 담고 있는 포인트 객체를 생성한다.


각각의 marker를 생성하면서 생성된 것과 동시에 addListener에 입력받은 userId, type을 기반으로 함수를 삽입한다.
 TODO marker를 삭제하지않고 이동하는 방식으로 사용하려면 어떻게 해야할까?
  - markers를 object형식으로 저장하고, 키값을 userId로 하면 되지 않을까?
  - userId로 검색을 했을 때 데이터가 있을 경우 markers의 위치만 변경하고 , 없을때 생성하도록 하면?
 
 TODO 위도, 경도를 변환하기 위해서 거리 계산 수식을 확인해야한다.


-- API 지도 표시 방법
1. Socket을 이용해서 데이터를 뿌린다.
2. 첫 접속했을 때 자기자신의 위치를 서버로 전송한다.
3. 서버에서는 해당하는 위도, 경도를 계산해서 일정 범위 이내에 있는 데이터를 클라이언트에게 보낸다.
4. 각 소켓을 서버에서는 잡고 있어야 한다.

-- user/me 개인정보 반환 API

1. Users 필요 데이터 출력

SELECT userId, email, name, nickname, profileImg, statusMessage 
FROM Users
;

2. Likes 필요 데이터 출력

SELECT userId, likeItem
FROM Likes
;

3. GROUP_CONCAT을 사용해 Likes의 데이터를 하나의 레코드로 변형한다.
SELECT GROUP_CONCAT(likeItem ORDER BY likeItem ASC SEPARATOR ', ')
    FROM Likes 
    WHERE userId = 1
    GROUP BY userId
;

4. Sub Query를 사용해 Likes 데이터를 병합한다.

SELECT u.userId, u.email, u.name, u.nickname, u.profileImg, u.statusMessage,
(SELECT GROUP_CONCAT(likeItem ORDER BY likeItem ASC SEPARATOR ', ')
    FROM Likes 
    WHERE userId = u.userId
    GROUP BY userId) AS likeItem
FROM Users AS u
WHERE userId = 1
;




-- 친구 테이블 구상
friendUserId1, friendUserId2
 - 총 2개의 컬럼으로 구성
 - userId가 작을 경우 UserId1에 삽입, userId가 클 경우 UserId2에 삽입
 



-- Socket 실시간 위치 동기화를 위해 작성해야 할 순서
1. Socket.io를 Server와 html 파일에 적용시킨다.
2. Socket.io를 적용시킨 프로젝트에 데이터를 저장한다.
3. 일정한 Socket에만 데이터를 전송한다.