{"id":38972,"date":"2024-11-02T02:36:00","date_gmt":"2024-11-02T02:36:00","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38972"},"modified":"2024-11-26T06:42:45","modified_gmt":"2024-11-26T06:42:45","slug":"%eb%8b%a4%ec%96%91%ed%95%9c-%ec%a7%80%eb%8f%84-api-%eb%ac%b4%eb%a3%8c-%eb%b0%8f-%ec%9c%a0%eb%a3%8c-%ec%9a%94%ea%b8%88%ec%a0%9c%ec%99%80-%ec%a0%81%ed%95%a9%ed%95%9c-%ec%82%ac%ec%9a%a9-%ec%82%ac","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38972\/","title":{"rendered":"\ub2e4\uc591\ud55c \uc9c0\ub3c4 API, \ubb34\ub8cc \ubc0f \uc720\ub8cc \uc694\uae08\uc81c\uc640 \uc801\ud569\ud55c \uc0ac\uc6a9 \uc0ac\ub840"},"content":{"rendered":"

<\/p>\n

\n
\n

1. \uc9c0\ub3c4 API\uc758 \ud544\uc694\uc131<\/h2>\n

\ud604\ub300\uc758 \ub9ce\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6f9\uc0ac\uc774\ud2b8\ub294 \uc0ac\uc6a9\uc790\uac00 \ud544\uc694\ud55c \uc815\ubcf4\ub97c \uc27d\uac8c \ucc3e\uc744 \uc218 \uc788\ub3c4\ub85d \uc9c0\ub3c4 \uae30\ub2a5\uc744 \ud1b5\ud569\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\ub3c4 API\ub294 \uac1c\ubc1c\uc790\uac00 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \uc9c0\ub3c4\ub97c \ud45c\uc2dc\ud558\uace0, \ub2e4\uc591\ud55c \uc778\ud130\ub799\uc158\uc744 \ucd94\uac00\ud558\uba70, \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4\ub97c \uc81c\uacf5\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c API\ub294 \uac01\uae30 \ub2e4\ub978 \uae30\ub2a5\uacfc \uc694\uae08\uc81c\ub97c \uc81c\uacf5\ud558\uba70, \uc0ac\uc6a9 \uc0ac\ub840\uc5d0 \ub530\ub77c \uc801\ud569\ud55c API\ub97c \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n<\/section>\n

\n

2. \uc8fc\uc694 \uc9c0\ub3c4 API \uc18c\uac1c<\/h2>\n

2.1 \uad6c\uae00 \ub9f5\uc2a4 API<\/h3>\n

\uad6c\uae00 \ub9f5\uc2a4 API\ub294 \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \uc9c0\ub3c4 \uc11c\ube44\uc2a4 \uc911 \ud558\ub098\ub85c, \ud48d\ubd80\ud55c \uae30\ub2a5\uacfc \ud070 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc790\ub791\ud569\ub2c8\ub2e4. \uad6c\uae00\uc758 \uc8fc\uc18c \uac80\uc0c9, \uac70\ub9ac \uce21\uc815, \uacbd\ub85c \uc548\ub0b4 \ub4f1 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uad6c\uae00 \ub9f5\uc2a4\uc758 \uc694\uae08\uc81c\ub294 \uc0ac\uc6a9\ub7c9\uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9c0\uba70, \ubb34\ub8cc\ub85c \uc6d4 200\ub2ec\ub7ec\uae4c\uc9c0 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\n            \/\/ \uad6c\uae00 \ub9f5\uc2a4 API \uc608\uc81c \ucf54\ub4dc\n            function initMap() {\n                var location = {lat: -34.397, lng: 150.644};\n                var map = new google.maps.Map(document.getElementById('map'), {\n                    zoom: 8,\n                    center: location\n                });\n                var marker = new google.maps.Marker({\n                    position: location,\n                    map: map\n                });\n            }\n            <\/code><\/pre>\n
2.2 Leaflet<\/h3>\n
Leaflet\uc740 \uc624\ud508\uc18c\uc2a4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uac04\ub2e8\ud558\uace0 \uc0ac\uc6a9\ud558\uae30 \uc26c\uc6b4 \uc9c0\ub3c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ub370 \uc801\ud569\ud569\ub2c8\ub2e4. Leaflet\uc740 \ubb34\ub8cc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\uba70, \ub2e4\uc591\ud55c \ud50c\ub7ec\uadf8\uc778\uc744 \ud1b5\ud574 \uae30\ub2a5\uc744 \ud655\uc7a5\ud560 \uc218 \uc788\ub294 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n            \/\/ Leaflet \uc608\uc81c \ucf54\ub4dc\n            var map = L.map('map').setView([51.505, -0.09], 13);\n            L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n                maxZoom: 19\n            }).addTo(map);\n            L.marker([51.5, -0.09]).addTo(map)\n                .bindPopup('A pretty CSS3 popup. Easily customizable.')\n                .openPopup();\n            <\/code><\/pre>\n
2.3 \ub9f5\ubc15\uc2a4 (Mapbox)<\/h3>\n
\ub9f5\ubc15\uc2a4\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \uc9c0\ub3c4\ub97c \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub294 \uac15\ub825\ud55c \uc9c0\ub3c4 \ud50c\ub7ab\ud3fc\uc73c\ub85c, \uc0c1\uc5c5\uc801 \uc0ac\uc6a9\uc5d0 \uc801\ud569\ud55c \ub2e4\uc591\ud55c \uc694\uae08\uc81c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. Mapbox\ub294 \ub370\uc2a4\ud06c\ud1b1 \ubc0f \ubaa8\ubc14\uc77c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ubaa8\ub450\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc73c\uba70, \uace0\uae09 \uc2dc\uac01\ud654\uc640 \uc131\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
\n            \/\/ Mapbox \uc608\uc81c \ucf54\ub4dc\n            mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';\n            var map = new mapboxgl.Map({\n                container: 'map',\n                style: 'mapbox:\/\/styles\/mapbox\/streets-v11',\n                center: [-74.5, 40],\n                zoom: 9\n            });\n            new mapboxgl.Marker()\n                .setLngLat([-74.5, 40])\n                .addTo(map);\n            <\/code><\/pre>\n<\/section>\n
\n
3. \ubb34\ub8cc \ubc0f \uc720\ub8cc \uc694\uae08\uc81c \ube44\uad50<\/h2>\n
\uc9c0\ub3c4 API\uc758 \uc694\uae08\uc81c\ub294 \ubcf4\ud1b5 \ubb34\ub8cc\uc640 \uc720\ub8cc\ub85c \ub098\ub269\ub2c8\ub2e4. \ubb34\ub8cc \uc694\uae08\uc81c\ub294 \uc8fc\ub85c \uc81c\ud55c\ub41c \uc0ac\uc6a9\ub7c9 \ub0b4\uc5d0\uc11c \uc81c\uacf5\ub418\uba70, \uc720\ub8cc \uc694\uae08\uc81c\ub294 \ucd94\uac00 \uae30\ub2a5\uc774\ub098 \ub354 \ub9ce\uc740 \uc694\uccad \uc218\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc8fc\uc694 \uc9c0\ub3c4 API\uc758 \uc694\uae08\uc81c \ube44\uad50\ud45c\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n\n
API\uba85<\/th>\n\ubb34\ub8cc \uc694\uae08\uc81c<\/th>\n\uc720\ub8cc \uc694\uae08\uc81c<\/th>\n<\/tr>\n<\/thead>\n
\uad6c\uae00 \ub9f5\uc2a4 API<\/td>\n\uc6d4 200\ub2ec\ub7ec \ubb34\ub8cc \uc0ac\uc6a9<\/td>\n\uc0ac\uc6a9\ub7c9\uc5d0 \ub530\ub978 \uc694\uae08<\/td>\n<\/tr>\n
Leaflet<\/td>\n\ubaa8\ub450 \ubb34\ub8cc<\/td>\n\uc5c6\uc74c<\/td>\n<\/tr>\n
\ub9f5\ubc15\uc2a4<\/td>\n\uc6d4 50,000 \ub85c\ub4dc \ubb34\ub8cc<\/td>\n\uc0ac\uc6a9\ub7c9\uc5d0 \ub530\ub978 \uc694\uae08<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/section>\n
\n
4. \uc801\ud569\ud55c \uc0ac\uc6a9 \uc0ac\ub840<\/h2>\n
\uc9c0\ub3c4 API\ub294 \ub2e4\uc591\ud55c \uc0ac\uc6a9 \uc0ac\ub840\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uac01\uac01\uc758 API\uc5d0 \uc801\ud569\ud55c \uc0ac\uc6a9 \uc0ac\ub840\uc785\ub2c8\ub2e4.<\/p>\n