{"id":39091,"date":"2024-11-02T02:36:55","date_gmt":"2024-11-02T02:36:55","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39091"},"modified":"2024-11-26T06:42:28","modified_gmt":"2024-11-26T06:42:28","slug":"%ec%a7%80%eb%8f%84%ec%97%90%ec%84%9c-%ec%9c%84%ec%b9%98-%ea%b2%80%ec%83%89-%eb%b0%8f-%ec%a3%bc%ec%86%8c-%ed%91%9c%ec%8b%9c-%ea%b8%b0%eb%8a%a5-%ea%b5%ac%ed%98%84-%ea%b2%80%ec%83%89-%ed%95%84%eb%93%9c","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39091\/","title":{"rendered":"\uc9c0\ub3c4\uc5d0\uc11c \uc704\uce58 \uac80\uc0c9 \ubc0f \uc8fc\uc18c \ud45c\uc2dc \uae30\ub2a5 \uad6c\ud604, \uac80\uc0c9 \ud544\ub4dc\ub97c \ud1b5\ud574 \uc8fc\uc18c\ub098 \uc7a5\uc18c \ucc3e\uae30"},"content":{"rendered":"

<\/p>\n

\n
\n

\uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \uc9c0\ub3c4\uc5d0\uc11c \uc704\uce58 \uac80\uc0c9 \ubc0f \uc8fc\uc18c \ud45c\uc2dc \uae30\ub2a5\uc744 \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n<\/header>\n

\n

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

\n \ud604\ub300 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc9c0\ub3c4\ub97c \ud65c\uc6a9\ud55c \uae30\ub2a5\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4.
\n \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c\ub294 \uad6c\uae00 \ub9f5 API\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6d0\ud558\ub294 \uc8fc\uc18c\ub098 \uc7a5\uc18c\ub97c \uac80\uc0c9\ud558\uace0,
\n \uc774\ub97c \uc9c0\ub3c4\uc5d0 \ud45c\uc2dc\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud560 \uac83\uc785\ub2c8\ub2e4.
\n \uc6b0\ub9ac\ub294 React\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774 \uae30\ub2a5\uc744 \uad6c\uc131\ud560 \uac83\uc774\uba70,
\n \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc640 \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n<\/section>\n

\n

2. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n

React \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud558\ub294 \uacfc\uc815\uc740 \uac04\ub2e8\ud569\ub2c8\ub2e4. \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\uc138\uc694.<\/p>\n

npx create-react-app location-search-app<\/code><\/pre>\n
\ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud130\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n
cd location-search-app\nnpm install @react-google-maps\/api<\/code><\/pre>\n
\uc704\uce58\ub294 \uad6c\uae00 \ub9f5 API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \ud544\uc694\uc2b5\ub2c8\ub2e4. \uad6c\uae00 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc5d0\uc11c API \ud0a4\ub97c \ubc1c\uae09\ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
API \ud0a4\ub97c \ubc1c\uae09\ubc1b\uc740 \ud6c4, .env \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c \ub0b4\uc6a9\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
REACT_APP_GOOGLE_MAPS_API_KEY=YOUR_API_KEY<\/code><\/pre>\n<\/section>\n
\n
3. \uae30\ubcf8 \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131<\/h2>\n
\uc774\uc81c \uae30\ubcf8\uc801\uc778 React \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798\ub294 \uc9c0\ub3c4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n
{`import React, { useState } from 'react';\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps\/api';\n\nconst containerStyle = {\n    width: '800px',\n    height: '600px'\n};\n\nconst center = {\n    lat: -3.745,\n    lng: -38.523\n};\n\nconst MyMap = () => {\n    const [markerPosition, setMarkerPosition] = useState(center);\n\n    const handleMapClick = (event) => {\n        setMarkerPosition({\n            lat: event.latLng.lat(),\n            lng: event.latLng.lng()\n        });\n    };\n\n    return (\n        \n            \n                <\/marker>\n            <\/googlemap>\n        <\/loadscript>\n    );\n};\n\nexport default MyMap;`}<\/code><\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0\uc11c\ub294 \uae30\ubcf8 \uc9c0\ub3c4\uc640 \ub9c8\ucee4\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \uc9c0\ub3c4\ub97c \ud074\ub9ad\ud558\uba74 \ub9c8\ucee4\uc758 \uc704\uce58\uac00 \uc5c5\ub370\uc774\ud2b8 \ub429\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
4. \uc8fc\uc18c \uac80\uc0c9 \uae30\ub2a5 \uad6c\ud604<\/h2>\n
\uc8fc\uc18c \uac80\uc0c9 \uae30\ub2a5\uc744 \ucd94\uac00\ud558\uae30 \uc704\ud574, \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uc8fc\uc18c\ub97c \uae30\ubc18\uc73c\ub85c \uad6c\uae00 \ub9f5 API\ub97c \ud1b5\ud574 \uc704\uce58\ub97c \uac80\uc0c9\ud558\uace0, \uadf8 \uacb0\uacfc\ub97c \uc9c0\ub3c4\uc5d0 \ubc18\uc601\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\uc544\ub798 \ucf54\ub4dc\uc5d0\uc11c \uc785\ub825 \ud544\ub4dc\ub97c \ucd94\uac00\ud558\uace0, \uc8fc\uc18c \uac80\uc0c9\uc744 \uc218\ud589\ud558\ub294 \ud568\uc218\ub97c \uad6c\ud604\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
{`const MyMap = () => {\n    const [markerPosition, setMarkerPosition] = useState(center);\n    const [address, setAddress] = useState('');\n\n    const handleAddressChange = (event) => {\n        setAddress(event.target.value);\n    };\n\n    const searchAddress = () => {\n        const geocoder = new window.google.maps.Geocoder();\n        geocoder.geocode({ address: address }, (results, status) => {\n            if (status === 'OK') {\n                setMarkerPosition(results[0].geometry.location);\n            } else {\n                alert('\uc8fc\uc18c\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.');\n            }\n        });\n    };\n\n    return (\n        \n            \n