[javascript] Parcel에서 웹 블루투스를 사용하는 방법은?

22 Nov 2023

javascript

Parcel은 자바스크립트 애플리케이션의 종속성 관리와 번들링을 자동으로 처리해주는 도구입니다. Parcel의 장점은 설정 없이 번들링 작업을 자동으로 처리해준다는 것입니다.

웹 블루투스를 사용하기 위해서는 먼저 블루투스 API가 지원되는 최신 브라우저를 사용해야 합니다. 그런 다음 Parcel 프로젝트를 생성하고 필요한 종속성을 설치해야 합니다.

Parcel 프로젝트를 생성하려면 다음 명령을 실행합니다:

$ npm init -y

그런 다음 Parcel과 블루투스 API를 사용하기 위한 라이브러리를 설치합니다:

$ npm install parcel-bundler web-bluetooth

이제 Parcel을 사용하여 애플리케이션을 빌드하고 실행할 수 있습니다. 먼저 index.html 파일을 생성하고 다음과 같이 작성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Bluetooth Example</title>
</head>
<body>
  <button id="connectButton">Connect to Bluetooth Device</button>

  <script src="./index.js"></script>
</body>
</html>

다음으로 index.js 파일을 생성하고 다음과 같이 작성합니다:

document.getElementById('connectButton').addEventListener('click', async () => {
  try {
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['heart_rate'] }]
    });
    console.log('Device:', device);
  } catch (error) {
    console.error('Error:', error);
  }
});

위 코드는 사용자에게 블루투스 장치 선택을 요청하고 선택한 장치를 출력하는 간단한 예제입니다. filters 옵션을 사용하여 특정 서비스 (여기서는 ‘heart_rate’)를 가진 장치만 선택할 수 있습니다.

마지막으로 애플리케이션을 실행하기 위해 다음 명령을 실행합니다:

$ npx parcel index.html

위 명령을 실행하면 Parcel이 애플리케이션을 번들링하고 로컬 서버를 실행합니다. 웹 브라우저에서 http://localhost:1234에 접속하면 애플리케이션이 실행되는 것을 확인할 수 있습니다.

이제 Parcel을 사용하여 웹 블루투스를 사용하는 애플리케이션을 개발할 수 있습니다. Parcel은 번들링 작업을 자동으로 처리해주기 때문에 개발에 편리하게 사용할 수 있습니다.

더 많은 자세한 내용은 Parcel 공식 문서를 참조하시기 바랍니다.