1. 화면구성하기

생성한 QR코드를 보여줄 화면을 구성해 주도록 하겠습니다

개발하기

QR코드를 사용자에게 보여주기 위해 [컴포넌트]-[컨트롤]-[Image]를 사용하여 생성한 QR코드를 Image 컴포넌트에 보여주도록 구성해주어야 합니다.

Image 영역 생성

QR코드를 보여줄 Image영역으로 "QRCode" 카테고리로 관리하도록 하겠습니다.

1. 그룹 > 레이아웃 > Image 컴포넌트 구조로 스탭에 생성해줍니다.

1. Layout1에 데이터 연결을 통해 "QRCode" 카테고리를 "기본" 용도로 연결합니다.

1. Image 컴포넌트를 QR코드를 보여주는 용도로 사용하기 위해 뷰 모드로 설정하고 이미지 보여줄 방법을 URL로 설정합니다.

1. 이미지 경로 URL을 대체텍스트를 활용하여 지정해주도록 하겠습니다. QRCode 라이브러리를 통해 생성한 URL이 있는 컬렉션 키 "ImgURL"로 지정해주도록 합니다.

1. QRCode의 ImgURL 이 생성전인 경우 Image컴포넌트가 보이지않도록 로드스크립트에서 Current.control.controlkey() 통해 컴포넌트 상태를 제어하도록 합니다.

// ImgURL 유무 체크
if (Current.sector.ImgURL) {
    Current.control.controlkey('')
}
else {
    Current.control.controlkey('hid')
}

챕터 마무리

배운 내용

• Image 컴포넌트에 URL을 동적으로 설정하는 방법에 대해 알아보았습니다.

• 컴포넌트를 섹터의 값에 따라 제어하는 방법에 대해 알아보았습니다.

다음 챕터에서는?

• 외부 Script 로드하기를 통한 라이브러리를 로드하는 방법에 대해 알아봅니다.

• QR코드 생성 후 화면에 적용하는 방법에 대해 알아봅니다.