[Next.js] Capacitor에서 NFC 태그 읽기

시작에 앞서 해당 포스팅은 Capacitor를 활용한 Next.js 크로스 플랫폼 앱에서
즉, 웹 앱을 마치 Native처럼 패키징한 형태의 앱에서 Nfc 기능을 적용하고자 하는 과정의 내용이다.

🧐 Intro

준비물이 있다!

1. 애플 개발자 유료 계정
   • ios의 경우이며, Tag Reading은 유료 기능에 포함된다.
2. capawesome-team 구독 계정
   • 이는 Capawesome npm 레지스트리를 구성하기 위한 라이센스 키를 발급 받기 위함이다.

1. 시작하기

Capacitor 프로젝트에서 NFC 플러그인 설치하기 위해,
우선 앞서 준비물이였던 2번에서 발급 받은 라이센스 키가 필요하다.

1-1. 레지스트리 구성

npm config set @capawesome-team:registry https://npm.registry.capawesome.io
npm config set //npm.registry.capawesome.io/:_authToken <YOUR_LICENSE_KEY>

<YOUR_LICENSE_KEY>는 앞서 받은 라이센스 키로 교체해준다.

1-2. 패키지 설치

npm install @capawesome-team/capacitor-nfc
npx cap sync

패키지 설치 후, npx cap sync로 모바일과 동기화까지 완료해준다.

2. 적용하기

Capacitor의 NFC 플러그인을 사용하여 NFC 리스너를 등록하고, 태그를 감지하면 데이터를 출력한 후 세션을 종료하는 구조다.

useEffect(() => {
    let listener: any;

    const readNfc = async () => {
      // 기존 리스너 제거
      if (listener) {
        listener.remove();
      }

      listener = Nfc.addListener("nfcTagScanned", async (event) => {
        console.log("NFC 태그 감지됨");
        console.log("전체 이벤트 데이터:", event);

        await Nfc.stopScanSession();
        console.log("NFC 세션 종료");
      });

      Nfc.addListener("scanSessionError", (error) => {
        console.error("NFC 세션 에러 발생:", error);
      });

      try {
        await Nfc.startScanSession();
        console.log("NFC 스캔 세션 시작");
      } catch (err) {
        console.error("NFC 스캔 세션 시작 실패:", err);
      }
    };

    readNfc();

    // 컴포넌트 언마운트 시 기존 NFC 리스너를 제거
    return () => {
      if (listener) {
        listener.remove();
      }
    };
  }, []);

nfcTagScanned : NFC 태그를 감지하면 해당 이벤트가 발생하고 데이터를 출력
scanSessionError : 태그를 감지하지 못하거나, NFC 기능이 비활성화된 경우 발생하는 에러 이벤트
startScanSession : NFC 스캔 세션을 시작
stopScanSession : 태그 감지 후 NFC 스캔 세션 종료
listener.remove() : 기존 리스너 제거하여 중복 및 메모리 누수 방지

3. 정리하기

• Next.js + Capacitor를 활용하여 NFC 기능을 크로스 플랫폼 환경에서 구현
• Capawesome NFC 플러그인 활용
• NFC 태그 감지 및 데이터 출력, 세션 자동 종료 기능 적용
• 이전 리스너 제거 및 에러 핸들링을 통해 최적화된 NFC 스캔 로직 구현