Vue.js에서 vue-qrcode-reader를 사용하여 QR 코드 스캔 통합

이 글에서는 `vue-qrcode-reader` 라이브러리를 사용하여 Vue.js 애플리케이션에 QR 코드 및 바코드를 스캔하는 방법을 설명합니다.

개요

`vue-qrcode-reader` 라이브러리는 Vue.js 프로젝트에서 QR 코드 및 다른 바코드 형식을 브라우저에서 직접 감지할 수 있는 간편한 컴포넌트를 제공합니다. 이 라이브러리는 카메라 스트림에서 스캔, 드래그 앤 드롭 이미지 업로드, 파일 업로드 등의 여러 가지 모드를 지원합니다.

제공되는 컴포넌트

• QrcodeStream: 카메라 스트림에서 연속적으로 프레임을 스캔합니다.
• QrcodeDropZone: 사용자가 이미지를 드래그 앤 드롭하여 즉시 디코딩할 수 있는 영역입니다.
• QrcodeCapture: 사용자가 선택한 파일을 스캔하는 전통적인 파일 업로드 필드입니다.

이 패키지는 최소한의 스타일링으로 기능에 집중하고 있어 기존 레이아웃에 쉽게 통합할 수 있습니다.

주요 기능

• 반응형 디자인: 기본적으로 모바일 반응형 디자인을 지원합니다.
• 카메라 통합: `QrcodeStream` 컴포넌트를 통해 웹캠 또는 모바일 장치의 카메라를 사용해 연속적으로 QR 코드를 스캔할 수 있습니다.
• 드래그 앤 드롭 지원: `QrcodeDropZone`을 사용하여 이미지를 드래그 앤 드롭해 QR 코드를 즉시 스캔할 수 있습니다.
• 파일 업로드 스캔: `QrcodeCapture` 컴포넌트를 통해 사용자가 선택한 파일을 스캔할 수 있습니다.

설치

npm으로 설치:

npm install vue-qrcode-reader

설치 후, 다음과 같이 필요한 컴포넌트를 개별적으로 가져올 수 있습니다:

import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

또는, 모든 컴포넌트를 전역적으로 등록할 수 있습니다:

import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)

npm 없이 사용하기:

다음과 같은 스크립트 태그를 포함하세요:

<script src="https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js"></script>

이 스크립트는 Vue.js 스크립트 뒤에 포함되어야 합니다.

사용법

패키지를 설정한 후, 컴포넌트를 사용하는 것은 간단합니다. 아래는 QrcodeStream 컴포넌트를 사용하여 QR 코드를 스캔하는 예제입니다:

<template>
  <qrcode-stream @detect="onDetect"></qrcode-stream>
</template>

<script>
export default {
  methods: {
    onDetect(detectedCodes) {
      console.log(detectedCodes)  // 감지된 QR 코드 처리
    }
  }
}
</script>

@detect 이벤트는 디코딩된 QR 코드 데이터를 반환하므로 이를 애플리케이션에서 필요에 맞게 처리할 수 있습니다.

문제 해결

QrcodeStream에서 카메라가 표시되지 않음

HTTPS에서 실행 중인지 확인하고, 카메라 스트림을 사용할 수 있는 권한이 있는지 확인해 주세요. 또한 웹캠이 지원되는지 확인해야 합니다.

스캔할 QR 코드가 감지되지 않음

QR 코드 주위에 충분한 여백이 있는지 확인하십시오. 또한 QR 코드가 깨끗하고 잘 인식되는지 확인해야 합니다.

출처: Vue QR Code Reader GitHub

Vue3 + Typescript + Vite + ESLint + Prettier + Pinia + Router + Tailwind

Vite, Vue3, TypeScript, ESLint, Prettier, Pinia, Vue Router, Tailwind CSS 설치 및 설정

목적

• Vite: 빠른 빌드 도구, 서버 실행 중 추가 패키지 설치 반영
• Vue3: 쉽고 직관적인 프레임워크
• TypeScript: JavaScript의 기능 보완
• ESLint: 일관성 있는 코딩을 위한 도구
• Prettier: 일관성 있는 코딩 스타일을 위한 도구 (줄바꿈, 공백 등)
• Pinia: Vuex 대신 사용하는 상태 관리 라이브러리
• Vue Router: URL 라우터
• Tailwind CSS: 유틸리티 기반의 CSS 프레임워크

프로젝트 생성

아래 명령어로 새로운 Vite 프로젝트를 생성합니다:

$ npm create vite@latest 프로젝트명 --template vue-ts

프로젝트 디렉토리로 이동하여 의존성 패키지를 설치하고 개발 서버를 실행합니다:

$ cd 프로젝트명

$ npm install

$ npm run dev

@types/node 설치

Node.js 타입을 제공하는 패키지를 설치합니다:

$ npm install --save-dev @types/node

vite.config.ts 설정

Vite 설정 파일을 작성합니다:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") },
  },
});

tsconfig.json 설정

TypeScript 설정 파일을 작성합니다:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

ESLint, Prettier 설치

ESLint와 Prettier를 설치하여 코드 스타일을 일관되게 유지합니다:

$ npm install -D prettier

$ npm install -D eslint

$ npm install -D eslint-plugin-vue

$ npm install -D eslint-config-prettier

$ npm install -D @vue/eslint-config-typescript

.eslintrc.js 파일 작성하기

ESLint 설정 파일을 작성합니다:

module.exports = {
  env: {
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: [
    // override or add rules settings here
  ]
};

Pinia 설정

Pinia를 설치하고 상태 관리를 위한 플러그인을 추가합니다:

$ npm install pinia

import { createPinia } from 'pinia';

const pinia = createPinia();

...use(pinia);

Vue Router 설정

Vue Router를 설치하고 URL 라우팅을 설정합니다:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array = [
  { path: "/", component: () => import("../views/Home.vue") },
  { path: "/about", component: () => import("../views/About.vue") }
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

main.ts 파일에서 Vue Router를 플러그인으로 추가합니다:

import router from "./router";
...use(router);

Tailwind CSS 설정

Tailwind CSS를 설치하고 설정합니다:

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

$ npx tailwindcss init -p

Tailwind CSS 스타일을 적용하려면 main.ts 파일에 아래를 추가합니다:

import 'tailwindcss/tailwind.css';