{"id":39024,"date":"2024-11-02T02:36:25","date_gmt":"2024-11-02T02:36:25","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39024"},"modified":"2024-11-26T06:42:37","modified_gmt":"2024-11-26T06:42:37","slug":"react%eb%a1%9c-%ec%9c%84%ec%b9%98-%ea%b8%b0%eb%b0%98-%ec%84%9c%eb%b9%84%ec%8a%a4-%ec%95%a0%ed%94%8c%eb%a6%ac%ec%bc%80%ec%9d%b4%ec%85%98-%eb%a7%8c%eb%93%a4%ea%b8%b0-%ed%8a%b9%ec%a0%95-%ec%82%ac","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39024\/","title":{"rendered":"React\ub85c \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub9cc\ub4e4\uae30, \ud2b9\uc815 \uc0ac\uc6a9\uc790 \uc704\uce58\uc5d0\uc11c \ubc18\uacbd \ub0b4 \uc7a5\uc18c \uac80\uc0c9 \ubc0f \ub9ac\uc2a4\ud2b8 \ubdf0 \uad6c\uc131"},"content":{"rendered":"

<\/p>\n

\n
\n

\ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 React\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc124\uba85\ud569\ub2c8\ub2e4. \ud2b9\uc815 \uc0ac\uc6a9\uc790 \uc704\uce58\ub97c \uae30\ubc18\uc73c\ub85c \ubc18\uacbd \ub0b4 \uc7a5\uc18c\ub97c \uac80\uc0c9\ud558\uace0, \uadf8 \uacb0\uacfc\ub97c \ub9ac\uc2a4\ud2b8 \ubdf0\ub85c \ud45c\uc2dc\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/header>\n

\n

1. \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4\ub780?<\/h2>\n

\uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4(Location-Based Services, LBS)\ub780 \uc0ac\uc6a9\uc790\uc758 \uc704\uce58 \uc815\ubcf4\ub97c \ud65c\uc6a9\ud558\uc5ec \ud2b9\uc815 \uc11c\ube44\uc2a4\ub098 \uc815\ubcf4\ub97c \uc81c\uacf5\ud558\ub294 \uac83\uc744 \ub9d0\ud569\ub2c8\ub2e4. \ub300\ud45c\uc801\uc778 \uc608\ub85c\ub294 \uc9c0\ub3c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158, \uc74c\uc2dd \ubc30\ub2ec \uc11c\ube44\uc2a4, \uc8fc\ubcc0 \uac00\uac8c \uac80\uc0c9 \ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc11c\ube44\uc2a4\ub294 GPS, Wi-Fi, \ubaa8\ubc14\uc77c \ub370\uc774\ud130\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uc758 \ud604\uc7ac \uc704\uce58\ub97c \ud30c\uc545\ud558\uace0, \uadf8 \uc8fc\uc704\uc758 \uc7a5\uc18c\ub4e4\uc744 \uac80\uc0c9\ud558\uac70\ub098 \ucd94\ucc9c\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

2. React \uc8fc\uc81c \uc18c\uac1c<\/h2>\n

React\ub294 \ud398\uc774\uc2a4\ubd81\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4 \uad6c\ucd95\uc5d0 \ud2b9\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 \uad6c\uc870\ub85c \ub418\uc5b4 \uc788\uc5b4 \uc7ac\uc0ac\uc6a9\uc774 \uc6a9\uc774\ud558\uba70, \uac00\uc0c1 DOM\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc131\ub2a5 \ucd5c\uc801\ud654\uc640 \ube60\ub978 \ub80c\ub354\ub9c1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\ub97c \ud1b5\ud574 React\ub85c \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4\ub97c \uad6c\ucd95\ud558\uba74\uc11c React\uc758 \uae30\ucd08\uc640 \ud65c\uc6a9 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

3. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815\ud558\uae30<\/h2>\n

\uba3c\uc800, \uc0c8\ub85c\uc6b4 React \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc138\uc694.<\/p>\n

npx create-react-app location-based-service<\/code><\/pre>\n
\uc774 \uba85\ub839\uc5b4\ub294 “location-based-service”\ub77c\ub294 \ub514\ub809\ud1a0\ub9ac \uc548\uc5d0 \uae30\ubcf8 React \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec \uc11c\ubc84\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/p>\n
cd location-based-service\nnpm start<\/code><\/pre>\n
\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000<\/code>\uc5d0 \uc811\uc18d\ud558\uc5ec \uae30\ubcf8 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc798 \uc2e4\ud589\ub418\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
4. \uc704\uce58 \uc815\ubcf4 \uac00\uc838\uc624\uae30<\/h2>\n
\uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4\ub97c \uac1c\ubc1c\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc704\uce58 \uc815\ubcf4\ub97c \uac00\uc838\uc640\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 HTML5 Geolocation API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React\uc758 useEffect\uc640 useState Hook\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc704\uce58\ub97c \uac00\uc838\uc624\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\nimport React, { useState, useEffect } from 'react';\n\nconst LocationFetcher = () => {\n    const [location, setLocation] = useState(null);\n    const [error, setError] = useState(null);\n\n    useEffect(() => {\n        if (!navigator.geolocation) {\n            setError(\"Geolocation is not supported by your browser.\");\n            return;\n        }\n        navigator.geolocation.getCurrentPosition(\n            (position) => {\n                setLocation({\n                    latitude: position.coords.latitude,\n                    longitude: position.coords.longitude,\n                });\n            },\n            (err) => {\n                setError(err.message);\n            }\n        );\n    }, []);\n\n    if (error) return 
Error: {error}<\/p>;\n    if (!location) return 
Loading...<\/p>;\n\n    return (\n        
\n            
User Location<\/h2>\n            
Latitude: {location.latitude}<\/p>\n            
Longitude: {location.longitude}<\/p>\n        <\/div>\n    );\n};\n\nexport default LocationFetcher;\n            <\/code><\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0\uc11c navigator.geolocation.getCurrentPosition<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uc758 \ud604\uc7ac \uc704\uce58\ub97c \uac00\uc838\uc624\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc704\uce58 \uc815\ubcf4\ub294 \uc0c1\ud0dc(state)\ub97c \ud1b5\ud574 \uc800\uc7a5\ub418\uba70, \uc624\ub958\uac00 \ubc1c\uc0dd\ud558\uba74 \uc624\ub958 \uba54\uc2dc\uc9c0\ub97c \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
5. \uc7a5\uc18c \uac80\uc0c9 API \uc0ac\uc6a9\ud558\uae30<\/h2>\n
\uc0ac\uc6a9\uc790\uc758 \uc704\ub3c4\uc640 \uacbd\ub3c4\ub97c \uae30\ubc18\uc73c\ub85c \uc8fc\ubcc0 \uc7a5\uc18c\ub97c \uac80\uc0c9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc678\ubd80 \uc7a5\uc18c \uac80\uc0c9 API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, Google Places API\ub098 Foursquare API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 Google Places API\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc7a5\uc18c\ub97c \uac80\uc0c9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
Google Places API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 API \ud0a4\ub97c \ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4. Google Cloud Console\uc5d0 \uac00\uc785\ud558\uace0 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud55c \ub4a4, Places API\ub97c \ud65c\uc131\ud654\ud558\uc138\uc694. API \ud0a4\ub97c \uc0dd\uc131\ud55c \ud6c4, \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \uc0ac\uc6a9\uc790\uc758 \uc704\uce58\ub97c \uae30\ubc18\uc73c\ub85c \uc7a5\uc18c\ub97c \uac80\uc0c9\ud569\ub2c8\ub2e4.<\/p>\n
\nconst fetchNearbyPlaces = async (latitude, longitude) => {\n    const apiKey = 'YOUR_GOOGLE_PLACES_API_KEY';\n    const radius = 1000; \/\/ 1km \uc774\ub0b4\uc758 \uc7a5\uc18c \uac80\uc0c9\n    const type = 'restaurant'; \/\/ \uac80\uc0c9\ud560 \uc7a5\uc18c\uc758 \uc720\ud615\n\n    const res = await fetch(`https:\/\/maps.googleapis.com\/maps\/api\/place\/nearbysearch\/json?location=${latitude},${longitude}&radius=${radius}&type=${type}&key=${apiKey}`);\n    const data = await res.json();\n    return data.results;\n};\n            <\/code><\/pre>\n
\uc704 \ud568\uc218\ub294 \uc0ac\uc6a9\uc790\uc758 \uc704\ub3c4\uc640 \uacbd\ub3c4\ub97c \uc778\uc218\ub85c \ubc1b\uc544 \uc8fc\ubcc0\uc758 \uc74c\uc2dd\uc810 \uc815\ubcf4\ub97c \uac00\uc838\uc624\ub294 \ud568\uc218\ub97c \uc815\uc758\ud55c \uac83\uc785\ub2c8\ub2e4. API \uc751\ub2f5\uc758 \uacb0\uacfc\ub294 data.results<\/code>\uc5d0 \ub2f4\uae30\uba70, \ub098\uc911\uc5d0 \uc774 \uc815\ubcf4\ub97c \ub9ac\uc2a4\ud2b8\ub85c \ud45c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<\/section>\n
\n
6. \uc7a5\uc18c \uac80\uc0c9 \ubc0f \ub9ac\uc2a4\ud2b8 \ubdf0 \uad6c\uc131\ud558\uae30<\/h2>\n
\uc774\uc81c \uc0ac\uc6a9\uc790 \uc704\uce58\ub97c \uac00\uc838\uc624\uace0, \ud574\ub2f9 \uc704\uce58\ub97c \uae30\ubc18\uc73c\ub85c \uc7a5\uc18c\ub97c \uac80\uc0c9\ud558\ub294 \uc791\uc5c5\uc744 \ud1b5\ud569\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub294 \uc774 \uacfc\uc815\uc744 \ud1b5\ud569\ud55c React \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n
\nimport React, { useState, useEffect } from 'react';\n\nconst NearbyPlaces = () => {\n    const [location, setLocation] = useState(null);\n    const [places, setPlaces] = useState([]);\n    const [error, setError] = useState(null);\n\n    useEffect(() => {\n        const fetchLocation = () => {\n            if (!navigator.geolocation) {\n                setError(\"Geolocation is not supported by your browser.\");\n                return;\n            }\n            navigator.geolocation.getCurrentPosition(\n                (position) => {\n                    setLocation({\n                        latitude: position.coords.latitude,\n                        longitude: position.coords.longitude,\n                    });\n                },\n                (err) => {\n                    setError(err.message);\n                }\n            );\n        };\n\n        fetchLocation();\n    }, []);\n\n    useEffect(() => {\n        const fetchNearbyPlaces = async () => {\n            if (location) {\n                const apiKey = 'YOUR_GOOGLE_PLACES_API_KEY';\n                const radius = 1000; \n                const type = 'restaurant'; \n\n                const res = await fetch(`https:\/\/maps.googleapis.com\/maps\/api\/place\/nearbysearch\/json?location=${location.latitude},${location.longitude}&radius=${radius}&type=${type}&key=${apiKey}`);\n                const data = await res.json();\n                setPlaces(data.results);\n            }\n        };\n\n        fetchNearbyPlaces();\n    }, [location]);\n\n    if (error) return 
Error: {error}<\/p>;\n    if (!location) return 
Loading...<\/p>;\n\n    return (\n        
\n            
Nearby Restaurants<\/h2>\n