{"id":197,"date":"2025-08-21T10:03:41","date_gmt":"2025-08-21T01:03:41","guid":{"rendered":"https:\/\/hed-g.me\/?p=197"},"modified":"2025-08-21T10:05:19","modified_gmt":"2025-08-21T01:05:19","slug":"next-jsreact%ec%97%90%ec%84%9c-%eb%84%a4%ec%9d%b4%eb%b2%84-%ec%a7%80%eb%8f%84-api-%ea%b9%94%eb%81%94%ed%95%98%ea%b2%8c-%ec%97%b0%eb%8f%99%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=197","title":{"rendered":"Next.js(React)\uc5d0\uc11c \ub124\uc774\ubc84 \uc9c0\ub3c4 API \uae54\ub054\ud558\uac8c \uc5f0\ub3d9\ud558\uae30"},"content":{"rendered":"\n<p>\uc548\ub155\ud558\uc138\uc694! \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Next.js (React) \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c <strong>\ub124\uc774\ubc84 \uc9c0\ub3c4 API<\/strong>\ub97c \uc5f0\ub3d9\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uad6d\ub0b4 \uc0ac\uc6a9\uc790\ub97c \ub300\uc0c1\uc73c\ub85c \ud558\ub294 \uc11c\ube44\uc2a4\ub97c \uac1c\ubc1c\ud55c\ub2e4\uba74 \ub124\uc774\ubc84 \uc9c0\ub3c4 \uc5f0\ub3d9\uc740 \ud544\uc218\uc801\uc778 \uae30\ub2a5 \uc911 \ud558\ub098\uc778\ub370\uc694. Next.js\uc758 \ub80c\ub354\ub9c1 \ubc29\uc2dd\uacfc React\uc758 Hook\uc744 \ud65c\uc6a9\ud558\uc5ec \uae54\ub054\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\ud604\ud558\ub294 \uacfc\uc815\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc18c\uac1c\ud574 \ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\uc2dc\uc791\ud558\uae30 \uc804\uc5d0: \ub124\uc774\ubc84 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc \uc124\uc815<\/strong><\/h3>\n\n\n\n<p>\uac00\uc7a5 \uba3c\uc800 \ub124\uc774\ubc84 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub4f1\ub85d\ud558\uace0 <strong>Client ID<\/strong>\ub97c \ubc1c\uae09\ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4. \uc774 ID\ub294 API \uc778\uc99d\uc5d0 \uc0ac\uc6a9\ub418\ubbc0\ub85c, \uc5c6\ub2e4\uba74 \uc544\ub798 \uacf5\uc2dd \uac00\uc774\ub4dc\ub97c \ucc38\uace0\ud558\uc5ec \uc900\ube44\ud574 \uc8fc\uc138\uc694.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/navermaps.github.io\/maps.js.ncp\/docs\/tutorial-1-Getting-Client-ID.html\">\ub124\uc774\ubc84 \uc9c0\ub3c4 API \uc0ac\uc6a9 \uc2e0\uccad \uac00\uc774\ub4dc<\/a><\/li>\n<\/ul>\n\n\n\n<p>\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \ubd84\uc740 \ud0c0\uc785 \uc815\uc758 \ud30c\uc77c\uc744 \uc124\uce58\ud558\uace0 \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/navermaps.github.io\/maps.js.ncp\/docs\/tutorial-3-Using-TypeScript.html\">\ub124\uc774\ubc84 \uc9c0\ub3c4 API TypeScript \uc0ac\uc6a9 \uac00\uc774\ub4dc<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: \ub124\uc774\ubc84 \uc9c0\ub3c4 API \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub4dc\ud558\uae30<\/strong><\/h3>\n\n\n\n<p>Next.js\uc5d0\uc11c \uc678\ubd80 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub85c\ub4dc\ud560 \ub54c\ub294 <code>next\/script<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uac00\uc7a5 \uc88b\uc2b5\ub2c8\ub2e4. \ud398\uc774\uc9c0 \ub85c\ub529\uc744 \ucd5c\uc801\ud654\ud558\uace0 \uc2a4\ud06c\ub9bd\ud2b8 \ub85c\ub529 \uc2dc\uc810\uc744 \uc81c\uc5b4\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p><code>app\/layout.tsx<\/code>\uc5d0 \uc544\ub798\uc640 \uac19\uc774 <code>&lt;Script&gt;<\/code> \ud0dc\uadf8\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app\/contact\/page.tsx \ub610\ub294 \uc9c0\ub3c4\uac00 \ud544\uc694\ud55c \ub2e4\ub978 \ud398\uc774\uc9c0\n\nimport Script from \"next\/script\";\n\nexport default function RootLayout({ children }: Readonly&lt;{ children: React.ReactNode }&gt;) {\n  return (\n    &lt;html lang=\"ko\"&gt;\n      &lt;body&gt;\n        &lt;Script strategy=\"beforeInteractive\" src={`https:\/\/oapi.map.naver.com\/openapi\/v3\/maps.js?ncpKeyId=${process.env.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID}`} \/&gt;\n        {children}\n      &lt;\/body&gt;\n    &lt;\/html&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p><strong>\uc8fc\uc694 \ud3ec\uc778\ud2b8:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>strategy=\"beforeInteractive\"<\/code>: \ud398\uc774\uc9c0\uac00 \uc0c1\ud638\uc791\uc6a9 \uac00\ub2a5\ud574\uc9c0\uae30 \uc804\uc5d0 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc2e4\ud589\ud558\uc5ec, \uc9c0\ub3c4 API(<code>window.naver<\/code>)\uac00 \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc2dc\uc810\uc5d0 \uc874\uc7ac\ud558\ub3c4\ub85d \ubcf4\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>Client ID \uad00\ub9ac<\/strong>: \uc2e4\uc81c ID\ub97c \ucf54\ub4dc\uc5d0 \ud558\ub4dc\ucf54\ub529\ud558\ub294 \ub300\uc2e0, <code>.env.local<\/code> \ud30c\uc77c\uc5d0 \ud658\uacbd\ubcc0\uc218\ub85c \uc800\uc7a5\ud558\uace0 <code>process.env<\/code>\ub97c \ud1b5\ud574 \ubd88\ub7ec\uc624\ub294 \ubc29\uc2dd\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4. (<code>NEXT_PUBLIC_<\/code> \uc811\ub450\uc0ac\uac00 \uc788\uc5b4\uc57c \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uc811\uadfc \uac00\ub2a5\ud569\ub2c8\ub2e4.)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: \uc9c0\ub3c4 \ud45c\uc2dc\ub97c \uc704\ud55c React \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131\ud558\uae30<\/strong><\/h3>\n\n\n\n<p>\uc774\uc81c \uc9c0\ub3c4\ub97c \uc2e4\uc81c\ub85c \ub80c\ub354\ub9c1\ud560 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. <code>useRef<\/code>\ub85c \uc9c0\ub3c4\ub97c \ub2f4\uc744 DOM \uc694\uc18c\ub97c \ucc38\uc870\ud558\uace0, <code>useEffect<\/code>\ub97c \uc0ac\uc6a9\ud574 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8\ub41c \ud6c4\uc5d0 \uc9c0\ub3c4 \uc0dd\uc131 \ub85c\uc9c1\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ components\/ContactUsMap.tsx\n\n\"use client\";\n\nimport { useRef, useEffect } from \"react\";\n\nexport default function ContactUsMap() {\n  const naver = typeof window !== \"undefined\" &amp;&amp; window.naver;\n\n  \/\/ \uc9c0\ub3c4\ub97c \ub2f4\uc744 DOM \uc694\uc18c\uc5d0 \ub300\ud55c ref \uc0dd\uc131\n  const mapElement = useRef&lt;HTMLDivElement | null&gt;(null);\n\n  useEffect(() =&gt; {\n    \/\/ window.naver \uac1d\uccb4\uac00 \ub85c\ub4dc\ub418\uc5c8\ub294\uc9c0, ref\uac00 \uc720\ud6a8\ud55c\uc9c0 \ud655\uc778\n    if (!naver || !mapRef.current) return;\n\n    \/\/ \uc704\ub3c4\n    const latitude = 37.5716229;\n    \/\/ \uacbd\ub3c4\n    const longitude = 126.9767879;\n\n    \/\/ \uc9c0\ub3c4\uc758 \uc911\uc2ec \uc88c\ud45c \uc124\uc815\n    const location = new naver.maps.LatLng(latitude, longitude);\n\n    \/\/ \uc9c0\ub3c4 \uc635\uc158 \uc124\uc815\n    const mapOptions: naver.maps.MapOptions = {\n      center: location,\n      zoom: 17,\n      zoomControl: true, \/\/ \uc90c \ucee8\ud2b8\ub864 \ud45c\uc2dc\n      scaleControl: false, \/\/ \uc2a4\ucf00\uc77c \ucee8\ud2b8\ub864 \ube44\ud45c\uc2dc\n    };\n\n    \/\/ \uc9c0\ub3c4 \uc778\uc2a4\ud134\uc2a4 \uc0dd\uc131\n    const map = new naver.maps.Map(mapElement.current, mapOptions);\n\n    \/\/ \uc9c0\ub3c4 \uc704\uc5d0 \ub9c8\ucee4 \uc0dd\uc131\n    new naver.maps.Marker({\n      position: location,\n      map: map,\n    });\n  }, &#91;]); \/\/ \ucef4\ud3ec\ub10c\ud2b8\uac00 \ucc98\uc74c \ub9c8\uc6b4\ud2b8\ub420 \ub54c \ud55c \ubc88\ub9cc \uc2e4\ud589\n\n  return (\n    \/\/ \uc9c0\ub3c4\uac00 \ub80c\ub354\ub9c1\ub420 div \uc694\uc18c\n    &lt;div ref={mapElement} style={{ minHeight: \"400px\" }} \/&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: \ucf54\ub4dc \ud575\uc2ec \ubd84\uc11d<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>\"use client\"<\/code><\/strong>: <code>useRef<\/code>, <code>useEffect<\/code>\uc640 \uac19\uc740 React Hook\uacfc <code>window<\/code> \uac1d\uccb4\uc5d0 \uc811\uadfc\ud558\ub824\uba74 \ud074\ub77c\uc774\uc5b8\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc120\uc5b8\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>useRef&lt;HTMLDivElement><\/code><\/strong>: <code>mapElement<\/code>\ub77c\ub294 ref\ub97c \uc0dd\uc131\ud558\uc5ec JSX\uc758 <code>&lt;div><\/code> \uc694\uc18c\uc640 \uc5f0\uacb0\ud569\ub2c8\ub2e4. \ub124\uc774\ubc84 \uc9c0\ub3c4 API\ub294 \uc774 DOM \uc694\uc18c\ub97c \ucee8\ud14c\uc774\ub108\ub85c \uc0ac\uc6a9\ud574 \uc9c0\ub3c4\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>useEffect(() => { ... }, [])<\/code><\/strong>: \uc774 Hook\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \ub80c\ub354\ub9c1\ub418\uace0 DOM\uc5d0 \ub9c8\uc6b4\ud2b8\ub41c \uc9c1\ud6c4\uc5d0 \uc2e4\ud589\ub429\ub2c8\ub2e4. <code>window.naver<\/code> API\uc640 <code>mapElement.current<\/code>(\uc2e4\uc81c <code>&lt;div><\/code> \uc694\uc18c)\uc5d0 \uc548\uc804\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\ub294 \ucd5c\uc801\uc758 \uc2dc\uc810\uc785\ub2c8\ub2e4. \uc758\uc874\uc131 \ubc30\uc5f4\uc744 <code>[]<\/code>\ub85c \ube44\uc6cc\ub450\uc5b4 \ucd5c\ucd08 \ub80c\ub354\ub9c1 \uc2dc \ud55c \ubc88\ub9cc \uc2e4\ud589\ub418\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>new naver.maps.Map(...)<\/code><\/strong>: <code>naver.maps<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc9c0\ub3c4 \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uccab \ubc88\uc9f8 \uc778\uc790\ub85c\ub294 \uc9c0\ub3c4\ub97c \ub2f4\uc744 DOM \uc694\uc18c(<code>mapElement.current<\/code>)\ub97c, \ub450 \ubc88\uc9f8 \uc778\uc790\ub85c\ub294 \uc9c0\ub3c4 \uc635\uc158(\uc911\uc2ec \uc88c\ud45c, \uc90c \ub808\ubca8 \ub4f1)\uc744 \uc804\ub2ec\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong><code>new naver.maps.Marker(...)<\/code><\/strong>: \uc9c0\ub3c4 \uc704\uc5d0 \ud45c\uc2dc\ud560 \ub9c8\ucee4\ub97c \uc0dd\uc131\ud558\uace0, <code>map<\/code> \uc18d\uc131\uc5d0 \uc9c0\ub3c4 \uc778\uc2a4\ud134\uc2a4\ub97c \uc9c0\uc815\ud558\uc5ec \ub9c8\ucee4\ub97c \uc9c0\ub3c4\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ub9c8\uce58\uba70<\/strong><\/h3>\n\n\n\n<p>\uc9c0\uae08\uae4c\uc9c0 Next.js \ud658\uacbd\uc5d0\uc11c <code>next\/script<\/code>\uc640 React Hook\uc744 \ud65c\uc6a9\ud574 \ub124\uc774\ubc84 \uc9c0\ub3c4 API\ub97c \uc5f0\ub3d9\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uc774 \ud328\ud134\uc744 \ud65c\uc6a9\ud558\uba74 \uc11c\ubc84\uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \ud074\ub77c\uc774\uc5b8\ud2b8 \ub80c\ub354\ub9c1\uc774 \ud63c\ud569\ub41c Next.js \ud658\uacbd\uc5d0\uc11c\ub3c4 \uc678\ubd80 \uc2a4\ud06c\ub9bd\ud2b8 \uae30\ubc18 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc548\uc815\uc801\uc73c\ub85c \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc5ec\uae30\uc11c \ub354 \ub098\uc544\uac00 \ucee4\uc2a4\ud140 \ucee8\ud2b8\ub864 \ucd94\uac00, \uc815\ubcf4 \ucc3d(InfoWindow) \ud45c\uc2dc \ub4f1 \ub2e4\uc591\ud55c \uae30\ub2a5\uc740 \ub124\uc774\ubc84 \uc9c0\ub3c4 API \uacf5\uc2dd \ubb38\uc11c\ub97c \ucc38\uace0\ud558\uc5ec \uad6c\ud604\ud574 \ubcf4\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc548\ub155\ud558\uc138\uc694! \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Next.js (React) \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub124\uc774\ubc84 \uc9c0\ub3c4 API\ub97c \uc5f0\ub3d9\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uad6d\ub0b4 \uc0ac\uc6a9\uc790\ub97c \ub300\uc0c1\uc73c\ub85c \ud558\ub294 \uc11c\ube44\uc2a4\ub97c \uac1c\ubc1c\ud55c\ub2e4\uba74 \ub124\uc774\ubc84 \uc9c0\ub3c4 \uc5f0\ub3d9\uc740 \ud544\uc218\uc801\uc778 \uae30\ub2a5 \uc911 \ud558\ub098\uc778\ub370\uc694. Next.js\uc758 \ub80c\ub354\ub9c1 \ubc29\uc2dd\uacfc React\uc758 Hook\uc744 \ud65c\uc6a9\ud558\uc5ec \uae54\ub054\ud558\uace0 \ud6a8\uc728\uc801\uc73c\ub85c \uad6c\ud604\ud558\ub294 \uacfc\uc815\uc744 \ub2e8\uacc4\ubcc4\ub85c \uc18c\uac1c\ud574 \ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. \uc2dc\uc791\ud558\uae30 \uc804\uc5d0: \ub124\uc774\ubc84 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc \uc124\uc815 \uac00\uc7a5 \uba3c\uc800 \ub124\uc774\ubc84 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub4f1\ub85d\ud558\uace0 Client ID\ub97c \ubc1c\uae09\ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[148,1],"tags":[154,151,152,100,102,149,153,150],"class_list":["post-197","post","type-post","status-publish","format-standard","hentry","category-next-js","category-react","tag-map","tag-next","tag-next-js","tag-react","tag-react-js","tag-149","tag-153","tag-150"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=197"}],"version-history":[{"count":2,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/197\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}