2. 이벤트 구성하기

QRCode 라이브러리를 활용하여 QR코드를 생성하고보여주는 방법에 대해 알아보겠습니다.

개발하기

QRCode라이브러리를 사용하여 QR코드를 생성하여 보여주려면 다음 과정을 따라야 합니다.

QRCode 라이브러리 로드 - LoadQRModule
QR코드 생성 - CreateQRCode

QRCode 라이브러리 로드

QR코드를 생성해주기 위해서는 먼저 QRCode 라이브러리를 로드하는 이벤트를 LoadQRModule로 생성해주도록 하겠습니다.

Flextudio의 기능 중 f.Script.load() 함수를 사용하여 외부 스크립트 라이브러리를 로드할 수 있습니다. 또한 함수자동생성 → Flex유틸 → Web → 라이브러리를 선택을 통해 아래와 같이 간단하게 생성할 수 있습니다.

스크립트 URL: QRCode 라이브러리를 로드하기 위한 URL을 지정합니다.

https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js

로드 후 실행 이벤트: 라이브러리 로드 후 실행할 이벤트를 지정합니다. 이 실습에서는 CreateQRCode라는 이벤트를 설정하여, 라이브러리가 로드된 후 QR코드를 생성하는 기능을 바로 시작할 수 있도록 합니다.
요청 후 대기여부: 스크립트 로드가 동기적으로 실행될지, 비동기적으로 실행될지를 선택할 수 있습니다. 비동기 실행을 통해 페이지 로딩 시간에 영향을 주지 않고, 백그라운드에서 스크립트를 로드할 수 있습니다.
이 실습에서는 체크를 해제하여 스크립트 로드가 비동기적으로 실행되도록 합니다.

이러한 설정을 완료하고 나면, 자동으로 QRCode 라이브러리를 로드하는 함수를 생성합니다. 이 함수는 외부 스크립트를 효율적으로 로드하고, 설정된 이벤트를 적절히 트리거할 수 있도록 구성됩니다.

생성된 스크립트

f.Script.load('https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js','CreateQRCode',null);

QR코드 생성

QR코드를 생성하는 이벤트를 CreateQRCode로 생성해주도록 하겠습니다.

QRCode 라이브러리를 로드하면 QRCode 변수를 사용하여 QR 코드 이미지를 생성할 수 있으며, 이 과정에서 이미지에 대한 URL을 반환받습니다. 반환된 URL은 "QRCode" 카테고리의 첫 번째 섹터에 ImgURL로 저장되며, 이미지 영역을 업데이트하기 위해 재로드 스크립트를 작성하겠습니다. 이 스크립트는 이미지 영역이 QR 코드 이미지로 업데이트되도록 도와줍니다.

생성한 QR코드는 Image 영역에만 영향을 주게됩니다. Image 영역에만 반영해주기 위해 Image 영역의 그룹인 Group1를 reload() 시켜주는 스크립트를 추가해야 합니다. 이를 위해 먼저 해당 그룹의 fId를 복사하도록 합니다.

fId는 컴포넌트 생성 시점에 따라 다르게 됩니다. 실습 이미지의 값이 아닌 시나리오에서 복사해서 사용해야합니다. 자세한 설명은 [개발모드]-[컴포넌트]-[컴포넌트 동적 활용(컴포넌트 아이디)] 를 참조해주세요.

CreateQRCode이벤트에 스크립트 구성하기

//이곳에 원하는 데이터를 입력하세요. 저는 홈페이지로 연결하도록 링크를 넣겠습니다.
const data = 'https://www.flextudio.com/'; 

QRCode.toDataURL(data, function (err, url) {
    if (err) console.error(err);
    _c.QRCode[0].ImgURL = url;
    // Image 영역 reload
    f.Content('복사한 fId').reload();
});