[javascript] Parcel에서 지도 라이브러리를 사용하는 방법은?

22 Nov 2023

javascript

Parcel에서 지도 라이브러리를 사용하는 방법은 다음과 같습니다.

먼저, Parcel 프로젝트를 설정합니다. Parcel로 새로운 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다.

mkdir my-map-app
cd my-map-app
npm init -y
npm install parcel-bundler --save-dev

Parcel을 통해 JavaScript 파일을 빌드하고 실행할 수 있는 index.html 파일을 생성합니다. 파일 내용은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Map App</title>
</head>
<body>
  <div id="map"></div>
  
  <script src="./index.js"></script>
</body>
</html>

my-map-app 폴더에 index.js 파일을 생성하고, 필요한 지도 라이브러리를 설치합니다.

cd my-map-app
npm install leaflet --save

index.js 파일 내에서 필요한 지도 라이브러리를 가져와서 사용합니다. 예를 들어, leaflet 라이브러리를 사용하고 싶다면 다음과 같이 index.js 파일을 작성합니다.

import L from 'leaflet';

// 맵을 생성하고 설정합니다
const map = L.map('map', {
  center: [37.5665, 126.9780],
  zoom: 13
});

// 타일 레이어를 추가합니다
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

// 마커를 추가합니다
const marker = L.marker([37.5665, 126.9780]).addTo(map);

이제 npm start 명령어를 실행하여 브라우저에서 프로젝트를 실행하면, 설정한 지도가 보여집니다. 위의 예제에서는 leaflet 라이브러리를 사용하여 OpenStreetMap을 표시하고, 서울 시청에 마커를 추가하는 예시입니다.

이렇게 Parcel을 사용하여 지도 라이브러리를 적용할 수 있습니다. 추가적으로 필요한 라이브러리가 있다면 npm install 명령어를 통해 설치하고, 해당 라이브러리를 import하여 사용하면 됩니다.

참고 링크: