1. zoom level 값 변경 시 리렌더링 어떻게? zoom level에 따라 오버레이와 마커 등을 각각 다르게 렌더링 하고자 하였다. 이에 따라 현재의 zoom level 값을 useState 훅으로 관리할 필요가 있었다. 아래 코드와 같이 getZoom() 메서드를 이용해 보았지만 아쉬움이 많았다. 왜냐하면 zoom level이 변경될 때 즉시 리렌더링이 일어나지 않았기 때문이다(아래 코드에는 작성하지 않았지만 naverMap.current?.getZoom()의 반환 값을 useState에 넣어보기도 하였으나 결과는 동일했다). 그렇다면 어떻게 해야 zoom level 값이 변경될 때 즉시 리렌더링 할 수 있을까? // (생략) const naverMap = useRef(); useEffect((..

섹션 2: 기본 & 기본 타입 📌 튜플(tuple) 독특한 배열 각 요소 별로 타입을 지정할 수 있으며, 고정된 길이 가짐 push() 메서드로 요소 추가할 경우 길이 늘어남 const person: { name: string; age: number; hobbies: string[]; // 배열 role: [number, string]; // 튜플 } = { name: "김일남", age: 99, hobbies: ["Squid Game", "Make Money"], role: [1, "businessman"], }; // person.role[1] = 2; // 1번 인덱스는 string 타입 이므로 number 타입의 값으로 변경할 수 없다. person.role[1] = "chairman"; // 변..

1. 마커 누적 현상 마커를 커스텀 오버레이로 만들어 사용했다. 그 이유는 마커에 서버로부터 받은 데이터를 표시해야 했기 때문이다. 동적인 데이터를 렌더링 하기 위해 useEffect 훅을 사용했다. 그런데 데이터가 변경(리렌더링) 될 때마다 동일한 위치에 동일한 마커가 계속해서 쌓이는 현상이 발생했다! 2. useEffect의 return 적용 function MarkerCluster({ data }) { const navermaps = useNavermaps(); const map = useMap(); const [cluster, setCluster] = useState(null); // (생략) const MarkerClustering = makeMarkerClustering(window.naver..

1. 네이버 지도 API 설치 npm install react-naver-maps --save 2. App.js에 NavermapsProvider 적용 NavermapsProvider의 경우-이 글을 작성하는 시점에-공식 문서에는 NaverMapsProvider로 되어 있었고 따라서 로딩 에러가 발생했다. 따라서 NavermapsProvider라고 import 해야 한다. // src/App.js import { NavermapsProvider } from "react-naver-maps"; import NaverMapsMarkerCluster from "./components/NaverMapsMarkerCluster"; function App() { // ncpClientId에 네이버 지도 API 클라..

1. NaverMaps Provider 에러 네이버 지도 API 마커 클러스터 튜토리얼을 따라 해 보고자 했고, 시작부터 에러를 만났다. 2. NaverMapsProvider가 아닌 NavermapsProvider Attempted import error: 'NaverMapsProvider' is not exported from 'react-naver-maps' (imported as 'NaverMapsProvider'). ERROR in ./src/App.js 9:30-47 [그림 1]과 같이 QuickStart를 따라 NaverMapsProvider를 import 했는데 위와 같은 에러가 발생했다. 😉 공식 문서 Quickstart : https://zeakd.github.io/react-naver-..

1. 두 배열에서 일치하지 않는 객체 요소 구하기 const arr1 = [{ id: 1, name: "a" }, { id: 2, name: "b" }]; const arr2 = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }]; 위와 같이 객체를 요소로 가진 두 개의 배열이 있다. 이 두 배열을 비교해 일치하지 않는 객체 요소인 { id: 3, name: "c" }를 구하고자 한다. 2. filter(), some() 배열 요소 활용한 문제 해결 filter() 배열 메서드는 매개 변수로 true/false를 반환하는 콜백 함수를 가진다. some() 배열 메서드는 ||연산자와 비슷해서 요소 중 하나라도 true이면 true를 반환한..

1. 커스텀-오버레이-마커의 앵커와 위경도 좌표 불일치 서버로부터 오는 데이터에 따라 컬러, 애니메이션 등 스타일이 변경 적용되는 마커를 만들어야 하는 상황이었다. 카카오 지도 API에서는 HTML, CSS, JavaScript를 이용해 커스텀하게 마커를 만들 수 있는데 이것을 커스텀 오버레이라고 부르고 있다. 이 글에서는 커스텀한 마커를 만들고 마커 아래에 있는 뾰족한 부분, 즉 앵커에 위경도 좌표가 정확하게 위치하도록 하는 방법에 대해 다룬다. 2. 커스텀-오버레이-마커 만들기 1) 카카오 지도 마커와 div 요소 지도에 찍기 [그림 1]과 같이 카카오 지도의 특정 위경도에 카카오 지도 마커와 커스텀-오버레이-마커로 만들 div 요소를 찍었다. 카카오 지도 마커의 경우 앵커 부분이 지정한 위경도에 위..

1. NextAuth 설치 npm install next-auth 😉 공식 문서 : https://next-auth.js.org/getting-started/example 2. OAuth 구글 계정 로그인 구현 😉 공식 문서 : https://next-auth.js.org/providers/google 📌 구글 클라우드 설정 구글 클라우드 설정 URL로 이동(https://console.cloud.google.com/apis/credentials) OAuth consent screen : 구글 설정(프로젝트 생성 등) Credentials > CREATE CREDENTIALS > OAuth client ID : OAuth 클라이언트 아이디 생성 Authorized redirect URIs에-공식 문서 C..