React를 사용한 QR 코드 생성

의해 Ejiro Thankgod

90년대 초반에는 바코드 스캐닝이 점점 더 어려워졌습니다. 각 바코드는 20자의 데이터만 저장할 수 있기 때문에 상자나 항목에 포함된 항목과 관련된 정보를 전달하기 위해 여러 개의 바코드가 필요한 경우가 많았습니다. Denso Wave라는 글로벌 자동차 회사도 비슷한 문제를 안고 있었습니다. Denso Wave 회사에서 일했던 Hara Masahiro(바코드 스캐너를 만든 사람)라는 일본인 엔지니어는 이 문제에 대해 알게 되었을 때 오래 지속되는 솔루션을 찾기로 결정했습니다. 마지막으로 그와 그의 팀은 스캐너가 바코드를 즉시 인식할 수 있도록 새 바코드의 모서리에 3개의 작은 사각형(흑백 영역의 특정 비율 포함)을 삽입하는 솔루션을 내놓았습니다. 그것의 목적은 고속 부품 스캐닝 기능으로 제조 과정에서 차량을 추적하는 것이었습니다.



그것이 QR 코드의 발명이 존재하게 된 방법이며 기술 공간에서 매우 신뢰할 수 있게 되었습니다. QR 코드에 대한 역사 이야기로 충분합니다. React로 작성된 웹 앱에서 QR 코드를 생성하는 오늘의 비즈니스로 넘어가겠습니다.

QR코드란?

QR Codes은 바코드의 2차원 버전으로, 디지털 장치에서 쉽게 읽을 수 있는 흑백 픽셀의 사각형 모양 격자입니다. 당시에는 자동차 생산을 위한 물류 프로세스를 가속화하기 위해 구성 요소를 마킹하기 위해 개발되었습니다.

이러한 코드는 광고판, 간행물, 특히 웹 페이지에 적용되었으며 React 및 qrcode 라이브러리를 사용하여 처음부터 자체 QR 코드 애플리케이션을 구축할 것입니다.

시작하기

먼저 React 앱을 만들 것입니다. npx create-react-app qrcode-app 명령을 사용하여 처음부터 시작하겠습니다. 그런 다음 디렉터리를 qrcode-app로 변경하고 npm start를 실행하여 앱이 올바르게 생성되었는지 확인합니다.

프로젝트에 필요한 여러 종속 항목을 설치해야 합니다. 따라서 다음 명령을 실행하십시오.

npm i qrcode @mui/material @emotion/react @emotion/styled --save

Note: For more beautification of the QR Code Generator, you could add Material UI, Tailwind CSS, or Boostrap, but we'll be using basic CSS in our article.

구성 요소 만들기

여기에서 Qrcode.jsx 파일에 QR 코드 구성 요소를 생성할 구성 요소 폴더가 있습니다. qrcode 라이브러리를 사용하여 텍스트를 그래픽으로 변환합니다. 이 라이브러리는 텍스트를 매개변수로 받아 2차원 바코드를 생성합니다.

    //Qrcode.jsx//

    import QRCode from 'qrcode'
    import { useState } from 'react'
    import { Button } from '@mui/material'
    function Qrcode() {
        const [url, setUrl] = useState('')
        const [qr, setQr] = useState('')
        const GenerateQRCode = () => {
            QRCode.toDataURL(url, {
                width: 800,
                margin: 2,
                color: {
                    // dark: '#335383FF',
                    // light: '#EEEEEEFF'
                }
            }, (err, url) => {
                if (err) return console.error(err)
                console.log(url)
                setQr(url)
            })
        }
        return (
            <div className="app">
                <h1>QR Generator</h1>
                <input 
                    type="text"
                    placeholder="e.g. https://google.com"
                    value={url}
                    onChange={e => setUrl(e.target.value)} />
                <Button variant="contained" onClick={GenerateQRCode}>Generate</Button>
                {qr && <>
                    <img src={qr} />
                    <Button variant='contained' color='success' href={qr} download="qrcode.png">Download</Button>
                </>}
            </div>
        )
    }
    export default Qrcode

약간의 설명과 함께 분해해 보겠습니다. input 텍스트가 있는 placeholder 텍스트 필드가 있습니다. value 로 설정된 소품도 있습니다. QR 코드 생성을 호출하는 버튼url을 생성합니다. 마지막으로 생성된 QR 코드를 다운로드하고 공유할 수 있는 Generate 버튼도 있습니다.

오픈 소스 세션 재생

OpenReplay은 사용자가 웹 앱에서 수행하는 작업을 볼 수 있는 오픈 소스 세션 재생 제품군으로, 문제를 더 빨리 해결할 수 있도록 도와줍니다. OpenReplay는 데이터를 완벽하게 제어할 수 있도록 자체 호스팅됩니다.



디버깅 경험을 즐기십시오 - start using OpenReplay for free .

앱 구성 요소 만들기

App.js 파일에는 많은 내용이 없습니다. Download 파일만 가져오겠습니다.

    //App.js//

    import Qrcode from './components/Qrcode';
    import './App.css';
    function App() {
      return (
        <div className="App">
          <Qrcode />

        </div>
      );
    }
    export default App;

일부 스타일 추가

QR 코드 생성기가 눈에 덜 지루해 보이도록 CSS 파일을 구성하기만 하면 됩니다.

    //index.css//

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: sans-serif;
    }
    body {
      text-align: center;
      background-color: #1b2034;
      color: #fff;
    }
    img {
      display: block;
      width: 480px;
      height: 480px;
      margin: 2rem auto;
    }
    .app {
      padding: 2rem;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    input {
      appearance: none;
      outline: none;
      border: none;
      background: #EEE;
      width: 100%;
      max-width: 320px;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      margin-right: 1rem;
    }
    button, a {
      appearance: none;
      outline: none;
      border: none;
      background: none;
      cursor: pointer;
      color: #2bcb4b;
      font-size: 1.5rem;
      text-decoration: none;
    }

이것이 우리 앱의 모습입니다.



이를 사용하려면 텍스트 필드에 텍스트를 입력하고 Qrcode.jsx 를 클릭하면 생성된 QR 코드가 표시되며 Generate 을 클릭하여 다운로드할 수 있습니다.

결론

QR 코드는 인류의 삶을 훨씬 더 쉽게 만들었습니다. 앱에서 상품 및 서비스를 쉽게 추적하거나 암호화폐 지갑 QR 코드를 스캔하여 돈을 보내거나 받을 수 있습니다. 코드 블록을 스캔하면 필요한 모든 데이터를 사용할 수 있습니다.

지금까지 본 것처럼 Download 라이브러리와 React를 사용하여 QR 코드를 생성할 수 있습니다. 라이브 앱deployed on Vercel으로 플레이할 수 있습니다. 전체 소스 코드를 보려면 여기Github link를 클릭하십시오.

자원

QR Code

Github page