준비물 : 네이버 맵 사용을 위한 클라이언트 ID 풀코드는 아래와 같음. import React, { useEffect, useRef } from 'react' import { NaverMaps, ClusteringMapProps } from '../types/naverMaps' import authConfig from 'src/configs/auth' // shopList (상점 목록)과 onShopSelect (상점 선택시 호출할 함수) 두 개의 prop을 받음 const NaverMapMarketClustering = ({ shopList, onShopSelect }: ClusteringMapProps) => { // useRef를 사용하여 지도를 표시할 DOM 요소의 참조(mapRef)를 생성 c..

Next.js에서는 React와 비슷하지만, 서버사이드 렌더링이나 정적 사이트 생성 등의 추가 기능을 제공합니다. 이 경우 Google Maps를 사용하기 위해 직접 스크립트를 로드하는 방식을 사용할 수 있습니다. 환경 변수를 사용하여 Google Maps API 스크립트를 로드하고 현재 위치에 마커를 표시하며, 2km 반경의 원을 그리는 방법에 대한 예시입니다. 먼저, public 디렉토리에 GoogleMap.js라는 스크립트 파일을 만듭니다 // public/GoogleMap.js window.initMap = function() {}; function loadScript(src, position, id) { if (!window.google) { const script = document.creat..

Next.js의 dynamic 기능은 JavaScript 또는 TypeScript 코드를 동적으로(importing dynamically) 가져오는 역할을 합니다. 이것은 특히 서버 측 렌더링(SSR) 또는 정적 사이트 생성(SSG)과 같은 Next.js의 고유한 기능을 이용하는 동안, 브라우저에서만 작동하는 특정 라이브러리를 사용하려고 할 때 매우 유용합니다. dynamic의 기본적인 사용 예제 import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => import('../components/hello').then((mod) => mod.Hello) ) function Home() { return ( HOME PAGE is her..

Next.js는 빌드 과정에서 여러가지 최적화와 사전 계산 작업을 수행하며, 이러한 작업의 결과물은 .next 디렉토리에 저장된다. .next 디렉토리 안의 하위 디렉토리들의 역할은 아래와 같다. cache: 이 디렉토리는 Next.js의 빌드 캐시를 저장하는 곳! 이를 통해 변경되지 않은 소스 코드에 대한 재컴파일을 방지하고 빌드 속도를 향상시킨다. 이 캐시는 next build를 실행할 때마다 생성되고, next dev를 실행할 때는 사용되지 않는다. server: 이 디렉토리는 서버사이드 렌더링(SSR)이 필요한 페이지의 결과물을 포함. 이는 Next.js가 초기 페이지 로드를 처리하기 위해 Node.js 환경에서 실행하는 JavaScript 파일들이며. 여기에는 각 페이지의 HTML을 생성하는 로..

서버사이드 렌더링을 하는 nextJs에서 컴포넌트는 각 페이지마다 사전에 불러와야할 데이터가 있습니다. (이하 data fetching) react, vue같은 Client Side Rendering (CSR)의 경우는 useEffect, created 함수를 이용하여 data fetching을 합니다. 서버사이드에서 실행하는 next에서는 getInitialProps를 이용하여 data fetching 작업을 합니다. next v9 이상에서는 getInitialProps 대신 getStaticProps, getStaticPaths, getServerSideProps을 사용하도록 가이드 합니다. getStaticProps Fetch data at build time, pre-render for Stati..