문제 목차
1. 드래그 종료시 새로운 맵 생성해서 Element쌓임
1-1. 드래그 종료마다 재 렌더링
2. 화면 이동 -> 지도로 돌아왔을 때 이전에 클릭했던 마커를 기억함
3. 이용자 위치 수정 시 제대로 렌더링 하지 않음.
4. 마커 중복 렌더링
5. 이용자 위치 권한 거절 시 렌더링 하지 않음
6. Update 이후에 Bounds를 업데이트 하지 않음
7. 6번으로 인한 Marker 손실과 재렌더링
8. 6, 7번으로 인한 위치 변경 이후에도 이전 마커 기억하는 문제
9. 모드 변경 이후에 마커를 새로 그리지 않고, 기존 위치로 이동 시 마커 새로 그리지 않는 문제
10. update변경으로 이용자가 설정 변경하다가 창 종료하면 그 지점의 지도를 기억하는 문제
원인 및 해결
1. Drag 종료 시 새롭게 맵 생성 -> Update하는 방향으로 변경
해결 및 대응: 그러나 Update한다는 전제가, 이전에 커스텀(지도 중앙) Control이나 마커를 기억한다는 것이기때문에 물리적으로 Element 생성 요소를 제거함
Destroy하지 않은 이유?
-> Element는 깔끔하게 관리되나, 의존성 문제로 재생성 마다 재렌더링되기 때문에 지도 내부 요소들이 전부 깜박거리는 것처럼 보임
현 시점의 의견?
->component를 좀 분리하여 렌더링 의존성을 줄일 것 같음. 트리거 방식을 활용하는 것도 더 좋아보임.
2. 게시글 이동 -> 지도로 돌아왔을때 이전에 클릭했던 마커 기억
원인: 마커 생성 시점에서 판단 기준이 되는 상태 요소 중 DOM Reference객체를 잃어버렸기때문에, 관련 요소를 삭제해야하는데 제대로 삭제되지 않음.
해결: Atom 업데이트 시점의 상태가 명확하지 않아서였기때문에 useEffect로 관련 상태 초기화하는 로직 추가함.
3&4 이용자 위치 수정 시 제대로 렌더링 하지 않는 문제와 마커 중복 렌더링
원인: 컨텐츠 마커의 경우 드래그 종료 시점마다 map의 영역 변경이 필요, 의존성이 있는 상태 변경마다 계속 업데이트하기때문
해결: 중복렌더링 가능성이 있는 요소들 제거 후 Trigger 통해서 최소한으로 로딩되도록 변경
5. 이용자 위치 권한 거절 시 렌더링하지 않는 문제
원인: 브라우저 또는 컴퓨터 설정 상 location 거절하는 경우나 유저가 직접 거절하는 경우 getCurrentPosition method가 동작하지 않기때문
해결: 이전 회의때 나왔던 의견처럼 initialPosition을 제주도청 좌표로 변경하고, 유저 지역 상태 변경 후 API요청하여 백엔드에서도 현 유저 상태로 업데이트할 수 있도록 함 -> alert으로 새로고침 이후로도 제대로 업데이트 되지 않는 문제 발생하여 Async/Await으로 로직 동기화, Trigger에 관련 로직 추가하여 Map객체 생성할 수 있도록 변경.
6. Update 이후에 Bounds(좌표 범위) 업데이트 하지 않는 문제
원인: 맵을 Create할때만 Bounds관련 상태 변경하도록 로직처리 되어있었음.
해결: Dragend시에도 상태 업데이트 하도록 로직 추가
7. 6번으로 인한 Marker 손실과 재렌더링
원인: 기존에 Marker 관련 변수가 컴포넌트 지역 변수로 선언되어 있어, 지도 Update시점의 Marker는 Undefined, 따라서 업데이트나 생성 시 참조하는 변수가 초기값 또는 Undefined였음.
해결: useState로 지역상태로 기억하도록 변경하고, useEffect통해 Marker 생성 시마다 재렌더링(MarkerUpdate)하여 맵에 생성된 마커 추가할 수 있도록 변경함.
8. 6번, 7번으로 인한 위치 변경 이후에도 이전 마커를 기억하는 문제
원인: 이전에 생성했던 마커의 ID를 Key로 삼아 마커 재생성을 하기때문에 이용자의 위치가 변경되어도 마커를 새로 생성하거나 변경하지 않음.
해결: useEffect 의존성 변경과 아래의 로직 추가
1안 -> 모드 변경 시 기존의 마커를 clear해주는 방안
2안 -> map 관련 method(생성이나 업데이트) 사용 중, .every method 활용하여 결과값이 false라면, 안쪽에서 분기문 설정.
Position 값이 변경되면, Marker의 Position도 변경해주는 방안
선택: 1안
이유: Drag Event가 일어나 Position변경 -> 생성 -> Every 결과값 확인 하는 것이 느린 상황에서, 마커의 배열에서 찾고, 포지션을 다시 변경해주고 하는 것이 옳지 못하다고 느꼈음.
당시 한 번에 그리는 마커 갯수가 10000개 미만이었기때문에 갯수 총량을 10000개나 10만개라고 본다면,
1안 최대 10만(기존) * 10만(생성)
2안 최대 10만(기존) * 10만(생성) * 10만(변경)의 차이가 있을 것 같아 좀 더 명확하게 업데이트 할 수 있는 로직으로 Refactoring해야한다고 적혀있음.
9. 모드 변경 이후에 마커를 새로 그리지 않고, 기존 위치로 이동 시 마커 새로 그리지 않는 문제
원인: 모드 변경때 마커를 지도에서 제거한 것이지, 실제 객체는 남아있어 이용자 위치가 변경되면 마커 위치가 변경되어야하나, 위치 변경시마다 렌더링하거나 모드 변경시마다 재렌더링 할 수 없는 문제. 명확히는 상태 관리 문제
해결: 마찬가지로 useEffect의 의존성 변경과 업데이트 이후 .refresh method(Map에 있는)활용하여 모드 변경마다 지도 내용 새로고침해줄 수 있도록 변경.
10. Update 변경으로, 이용자가 설정 변경하다가 창 종료하면 그 지점의 지도로 위치를 기억하는 문제
원인: localStorage에 저장된 user의 초기 Position 기준으로 맵을 새로그리게 되는데, 브라우저 종료되더라도, position정보는 손실되지 않기때문에 일어난 일
해결:
1안-> 저장 장소를 sessionStorage로 변경
2안-> 초기 렌더링 시 position 초기화
선택: 2안
이유: 1번으로 선택할 경우 탭 닫았다가 다시 접근하는 경우 의도대로 동작하지만, 일반 새로고침으로 돌아오는 경우 마지막 지도의 위치를 기억하고 있음. 초기 렌더 초기화해주는 로직이 필요함.
만약 1안으로 한다면?
interface 생성해서 storage에서 가져오는 데이터 타입 맞춰주고, sessionStorage로 AtomStorage의 메서드와 타입 변경해줘야한다. 추가로, 메인에서 초기렌더링 시 동작하는 useEffect에서 한번 초기화 해주는 로직이 필요함.