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

22 Nov 2023

javascript

Parcel 프로젝트 생성 Parcel을 사용하여 프로젝트를 생성합니다. 다음 명령어를 통해 필요한 패키지를 설치합니다.
```
npm init -y
npm install parcel-bundler --save-dev
```
NFC API 지원 확인 웹 NFC를 사용하기 전에 먼저 브라우저가 해당 API를 지원하는지 확인해야 합니다. 다음과 같이 지원 여부를 체크합니다.
```
if ("NDEFReader" in window) {
  console.log("NFC 지원 여부: 지원됨");
} else {
  console.log("NFC 지원 여부: 지원되지 않음");
}
```
NFC 기능 구현 NFC API를 사용하여 NFC 기능을 구현할 수 있습니다. 예를 들어, NFC 태그가 감지되면 NDEF 메시지를 읽는 코드는 다음과 같습니다.
```
async function readNFC() {
  const reader = new NDEFReader();

  try {
    await reader.scanNDEFMessage();
    reader.onreading = event => {
      console.log("NDEF 메시지 읽기 성공:", event.message);
    };
  } catch (error) {
    console.log("NFC 읽기 오류:", error);
  }
}

readNFC();
```
이 코드는 NFC 리더기 객체를 생성하고, NDEF 메시지를 읽을 때마다 이벤트를 처리하는 함수를 추가합니다. 함수를 호출하여 NFC 읽기를 시작합니다.
Parcel 실행 Parcel을 사용하여 프로젝트를 실행합니다. 다음 명령어를 실행하면 프로젝트가 빌드되고 로컬 서버가 실행됩니다.
```
npx parcel index.html
```
이제 브라우저에서 http://localhost:1234에 접속하면 Parcel이 실행되며, NFC 기능을 사용할 수 있게 됩니다.

이제 Parcel을 사용하여 웹 NFC를 구현하는 방법을 알게 되었습니다. 이를 기반으로 원하는 NFC 기능을 추가로 구현할 수 있습니다. 자세한 내용은 Parcel과 NFC API 문서를 참조하시기 바랍니다.