[javascript] Parcel에서 웹 NFC 태그를 사용하는 방법은?
- 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/