{"id":39002,"date":"2024-11-02T02:36:15","date_gmt":"2024-11-02T02:36:15","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39002"},"modified":"2024-11-26T06:42:41","modified_gmt":"2024-11-26T06:42:41","slug":"%ec%a7%80%eb%8f%84%ec%97%90%ec%84%9c-%ec%82%ac%ec%9a%a9%ec%9e%90-%ec%9d%b8%ed%84%b0%eb%9e%99%ec%85%98-%ea%b8%b0%eb%8a%a5-%ec%b6%94%ea%b0%80-%ec%a7%80%eb%8f%84-%eb%93%9c%eb%9e%98%ea%b7%b8-%ed%99%95","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39002\/","title":{"rendered":"\uc9c0\ub3c4\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158 \uae30\ub2a5 \ucd94\uac00, \uc9c0\ub3c4 \ub4dc\ub798\uadf8, \ud655\ub300 \ucd95\uc18c \uae30\ub2a5 \uc81c\uc5b4\ud558\uae30"},"content":{"rendered":"

<\/p>\n

\n

\uc8fc\uc81c: \uc9c0\ub3c4\uc5d0\uc11c \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158 \uae30\ub2a5 \ucd94\uac00, \uc9c0\ub3c4 \ub4dc\ub798\uadf8, \ud655\ub300\/\ucd95\uc18c \uae30\ub2a5 \uc81c\uc5b4\ud558\uae30<\/h2>\n
\n

1. \uc11c\ub860<\/h2>\n

\n \ud604\ub300\uc758 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc9c0\ub3c4\ub294 \uc815\ubcf4 \uc2dc\uac01\ud654\ub97c \uc704\ud574 \ud544\uc218\uc801\uc778 \uad6c\uc131 \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\uc744 \ud1b5\ud574 \uc9c0\ub3c4\ub97c \ub354\uc6b1 \ud65c\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \uac83\uc740 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4.
\n \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \uae30\ubc18\uc73c\ub85c \ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc9c0\ub3c4\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\uc744 \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

2. \uc9c0\ub3c4 API \uc120\ud0dd<\/h2>\n

\n \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158 \uae30\ub2a5\uc774 \ud3ec\ud568\ub41c \uc9c0\ub3c4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574 \uc5ec\ub7ec \uac00\uc9c0 \uc9c0\ub3c4\uc758 API\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \uc9c0\ub3c4 API\ub85c\ub294 \uad6c\uae00 \uc9c0\ub3c4, \uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5(OSM), Mapbox \ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4.
\n \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \uad6c\uae00 \uc9c0\ub3c4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc608\uc81c\ub97c \uc124\uba85\ud560 \uac83\uc785\ub2c8\ub2e4.\n <\/p>\n

\n \uad6c\uae00 \uc9c0\ub3c4 API\ub294 \ub9ce\uc740 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uba70 \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\uc744 \uc9c0\uc6d0\ud558\ub294 \uc5ec\ub7ec \uac00\uc9c0 \uc774\ubca4\ud2b8\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4.
\n API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uba3c\uc800 \uad6c\uae00 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc5d0\uc11c API \ud0a4\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

3. \ub9ac\uc561\ud2b8 \ud658\uacbd \uc124\uc815<\/h2>\n

\n \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc124\uc815\ud558\uae30 \uc704\ud574 create-react-app<\/code> \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.
\n \uc544\ub798\uc758 \ucee4\ub9e8\ub4dc\ub97c \uc2e4\ud589\ud558\uc5ec \uc0c8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uc138\uc694:\n <\/p>\n

npx create-react-app my-map-app<\/code><\/pre>\n
\n                \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9 \ud6c4, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:\n            <\/p>\n
cd my-map-app\nnpm install @react-google-maps\/api<\/code><\/pre>\n<\/section>\n
\n
4. \uc9c0\ub3c4 \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131<\/h2>\n
\n                \uc774\uc81c \uad6c\uae00 \uc9c0\ub3c4\ub97c \ud45c\uc2dc\ud560 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4. src<\/code> \ud3f4\ub354 \ub0b4\uc5d0 MapComponent.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.\n            <\/p>\n
\nimport React from 'react';\nimport { GoogleMap, LoadScript } from '@react-google-maps\/api';\n\nconst containerStyle = {\n    width: '100%',\n    height: '400px'\n};\n\nconst center = {\n    lat: 37.7749, \/\/ \uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\uc758 \uc704\ub3c4\n    lng: -122.4194 \/\/ \uc0cc\ud504\ub780\uc2dc\uc2a4\ucf54\uc758 \uacbd\ub3c4\n};\n\nconst MapComponent = () => {\n    return (\n         \n             console.log('\uc9c0\ub3c4 \ub4dc\ub798\uadf8\ub428:', e)}\n                onZoomChanged={(e) => console.log('\uc90c \uc218\uc900 \ubcc0\uacbd\ub428:', e)}\n            >\n                {\/* \uc5ec\uae30\uc5d0 \ucd94\uac00 \uae30\ub2a5\uc744 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4 *\/}\n            <\/googlemap>\n        <\/loadscript>\n    );\n};\n\nexport default MapComponent;\n            <\/code><\/pre>\n<\/section>\n
\n
5. \uc9c0\ub3c4 \ub4dc\ub798\uadf8 \ubc0f \ud655\ub300\/\ucd95\uc18c \uae30\ub2a5 \ucd94\uac00<\/h2>\n
\n                \uc704 \uc608\uc81c\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc778 \uad6c\uae00 \uc9c0\ub3c4\ub97c \uc0dd\uc131\ud588\uc2b5\ub2c8\ub2e4. \uc774\uc81c \uc0ac\uc6a9\uc790\uc758 \ub4dc\ub798\uadf8\uc640 \ud655\ub300\/\ucd95\uc18c \uae30\ub2a5\uc744 \uc81c\uc5b4\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.
\n                onDragEnd<\/code> \ubc0f onZoomChanged<\/code> \uc774\ubca4\ud2b8\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uc758 \uc778\ud130\ub799\uc158\uc744 \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n            <\/p>\n
\n                \uba3c\uc800 useState<\/code> \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud604\uc7ac \uc9c0\ub3c4 \uc911\uc2ec \uc88c\ud45c\uc640 \ud655\ub300\/\ucd95\uc18c \uc218\uc900\uc744 \uc0c1\ud0dc\ub85c \uad00\ub9ac\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n            <\/p>\n
\nimport React, { useState } from 'react';\nimport { GoogleMap, LoadScript } from '@react-google-maps\/api';\n\nconst containerStyle = {\n    width: '100%',\n    height: '400px'\n};\n\nconst MapComponent = () => {\n    const [center, setCenter] = useState({ lat: 37.7749, lng: -122.4194 });\n    const [zoom, setZoom] = useState(10);\n\n    const handleDragEnd = (map) => {\n        const newCenter = {\n            lat: map.center.lat(),\n            lng: map.center.lng()\n        };\n        setCenter(newCenter);\n        console.log('\ub4dc\ub798\uadf8\ud558\uc5ec \uc0c8 \uc911\uc2ec:', newCenter);\n    };\n\n    const handleZoomChanged = (map) => {\n        const newZoom = map.getZoom();\n        setZoom(newZoom);\n        console.log('\uc0c8 \uc90c \uc218\uc900:', newZoom);\n    };\n\n    return (\n         \n            \n                {\/* \uc5ec\uae30\uc5d0 \ucd94\uac00 \uae30\ub2a5\uc744 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4 *\/}\n            <\/googlemap>\n        <\/loadscript>\n    );\n};\n\nexport default MapComponent;\n            <\/code><\/pre>\n<\/section>\n
\n
6. \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158\uc5d0 \ub530\ub77c \uc9c0\ub3c4 \uc5c5\ub370\uc774\ud2b8<\/h2>\n
\n                \uc0ac\uc6a9\uc790\uac00 \ub4dc\ub798\uadf8\ud558\uac70\ub098 \ud655\ub300\/\ucd95\uc18c\ud560 \ub54c\ub9c8\ub2e4 \uc9c0\ub3c4\uac00 \ud574\ub2f9 \uc0c1\ud0dc\uc5d0 \ub9de\ucd94\uc5b4 \uc5c5\ub370\uc774\ud2b8\ub429\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc9c0\ub3c4\ub97c \ud074\ub9ad\ud588\uc744 \ub54c\ub3c4 \ub9c8\ucee4\ub97c \ucd94\uac00\ud558\uac70\ub098
\n                \ub2e4\ub978 \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \ud074\ub9ad \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4:\n            <\/p>\n
\nconst handleMapClick = (event) => {\n    const lat = event.latLng.lat();\n    const lng = event.latLng.lng();\n    console.log('\uc0ac\uc6a9\uc790\uac00 \ud074\ub9ad\ud55c \uc704\uce58:', { lat, lng });\n    \/\/ \ub9c8\ucee4 \ucd94\uac00 \ub85c\uc9c1\uc744 \uc5ec\uae30\uc5d0 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4\n};\n            <\/code><\/pre>\n
\n                \uc774\ub97c \ud1b5\ud574 \ud074\ub9ad \uc774\ubca4\ud2b8\uc5d0 \ub530\ub77c \ud2b9\uc815 \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub9c8\ucee4\ub97c \ucd94\uac00\ud558\uac70\ub098 \uc815\ubcf4\ub97c \ubd88\ub7ec\uc624\ub294 \ub4f1\uc758 \uc791\uc5c5\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
\n
7. \uacb0\ub860<\/h2>\n
\n                React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uad6c\uae00 \uc9c0\ub3c4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc778\ud130\ub799\uc158 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4.
\n                \uc9c0\ub3c4\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc758 \ub4dc\ub798\uadf8\uc640 \ud655\ub300\/\ucd95\uc18c\ub97c \ucc98\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \ubc30\uc6b0\uace0, \ud074\ub9ad \uc774\ubca4\ud2b8\ub85c \ucd94\uac00\uc801\uc778 \uae30\ub2a5\ub3c4 \uad6c\ud604\ud560 \uc218 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.
\n                \uc774\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ub354\uc6b1 \ud48d\ubd80\ud558\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.\n            <\/p>\n<\/section>\n
\n
8. \ucc38\uace0 \uc790\ub8cc<\/h2>\n