[javascript] Parcel에서 웹 NFC 태그를 사용하는 방법은?

22 Nov 2023

javascript

Parcel 프로젝트 생성하기
```
$ npm init -y
```
필요한 패키지 설치하기 Parcel에서 웹 NFC 태그를 사용하기 위해 @web-nfc/client 패키지를 설치해야 합니다.
```
$ npm install @web-nfc/client
```

JavaScript 파일 작성하기 Parcel로 번들링할 JavaScript 파일을 작성합니다. 예를 들어, main.js 파일을 생성하고 다음 코드를 추가합니다.

import { NDEFReader } from '@web-nfc/client';

const ndefReader = new NDEFReader();

async function readNFC() {
  try {
    await ndefReader.scan();
    console.log('NFC 태그를 읽는중...');
    ndefReader.addEventListener('reading', ({ message, serialNumber }) => {
      console.log(`태그 식별번호: ${serialNumber}`);
      console.log(`메시지: ${message}`);
    });
  } catch (error) {
    console.error('NFC 태그 스캔 중 오류:', error);
  }
}

document.querySelector('#start-button').addEventListener('click', readNFC);

HTML 파일 작성하기 Parcel로 번들링할 HTML 파일을 작성합니다. 예를 들어, index.html 파일을 생성하고 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Parcel로 웹 NFC 태그 사용하기</title>
</head>
<body>
  <h1>Parcel로 웹 NFC 태그 사용하기</h1>
  <button id="start-button">NFC 태그 읽기 시작</button>
  <script src="./main.js"></script>
</body>
</html>

애플리케이션 실행하기 Parcel을 사용하여 애플리케이션을 실행합니다.
```
$ npx parcel index.html
```
이제 http://localhost:1234 로 이동하여 애플리케이션을 확인할 수 있습니다.

참고 문서:

Parcel 공식 사이트: https://parceljs.org/
Web NFC API 사양: https://w3c.github.io/web-nfc/