[javascript] Parcel에서 D3.js를 사용하는 방법은?

22 Nov 2023

javascript

Parcel에서 D3.js를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다. 아래는 Parcel을 사용하여 D3.js를 빌드 및 실행하는 방법에 대한 간단한 가이드입니다.

프로젝트 폴더를 생성하고 터미널을 엽니다.
프로젝트 폴더로 이동한 다음, 다음 명령어를 사용하여 필요한 종속성을 설치합니다.

npm init -y
npm install d3
npm install parcel-bundler

패키지 설치가 완료되면, 프로젝트 폴더에 index.html 파일과 main.js 파일을 생성합니다.
index.html 파일에 아래의 내용을 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Parcel + D3.js</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

main.js 파일에서 D3.js를 import하고 사용할 수 있습니다. 아래의 예제는 간단한 D3.js 코드입니다.

import * as d3 from 'd3';

// D3.js 코드 작성 예시

터미널에서 다음 명령어를 실행하여 Parcel을 실행합니다.

npx parcel index.html

성공적으로 실행되면, 브라우저에서 http://localhost:1234로 접속하여 결과를 확인할 수 있습니다.

위의 단계를 따라하면 Parcel을 사용하여 D3.js를 프로젝트에 추가하고 사용할 수 있습니다. Parcel은 번들링과 개발 서버 기능을 제공하므로 간단하고 신속한 개발을 도와줍니다.

참고 자료: