좋아하든 싫어하든 블록 주변의 멋진 아이들이 사용합니다. 물건 공유에 의존하는 앱을 개발하려는 경우 QR 코드는 사용자를 끌어들이는 훌륭한 도구입니다.

But it feels too difficult to implement

걱정하지 마세요. 이 기사는 눈을 감고도(비유적으로 말하면) 할 수 있는 쉬운 솔루션을 안내해 드릴 것입니다.

시작하자!

종속성

QR 코드를 생성하는 데 사용할 수 있는 라이브러리가 많이 있습니다. 개인적으로 가장 좋아하는 것은 qrcode 이며 이 기사에서 사용할 것입니다.

다음을 사용하여 패키지를 설치합니다.

npm i qrcode

구성 요소 설정

QR 코드를 생성하려면 일부 입력 데이터가 필요하므로 텍스트 입력 필드가 있는 기본 구성 요소부터 시작합니다.

import { useState } from "react";

export default function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
    </div>
  );
}

QR 코드 생성

QR 코드를 생성하려면 렌더링할 canvas 요소가 필요합니다.

import QRCode from "qrcode";
import { useEffect, useRef, useState } from "react";

export default function App() {
  const [text, setText] = useState("");
  const canvasRef = useRef();

  useEffect(() => {
    QRCode.toCanvas(
      canvasRef.current,
      // QR code doesn't work with an empty string
      // so we are using a blank space as a fallback
      text || " ",
      (error) => error && console.error(error)
    );
  }, [text]);

  return (
    <div>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />

      <canvas ref={canvasRef} />
    </div>
  );
}

다음은 최종 결과입니다

바닐라 JS에서 QR 코드 사용

패키지에서 작업을 완료하기 위해 React에 의존하지 않는다는 것이 분명했을 것입니다. 다른 프레임워크 또는 바닐라 JS와 함께 사용할 수 있습니다.

<!-- index.html -->
<div>
  <input id="text-input" />
  <br />
  <canvas id="qr-code-canvas"></canvas>
</div>

// script.js
const QRCode = require("qrcode");

const input = document.getElementById("text-input");
const canvas = document.getElementById("qr-code-canvas");

input.addEventListener("change", (event) => {
  QRCode.toCanvas(
    canvas,
    event.target.value || " ",
    (error) => error && console.error(error)
  );
});

사용 사례

QR 코드를 사용하여 모든 데이터를 저장할 수 있지만 가장 자주 사용되는 사용 사례는 다음과 같습니다.

1. 링크 및 연락처 정보 공유

QR 코드는 링크와 연락처 세부 정보를 공유하는 비할 데 없는 용이성을 제공합니다. 아무 앱에서나 코드를 스캔하기만 하면 됩니다(Google 렌즈는 제가 개인적으로 가장 좋아하는 앱입니다).

2. 가상 카드 및 티켓

QR 코드는 확인 목적으로도 사용할 수 있습니다. 가상 카드나 티켓에 붙이기만 하면 스캔하여 권한이나 진위를 확인할 수 있습니다.

3. 디지털 터치 추가

사용자에게 제품의 모든 기능을 알리고 싶지만 단일 광고에 밀어 넣기가 어렵습니까? 제품 세부 정보 페이지에 대한 링크가 포함된 QR 코드를 추가하고 사용자가 직접 탐색할 수 있도록 합니다.

이 기사를 통해 귀하의 웹사이트에 QR 코드를 추가하는 것이 얼마나 간단한지 명확해졌기를 바랍니다.

그게 다야! 🎉

연구에 따르면 펜과 종이에 목표를 적으면 목표를 달성할 가능성이 21%에서 39% 더 높아집니다. 꿈을 이루기 위한 여정을 더 쉽게 만들어 줄 다음 공책과 저널을 확인하십시오: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

읽어 주셔서 감사합니다

개발 문제를 해결하기 위해 최고 등급의 프런트 엔드 개발 프리랜서가 필요하십니까? Upwork에 저에게 연락하십시오

내가 무엇을 하고 있는지 보고 싶습니까? 내 Personal Website 및 GitHub을 확인하십시오.

연결하시겠습니까? 에 나에게 연락

저는 디지털 노마드이며 가끔 여행을 떠납니다. 나를 팔로우하여 내가 무엇을 하고 있는지 확인하세요.

Weekly new Tidbits를 보려면 내 블로그를 팔로우하세요.

자주하는 질문

다음은 제가 받는 몇 가지 자주 묻는 질문입니다. 따라서 이 FAQ 섹션이 문제를 해결하기를 바랍니다.

저는 초보자입니다. Front-End Web Dev를 어떻게 배워야 합니까?
다음 기사를 살펴보십시오.

저를 멘토링해 주시겠습니까?
죄송합니다. 저는 이미 많은 업무를 처리하고 있으며 누군가를 멘토링할 시간이 없습니다.