GitHub Copilot 는 더 나은 코드를 더 빠르게 작성하는 데 도움이 되는 AI 기반 코드 도우미입니다. GitHub Copilot는 프롬프트에서 코드 조각을 생성하고 기존 코드에 대한 완성을 제안할 수 있습니다. 또한 GitHub Copilot는 코드 및 기본 설정에서 학습하고 스타일과 요구에 맞게 조정할 수 있습니다. GitHub Copilot는 코드를 Bing Maps 웹 SDK에서 Azure Maps 웹 SDK로 직접 변환하거나 Bing Maps API에서 Azure Maps API로 직접 변환할 수는 없지만 이 방법 문서에서는 GitHub Copilot를 사용하여 Azure Maps 애플리케이션에 대한 코드를 생성하는 방법을 보여 줍니다. 이 기능은 엔터프라이즈용 Bing Maps에서 Azure Maps로 마이그레이션하는 경우에 특히 유용할 수 있습니다.
필수 조건
- Azure 계정
- Azure Maps 계정
- 구독 키 또는 다른 형태의 Azure Maps를 사용한 인증
- Azure Maps 웹 SDK에 대한 기본적인 이해
- Azure Maps API에 대한 기본적인 이해
- GitHub Copilot에 대한 GitHub 계정 및 구독
- 엔터프라이즈용 Bing Maps와 Azure Maps의 차이점에 대한 기본적인 이해는 다음 문서를 참조하세요.
팁 1: 명확한 문장으로 프롬프트 작성
GitHub Copilot를 사용하는 첫 번째 단계는 간단한 문장으로 프롬프트를 작성하는 것입니다. 프롬프트는 코드를 사용하여 수행하거나 달성하려는 작업을 간단히 설명합니다. 예를 들어 Azure Maps Web SDK를 사용하여 GeoJSON 파일을 표시하려는 경우 다음과 같은 프롬프트를 작성할 수 있습니다.
Azure Maps WebSDK v3을 사용하여 HTML 프로그램을 작성하여 다음 URL의 SymbolLayer에 GeoJSON 기능을 표시합니다. https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson
그런 다음 GitHub Copilot는 선택한 언어 및 프레임워크를 사용하여 프롬프트와 일치하는 코드 조각을 생성합니다. 예를 들어 HTML 및 JavaScript를 사용하는 경우 GitHub Copilot는 다음과 같은 코드 조각을 생성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Earthquake Data</title>
<script src='https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js'></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<style>
#myMap { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="myMap"></div>
<script>
var map = new atlas.Map("myMap", {
center: [-100, 39],
zoom: 3,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'Your Azure Maps Key'
}
});
map.events.add('ready', function() {
fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson')
.then(response => response.json())
.then(data => {
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
dataSource.add(data);
map.layers.add(new atlas.layer.SymbolLayer(dataSource));
});
});
</script>
</body>
</html>
여기에서 볼 수 있듯이 GitHub Copilot는 간단하고 명확한 프롬프트에서 완전하고 기능적인 코드 조각을 생성할 수 있습니다. 그런 다음 코드 조각을 복사하여 코드 편집기에 붙여넣거나 원하는 대로 수정할 수 있습니다. GitHub Copilot에 대체 코드 조각을 생성하거나 기존 코드의 변경 내용을 완료하거나 제안하도록 요청할 수도 있습니다.
엔터프라이즈용 Bing Maps 애플리케이션의 코드 조각에 의존하지 않고 명확한 문장으로 프롬프트를 작성할 때의 이점은 애플리케이션의 논리 및 기능에 집중할 수 있으므로 GitHub Copilot가 목표를 보다 정확하게 이해할 수 있다는 것입니다. 모호할 수 있고 GitHub Copilot를 혼동할 수 있는 코드 조각을 복사하고 붙여넣는 것을 방지할 수도 있습니다.
비고
동일한 프롬프트를 실행할 때마다 다른 결과를 얻을 수 있으며, 존재하지 않는 메서드와 같은 부정확성이 발생할 수 있습니다. 브라우저 콘솔에서 오류가 있는지 확인하고 필요한 경우 코드를 조정해야 합니다.
팁 2: 자세한 단계별 지침 제공
GitHub Copilot를 사용하기 위한 두 번째 팁은 자세한 단계별 지침을 제공하는 것입니다. 제품 관리자가 제품에 대한 기능 사양을 작성한다고 상상해 보십시오. 예를 들어 주소 '1 Microsoft Way, Redmond, WA'를 지오코딩하고 지도에 마커를 추가하려는 경우 다음과 같은 프롬프트를 작성할 수 있습니다.
Azure Maps Web SDK v3을 사용하여 HTML 프로그램을 작성하여 '1 Microsoft Way, Redmond, WA'의 좌표에 대한 지오코드 요청을 한 다음 해당 위치에 마커를 배치합니다.1단계. 지오코드 API 엔드포인트를 활용합니다.
<https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}>. 참조를 위해 예제 응답이 제공됩니다.{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"address":{"countryRegion":{"name":"United States"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}],"formattedAddress":"15127 NE 24th St, Redmond, WA 98052","locality":"Redmond","postalCode":"98052","addressLine":"15127 NE 24th St"},"type":"Address","confidence":"High","matchCodes":["Good"],"geocodePoints":[{"geometry":{"type":"Point","coordinates":[-122.138681,47.630358]},"calculationMethod":"Rooftop","usageTypes":["Display"]},{"geometry":{"type":"Point","coordinates":[-122.1386787,47.6302179]},"calculationMethod":"Rooftop","usageTypes":["Route"]}]},"geometry":{"type":"Point","coordinates":[-122.138681,47.630358]},"bbox":[-122.14632282407,47.626495282429325,-122.13103917593001,47.63422071757068]}]}
2단계. '1 Microsoft Way, Redmond, WA'의 좌표에 대한 Geocode API 요청을 만듭니다.
3단계. Azure Maps WebSDK를 사용하여 지오코드 API 응답에서 가져온 좌표를 중심으로 지도를 표시합니다.
4단계. 지도 리소스가 준비될 때까지 기다립니다.
5단계 API 응답에서 얻은 좌표에 지도에 마커를 놓습니다.
GitHub Copilot는 Azure Maps Geocode API 및 Azure MapsWeb SDK를 사용하여 지침과 일치하는 코드 조각을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Maps Geocode and Pushpin Example</title>
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var subscriptionKey = 'YOUR_SUBSCRIPTION_KEY'; // Replace with your Azure Maps subscription key
var query = '1 Microsoft Way, Redmond';
// Make Geocode API request
fetch(`https://atlas.microsoft.com/geocode?api-version=2023-06-01&subscription-key=${subscriptionKey}&query=${query}`)
.then(response => response.json())
.then(data => {
// Extract coordinates from the API response
var coordinates = data.features[0].geometry.coordinates;
// Initialize map
var map = new atlas.Map('map', {
center: coordinates,
zoom: 14,
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: subscriptionKey
}
});
// Wait until map resources are ready
map.events.add('ready', function () {
// Add pushpin to the map
var pushpin = new atlas.HtmlMarker({
position: coordinates,
htmlContent: '<div style="background-color: #286090; color: #fff; padding: 5px;">1 Microsoft Way</div>'
});
map.markers.add(pushpin);
});
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
스크린샷은 "1 Microsoft Way"라는 압정이 표시된 Redmond 워싱턴의 지도를 보여주는 이전 코드 샘플의 결과입니다.
복잡한 프롬프트를 개별 단계로 분할하면 GitHub Copilot가 더 쉽게 이해하고 따를 수 있으므로 코드 흐름을 보다 효율적으로 제어할 수 있습니다.
비고
효과적인 프롬프트를 만들려면 다양한 시나리오에 맞게 사용자 지정해야 합니다. 프롬프트를 반복적으로 구체화하면 최상의 결과를 얻을 수 있습니다.
팁 3: API 요청 입력 및 응답 출력에 대한 예제 포함
GitHub Copilot를 사용하기 위한 세 번째 팁은 API 입력 및 출력에 대한 예제를 포함하는 것입니다. 예제를 제공하면 Copilot가 데이터를 처리하는 방법을 학습할 수 있도록 하여 정확하고 관련 있는 코드 조각을 생성하는 기능을 향상시킬 수 있습니다.
Azure Maps API에 대한 입력 및 출력의 예를 보려면 Azure Maps REST API 설명서를 참조할 수 있습니다. 예를 들어 Azure Maps Geocoding Batch API 및 Azure Maps Directions API에 대한 샘플 요청 본문 및 응답을 볼 수 있습니다. Azure Maps를 사용하여 두 위치 간에 라우팅하기 위한 애플리케이션을 만들려면 다음과 같은 프롬프트를 작성할 수 있습니다.
Azure Maps Web SDK v3를 사용하여 HTML 프로그램을 구현하여 사용자 지정 위치에 대한 경로 방향을 표시합니다.1단계. 사용자가 시작 및 끝 거리 주소를 입력할 수 있는 두 개의 입력 상자를 만듭니다. 제출 단추를 추가하여 다음 단계로 진행합니다.
2단계. Geocode Batch POST API 활용: https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01& subscription-key=${subscriptionKey} 를 사용하여 시작점과 끝점의 좌표를 찾습니다.
요청 본문 예제:
{ "batchItems": [ { "addressLine": "1 Microsoft Way, Redmond, WA" }, { "addressLine": "400 Broad St, Seattle, WA" } ] }
응답 예제:
{"batchItems":[{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.128265,47.639385]},"bbox":[-122.13590814413995,47.63552228242932,-122.12062185586005,47.643247717570674],"properties":{"type":"Address","confidence":"Medium","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Rooftop","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-122.128265,47.639385]}},{"calculationMethod":"Rooftop","usageTypes":["Route"],"geometry":{"type":"Point","coordinates":[-122.1271239,47.6385519]}}],"address":{"addressLine":"1 Microsoft Way","postalCode":"98052","locality":"Redmond","formattedAddress":"1 Microsoft Way, Redmond, WA 98052","countryRegion":{"name":"United States","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}]}}}]},{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.349309,47.620498]},"bbox":[-122.35694938292329,47.61663528242932,-122.34166861707672,47.624360717570674],"properties":{"type":"Address","confidence":"High","matchCodes":["Good"],"geocodePoints":[{"calculationMethod":"Rooftop","usageTypes":["Display"],"geometry":{"type":"Point","coordinates":[-122.349309,47.620498]}},{"calculationMethod":"Rooftop","usageTypes":["Route"],"geometry":{"type":"Point","coordinates":[-122.3485587,47.6200534]}}],"address":{"addressLine":"400 Broad St","postalCode":"98109","neighborhood":"Queen Anne","locality":"Seattle","formattedAddress":"400 Broad St, Seattle, WA 98109","countryRegion":{"name":"United States","ISO":"US"},"adminDistricts":[{"shortName":"WA"},{"shortName":"King County"}]}}}]}],"summary":{"successfulRequests":2,"totalRequests":2}}
3단계. Azure Maps WebSDK를 사용하여 지도를 표시합니다.
4단계. 지도 리소스가 준비될 때까지 기다립니다.
5단계 DataSource를 만들고 지도에 추가합니다.
6단계 SymbolLayer를 만들고 지도에 추가합니다.
7단계 LineLayer를 만들고 지도에 추가합니다.
8단계. Route POST API:
https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey}를 활용하여 시작 지점과 종료 지점 사이의 경로를 찾습니다. DataSource에 GeoJSON 응답을 추가하고 응답의 경계 상자를 기반으로 맵의 카메라를 조정합니다.요청 본문 예제:
{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "coordinates": [ -122.1271239, 47.6385519 ], "type": "Point" }, "properties": { "pointIndex": 0, "pointType": "waypoint" } }, { "type": "Feature", "geometry": { "coordinates": [ -122.3485587, 47.6200534 ], "type": "Point" }, "properties": { "pointIndex": 1, "pointType": "waypoint" } } ], "routeOutputOptions": [ "routePath" ],
"travelMode": "운전" }
응답 예제:
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.127124,47.638552]},"properties":{"routePathPoint":{"legIndex":0,"pointIndex":0},"order":{"inputIndex":0},"type":"Waypoint"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.348533,47.620073]},"properties":{"routePathPoint":{"legIndex":0,"pointIndex":113},"order":{"inputIndex":1},"type":"Waypoint"}},{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[-122.127123,47.638551],[-122.127236,47.638786],[-122.127778,47.639321],[-122.127588,47.639453],[-122.126935,47.639906],[-122.128569,47.64092],[-122.128269,47.641159],[-122.128004,47.641435],[-122.128064,47.641947],[-122.127464,47.642446],[-122.127433,47.642452],[-122.127358,47.642589],[-122.127333,47.642706],[-122.127044,47.643317],[-122.127,47.646063],[-122.12707,47.646064],[-122.1355,47.646072],[-122.135465,47.645943],[-122.134932,47.644569],[-122.134655,47.643384],[-122.134688,47.64219],[-122.134994,47.640816],[-122.135396,47.640114],[-122.135694,47.639576],[-122.136586,47.638589],[-122.138502,47.637193],[-122.14906,47.631126],[-122.150578,47.630481],[-122.152672,47.629904],[-122.15453,47.629628],[-122.156691,47.629525],[-122.163925,47.630213],[-122.168574,47.629931],[-122.170237,47.629981],[-122.171667,47.630214],[-122.179348,47.631954],[-122.181849,47.632144],[-122.185924,47.632041],[-122.186778,47.632117],[-122.187833,47.632345],[-122.188876,47.632739],[-122.190017,47.633476],[-122.190692,47.634194],[-122.191623,47.635672],[-122.192652,47.636933],[-122.195835,47.639784],[-122.197456,47.640891],[-122.199124,47.641725],[-122.20114,47.642394],[-122.202483,47.642648],[-122.206548,47.643149],[-122.208346,47.643164],[-122.210355,47.642861],[-122.218068,47.640503],[-122.219353,47.64005],[-122.220547,47.639476],[-122.223398,47.637523],[-122.224491,47.636915],[-122.22566,47.636477],[-122.226843,47.636165],[-122.228471,47.635972],[-122.229575,47.636001],[-122.231286,47.636192],[-122.238445,47.637468],[-122.241606,47.638218],[-122.243095,47.638484],[-122.269838,47.642514],[-122.275227,47.643424],[-122.279804,47.644349],[-122.282342,47.644655],[-122.289531,47.645049],[-122.29387,47.645413],[-122.296978,47.645393],[-122.300182,47.645129],[-122.304222,47.64444],[-122.308205,47.64353],[-122.30968,47.64328],[-122.31467,47.643113],[-122.318608,47.64274],[-122.318874,47.642714],[-122.321852,47.642389],[-122.322434,47.642195],[-122.322857,47.641863],[-122.323024,47.641566],[-122.323072,47.641284],[-122.323134,47.638686],[-122.323246,47.637911],[-122.323243,47.637778],[-122.323332,47.636353],[-122.323548,47.635195],[-122.323781,47.634413],[-122.324407,47.632851],[-122.324663,47.632356],[-122.3252,47.631657],[-122.326806,47.630159],[-122.327268,47.629875],[-122.327954,47.629266],[-122.328755,47.628281],[-122.328928,47.627756],[-122.328967,47.626499],[-122.329233,47.626199],[-122.330614,47.625588],[-122.332592,47.625034],[-122.334379,47.624774],[-122.334564,47.624765],[-122.336411,47.624697],[-122.340045,47.624729],[-122.342033,47.624546],[-122.343379,47.624517],[-122.347561,47.624571],[-122.347564,47.624483],[-122.347606,47.62079],[-122.347687,47.620726],[-122.348533,47.620073]]],"bbox":[-122.348533,47.620073,-122.126935,47.646072]},"properties":{"resourceId":"v70,h-1356265451,i0,a0,cen-US,dAAAAAAAAAAA1,y0,s1,m1,o1,t0,wO6aTEbzRR0CPQkjMIohewA2
v12,k1,qatt:1","trafficCongestion":"None","trafficDataUsed":"None","distanceInMeters":21606,"durationInSeconds":1455,"departureTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-04T03:29:16+00:00","type":"RoutePath","legs":[{"distanceInMeters":21606,"durationInSeconds":1455,"departureTime":"2024-03-04T03:05:01+00:00","arrivalTime":"2024-03-04T03:29:16+00:00","routePathRange":{"legIndex":0,"range":[0,113]},"description":"WA-520 W"}]}}]}v12,wBmPp6F3PR0AfTybJTpZewA2
GitHub Copilot는 다음 코드 조각을 만들어 사용자가 시작 및 끝 주소를 입력하고 샘플 입력 및 출력에 따라 Azure Maps API를 사용하여 맵에 경로를 표시할 수 있는 인터페이스를 제공할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Azure Maps Route Directions</title>
<meta charset="utf-8" />
<link
href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css"
rel="stylesheet"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<style>
html,
body,
#myMap {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#inputPanel {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="inputPanel">
<input id="startInput" placeholder="Enter starting address" />
<input id="endInput" placeholder="Enter ending address" />
<button id="submitBtn">Get Directions</button>
</div>
<div id="myMap"></div>
<script>
var subscriptionKey = "YOUR_SUBSCRIPTION_KEY";
var map, dataSource;
function getCoordinates() {
var startAddress = document.getElementById("startInput").value;
var endAddress = document.getElementById("endInput").value;
fetch(
`https://atlas.microsoft.com/geocode:batch?api-version=2023-06-01&subscription-key=${subscriptionKey}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
batchItems: [
{
addressLine: startAddress,
},
{
addressLine: endAddress,
},
],
}),
}
)
.then((response) => response.json())
.then((data) => {
var startCoordinates =
data.batchItems[0].features[0].geometry.coordinates;
var endCoordinates =
data.batchItems[1].features[0].geometry.coordinates;
getRoute(startCoordinates, endCoordinates);
});
}
function getRoute(startCoordinates, endCoordinates) {
fetch(
`https://atlas.microsoft.com/route/directions?api-version=2025-01-01&subscription-key=${subscriptionKey}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
coordinates: startCoordinates,
type: "Point",
},
properties: {
pointIndex: 0,
pointType: "waypoint",
},
},
{
type: "Feature",
geometry: {
coordinates: endCoordinates,
type: "Point",
},
properties: {
pointIndex: 1,
pointType: "waypoint",
},
},
],
routeOutputOptions: ["routePath"],
travelMode: "driving",
}),
}
)
.then((response) => response.json())
.then((data) => {
dataSource.clear();
dataSource.add(data);
map.setCamera({
bounds: atlas.data.BoundingBox.fromData(data),
padding: 50,
});
});
}
map = new atlas.Map("myMap", {
authOptions: {
authType: "subscriptionKey",
subscriptionKey: subscriptionKey,
},
});
map.events.add("ready", function () {
dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
map.layers.add(new atlas.layer.LineLayer(dataSource));
map.layers.add(new atlas.layer.SymbolLayer(dataSource));
document
.getElementById("submitBtn")
.addEventListener("click", getCoordinates);
});
</script>
</body>
</html>
Azure Maps API 요청 입력 및 응답 출력의 예를 제공하면 GitHub Copilot가 보다 정확하고 관련 있는 코드 조각을 생성하는 데 도움이 될 수 있습니다. 필요한 경우 JSON을 축소하여 토큰 수를 줄입니다. 사용자 고유의 API 서비스를 호출할 때도 동일한 기술을 적용하여 GitHub Copilot가 API의 작동 방식을 이해할 수 있습니다.
알려진 제한 사항
생성된 코드 조각을 검토하려면 엔지니어링 노력이 필요하며 몇 가지 제한이 있습니다.
- CSS 스타일은 GitHub Copilot에 추가하도록 명시적으로 지시하지 않는 한 일반적으로 포함되지 않습니다.
- Copilot에게 Bing Maps 웹 SDK 코드를 Azure Maps Web SDK 코드로 변환하도록 요청하는 경우 일반적으로 둘 사이에 항상 일대일 매핑이 없기 때문에 결과가 좋지 않습니다.
- 가끔 부정확할 수 있으며 디버깅 기술과 일부 시행착오가 필요합니다.
결론
이 방법 가이드에서는 GitHub Copilot를 사용하여 애플리케이션에 대한 코드 조각을 생성하는 방법을 보여 줍니다. 이 기능은 엔터프라이즈용 Bing Maps에서 Azure Maps로 애플리케이션을 마이그레이션할 때 유용할 수 있습니다.
다음 사항을 다루었습니다.
- 프롬프트를 명확한 문장으로 작성합니다.
- 자세한 단계별 지침을 제공합니다.
- Azure Maps API 요청 입력 및 응답 출력에 대한 예제를 포함합니다.
다음 단계
프롬프트를 구체화하는 데 도움이 되도록 다른 고급 프롬프트 엔지니어링 기술을 살펴보세요.