0songha0

Vue 프로젝트 QRCode 공통 컴포넌트 개발

Vue QRCode 컴포넌트 개발 방법

qrcode 라이브러리 추가

"dependencies": {
  "qrcode": "^1.5.3"
}

Javascript에서 qrcode를 쉽게 그려주는 라이브러리를 추가합니다.
package.json 파일 수정 후 npm install 명령어 실행이 필요합니다.

환경변수 파일에 링크 추가

VITE_BOARD_FRONT_URL=http://10.10.1.86:5173

.env.서버구분 파일에 QRCode 베이스 URL을 작성합니다.

QRCode 공통 컴포넌트 작성

<template>
  <canvas ref="canvas"></canvas>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import QRCode from 'qrcode';

const canvas = ref();

const props = defineProps({
  qrUrl: {
    type: String,
    required: true
  }
})

onMounted(() => {
  if (!props.qrUrl) return;

  // 부모 width 사이즈 정사각형 QR 생성 후 캔버스에 렌더링
  QRCode.toCanvas(canvas.value, props.qrUrl, { margin: 0, width: canvas.value.parentElement.clientWidth })
        .catch(err => console.error(err));
})
</script>

<style scoped>
canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
</style>

캔버스 DOM에 부모 width 크기 QRCode를 그려주는 공통 QR 컴포넌트 예시입니다.
QRCode 생성 시 width를 지정하지 않으면 기본 사이즈 116px로 그려집니다.
현재 부모 사이즈를 벗어나지 않도록 캔버스에 max 사이즈를 부여합니다.

QRCode 컴포넌트 사용 예시

<template>
  <QrCode :qrUrl="qrUrl" v-if="qrUrl" />
</template>

<script setup>
import QrCode from "@/components/common/QrCode.vue";
import { useMainStore } from "@/stores/mainStore.js";
import { storeToRefs } from 'pinia';
import { computed } from "vue";
const mainStore = useMainStore();

const boardFrontUrl = import.meta.env.VITE_BOARD_FRONT_URL;

let { user } = storeToRefs(mainStore);

// 스토어에 입장코드가 있는 경우에만 QR URL 생성 후 렌더링
const qrUrl = computed(() => {
  if (!user.value?.classCode) return null;
  return `${boardFrontUrl}/student/${user.value.classCode}`;
});
</script>

환경변수, 스토어 데이터 기반으로 URL을 생성해서 전달하는 부모 컴포넌트 예시입니다.

최신 글