{"id":11430,"date":"2026-03-02T13:47:11","date_gmt":"2026-03-02T04:47:11","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11430"},"modified":"2026-03-05T14:13:24","modified_gmt":"2026-03-05T05:13:24","slug":"html5-qrcode-%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a0%80-%eb%b0%94%ec%bd%94%eb%93%9c-%ec%8a%a4%ec%ba%94","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11430","title":{"rendered":"html5-qrcode – \ube0c\ub77c\uc6b0\uc800 \ubc14\ucf54\ub4dc \uc2a4\uce94"},"content":{"rendered":"

html5-qrcode – \ube0c\ub77c\uc6b0\uc800 \ubc14\ucf54\ub4dc \uc2a4\uce94<\/h1>\n

VueJS \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ubc14\ucf54\ub4dc\ub97c \uc2a4\uce94\ud574\uc11c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n

\uc758\uc874\uc131 \ucd94\uac00<\/h2>\n
npm install html5-qrcode<\/code><\/pre>\n
\ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131<\/h2>\n
<template>\n  <div ref="scannerRef" id="qr-reader"><\/div>\n<\/template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport { Html5Qrcode } from 'html5-qrcode';\n\n\/\/ \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uacb0\uacfc\ub97c \uc804\ub2ec\ud558\uae30 \uc704\ud55c \uc774\ubca4\ud2b8\nconst emit = defineEmits(['scan-success']);\n\nconst scannerRef = ref(null);\nlet html5QrCode = null;\n\nonMounted(() => {\n  html5QrCode = new Html5Qrcode("qr-reader");\n\n  const config = {\n    fps: 10,\n    qrbox: { width: 250, height: 100 },\n    formatsToSupport: [ 10 ] \/\/ EAN-13 (Html5QrcodeSupportedFormats.EAN_13)\n  };\n\n  html5QrCode.start(\n    { facingMode: "environment" },\n    config,\n    (decodedText) => {\n      emit('scan-success', decodedText);\n    },\n    (errorMessage) => { \/* \ubb34\uc2dc *\/ }\n  ).catch(err => {\n    console.error("\uce74\uba54\ub77c \uc2dc\uc791 \uc2e4\ud328:", err);\n  });\n});\n\n\/\/ \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud30c\uad34\ub420 \ub54c \ubc18\ub4dc\uc2dc \uc2a4\uce90\ub108\ub97c \uba48\ucdb0\uc57c \ud569\ub2c8\ub2e4!\nonBeforeUnmount(async () => {\n  if (html5QrCode && html5QrCode.isScanning) {\n    await html5QrCode.stop();\n  }\n});\n<\/script>\n\n<style scoped>\n#qr-reader {\n  width: 100%;\n  max-width: 500px;\n}\n<\/style><\/code><\/pre>\n
\ud638\ucd9c \ud398\uc774\uc9c0 \uc0dd\uc131<\/h2>\n
<template>\n  <div>\n    <h1>\uc0c1\ud488 \uc2a4\uce94<\/h1>\n    <BarcodeScanner @scan-success="onBarcodeDetected" \/>\n    <p v-if="barcode">\uc778\uc2dd\ub41c \ucf54\ub4dc: {{ barcode }}<\/p>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue';\nimport BarcodeScanner from '.\/components\/BarcodeScanner.vue';\n\nconst barcode = ref('');\n\nconst onBarcodeDetected = (code) => {\n  barcode.value = code;\n  alert(`\ubc14\ucf54\ub4dc \uc778\uc2dd \uc644\ub8cc: ${code}`);\n};\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
html5-qrcode – \ube0c\ub77c\uc6b0\uc800 \ubc14\ucf54\ub4dc \uc2a4\uce94 VueJS \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ubc14\ucf54\ub4dc\ub97c \uc2a4\uce94\ud574\uc11c \ud654\uba74\uc5d0 \ud45c\uc2dc\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4. \uc758\uc874\uc131 \ucd94\uac00 npm install html5-qrcode \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uc131 <template> <div ref="scannerRef" id="qr-reader"><\/div> <\/template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import { Html5Qrcode } from 'html5-qrcode'; \/\/ \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uacb0\uacfc\ub97c \uc804\ub2ec\ud558\uae30 \uc704\ud55c \uc774\ubca4\ud2b8 const emit = defineEmits(['scan-success']); const scannerRef =\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-11430","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11430"}],"version-history":[{"count":1,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11430\/revisions"}],"predecessor-version":[{"id":11431,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/11430\/revisions\/11431"}],"wp:attachment":[{"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyer9.pe.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}