[Vue.js] QR code 만들기

개요

최근에 사내 어드민 페이지를 리뉴얼하면서, QR 코드에 링크를 담아 화면에 띄워주는 기능을 구현하였다.

이 과정에서 QR코드 로딩 방식을 교체하게 되었는데, 관련된 내용을 공유하고자 한다.

외부 서비스 이용

QR 코드를 만드는 방법에 대해, 우리는 두 가지를 생각할 수 있다.

• 별도의 웹서버 등에서 이미지를 생성하고, 해당 이미지의 링크를 받아와 화면에 표시
• 프론트엔드 페이지에서 직접 그려서 표시

이 중 첫번째 방법에 대해 먼저 알아보자.

Google Chart API

구글에서는 화면에 차트를 그리기 위한 Chart API 를 공개하고 있다.

해당 API 문서를 보면, API 서버에 요청을 보내 해당 이미지를 바로 사용할 수 있음을 알 수 있다.

 

그런데 왜 Chart API를 여기서 언급하고 있을까?

이전에는, Chart API 에서 Infographics 생성 기능을 함께 제공했기 때문이다.

이중 QR Code API 를 활용하면, 아래 간단한 코드로 웹페이지에 QR 코드를 삽입할 수 있다.

<img src="https://chart.apis.google.com/chart?cht=qr&chs=250x250&chl={원하는 값}" />

다만 해당 API는 현재 deprecated 상태이므로 프로젝트에 사용하기는 부적합하다.

• 2013년 이후 개발은 중단된 것으로 보이는데, 현재까지 API가 활성화되어 작동하긴 한다..

QuickChart

위의 Google Chart API를 대신해, QuickChart 라는 서비스를 통해 동일한 결과를 얻을 수 있다.

API 문서를 바탕으로, 아래와 같이 코드를 작성하면 작동 가능하다.

<img src="https://quickchart.io/qr?text={원하는 텍스트}&size=250"/>

다만 해당 API는 회사에서 사용하거나 자주 요청하는 경우 요금제에 가입해야 해서, 사내 프로젝트에 쓰기엔 부적절하다고 생각되었다.

프론트엔드에 구현

npm에 qrcode 라는 프로젝트가 있는데, 해당 패키지를 통해 편하게 qr코드를 생성할 수 있다.

현재 사용하고 있는 프로젝트는 Vue3 + TypeScript 환경이라, @types/qrcode 프로젝트를 가져오게 되었다.

구현한 코드는 아래와 같다.

<template>
  <el-image
    v-if="qrcode"
    :src="qrcode"
    alt="QR Code"
    style="width: 164px; height: 164px;"
  />
<template>
<script lang="ts" setup>
  import {toDataURL} from "qrcode";
  
  const qrcode = ref<string>()
  const generateQR = async (url: string) => {
    qrcode.value = await toDataURL(url)
  }
  
  onMounted(async () => {
    const url = 'test.com'
    await generateQR(url)
  })
<script>

• Element-plus 를 디자인 컴포넌트 라이브러리로 쓰고 있어서, img 태그 대신 el-image 를 사용하였다.
  • v-if를 걸어준 이유는, generateQR이 호출되기 전까지 QR 코드가 미리 표시되지 않도록 하기 위함이다.
• JavaScript 예제들에서는 QRCode.toDataURL(url) 로 표기하던데, TypeScript로 구현해보니 그게 안되어서 대신 메소드를 import해 사용하게 되었다.

마치며

간단한 작업이긴 한데, 이런저런 걸 알아보다 보니 시간이 조금 걸렸다.

아직 프론트엔드에는 익숙치 않아서 자잘한 실수를 많이 하는데, 

내가 헤메었던 과정에 다른 분들께 도움이 될까 싶어 업로드해본다.

 

잘못된 내용이 있다면 코멘트 부탁드립니다.