React로 QR 코드 생성기 만들기

소개

이 튜토리얼에서는 React를 사용하여 QR 코드 생성기 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 API 통합, 상태 관리 및 동적 콘텐츠 생성에 대해 배우려는 사람들에게 이상적입니다.

프로젝트 개요

QR 코드 생성기를 사용하면 콘텐츠 입력, 크기 조정, 배경색 선택을 통해 QR 코드를 생성할 수 있습니다. 공개 API를 활용하여 QR 코드를 생성하고 화면에 표시합니다. 사용자는 다양한 목적으로 QR코드를 생성, 조회, 다운로드할 수 있습니다.

특징

• 콘텐츠 입력: 사용자가 인코딩하고 싶은 콘텐츠를 QR코드에 입력할 수 있습니다.
• 동적 크기: QR 코드의 크기를 동적으로 조정합니다.
• 배경 색상 맞춤 설정: QR 코드의 배경 색상을 선택하세요.
• API 통합: 공개 QR 코드 생성 API에서 QR 코드를 가져옵니다.
• 다운로드 옵션: 생성된 QR 코드를 사용자가 다운로드할 수 있습니다.

사용된 기술

• React: 사용자 인터페이스를 구축하고 구성 요소 상태를 관리합니다.
• CSS: 애플리케이션 스타일을 지정합니다.
• JavaScript: API 요청 및 앱 로직을 처리합니다.

프로젝트 구조

프로젝트는 다음과 같이 구성됩니다.

├── public
├── src
│   ├── components
│   │   ├── QrCode.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

주요 구성 요소

• QrCode.jsx: QR 코드 생성 및 표시를 관리합니다.
• App.jsx: 메인 레이아웃과 QrCode 구성요소를 렌더링합니다.

코드 설명

Qr코드 구성요소

QrCode 구성요소는 QR 코드 생성 로직을 처리하고 생성된 QR 코드의 표시를 관리합니다.

import { useState } from "react";
import axios from "axios";

const QrCode = () => {
  const [content, setContent] = useState("");
  const [size, setSize] = useState(300);
  const [bgColor, setBgColor] = useState("ffffff");
  const [qrCode, setQrCode] = useState(
    "https://api.qrserver.com/v1/create-qr-code/?data=QR%20Code%20Generator&size=300x300&bgcolor=ffffff"
  );

  const GenerateQR = () => {
    axios
      .get(
        `https://api.qrserver.com/v1/create-qr-code/?data=${content}&size=${size}x${size}&bgcolor=${bgColor}`
      )
      .then((res) => {
        setQrCode(res.config.url);
      });
  };

  return (
    <div className="qr-code">
      <div className="input-box">
        <div className="input-container">
          <input
            type="text"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder="Enter content"
          />
        </div>

        <div className="input-color">
          <h4>Background Color:</h4>
          <input
            type="color"
            value={`#${bgColor}`}
            onChange={(e) => setBgColor(e.target.value.substring(1))}
          />
        </div>
        <div className="input-dimension">
          <h4>Dimension:</h4>
          <input
            type="range"
            min="200"
            max="600"
            value={size}
            onChange={(e) => setSize(e.target.value)}
          />
        </div>
        <button className="generate-btn" onClick={GenerateQR}>
          Generate QR
        </button>
      </div>
      <div className="output-box">
        <div className="qr-image">
          {qrCode && <img src={qrCode} alt="Generated QR Code" />}
        </div>
        {qrCode && (
          <div className="download-btn">
            <a href={qrCode} download="QRCode.png">
              <button type="button">Download</button>
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

export default QrCode;

QR코드 내용, 크기, 배경색, 생성된 QR코드 URL의 상태를 관리하는 컴포넌트입니다. API에서 QR 코드를 가져와 표시합니다.

앱 구성요소

App 구성 요소는 QrCode 구성 요소를 렌더링하고 레이아웃의 머리글과 바닥글을 제공합니다.

import QrCode from './components/QrCode'
import "./App.css"

const App = () => {
  return (
    <div className='app'>
      <div className="header">
        <h1>QR Code Generator</h1>
      </div>
      <QrCode />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
}

export default App;

이 구성요소는 전체 레이아웃을 설정하고 QR 코드 생성기를 포함합니다.

CSS 스타일링

CSS는 깔끔하고 사용자 친화적인 인터페이스를 보장하기 위해 애플리케이션 스타일을 지정합니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #134b70;
  color: white;
}

.header {
  width: 100%;
  text-align: center;
}

.header h1 {
  font-size: 30px;
}

.qr-code {
  background-color: #000000;
  display: flex;
  align-items: flex-start;
  padding: 60px;
  gap: 100px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  box-shadow: rgba(231, 231, 231, 0.35) 0px 5px 15px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.input-container,
.input-color,
.input-dimension {
  margin: 10px 0;
  gap: 40px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  width: 450px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="color"] {
  padding: 5px;
  width: 450px;
}

input[type="range"] {
  width: 450px;
}

.generate-btn {
  padding: 15px 40px;
  width: 450px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 50px;
}

.generate-btn:hover {
  background-color: #45a049;
}

.output-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-image img {
  border: 1px solid #000000;
}

.download-btn {
  margin-top: 20px;
}

.download-btn button {
  width: 300px;
  padding: 12px 40px;
  font-size: 16px;
  background-color: #1171b1;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.download-btn button:hover {
  background-color: #134b70;
}

.footer {
  width: 100%;
  padding: 20px;
  text-align: center;
}

스타일링은 사용자 친화적인 시각적 요소와 반응형 디자인으로 깔끔한 레이아웃을 보장합니다.

설치 및 사용법

이 프로젝트를 시작하려면 저장소를 복제하고 종속성을 설치하세요.

git clone https://github.com/abhishekgurjar-in/qr_code_generator.git
cd qr-code-generator
npm install
npm start

이렇게 하면 개발 서버가 시작되고 애플리케이션은 http://localhost:3000에서 실행됩니다.

라이브 데모

여기에서 QR 코드 생성기의 라이브 데모를 확인하세요.

결론

QR 코드 생성기 프로젝트는 React에서 API를 통합하고 동적 콘텐츠를 관리하는 방법에 대한 실제적인 예입니다. 사용자 친화적인 인터페이스로 QR 코드를 생성할 수 있는 간단하면서도 효과적인 도구를 제공합니다.

크레딧

• 영감: 이 프로젝트는 다양한 애플리케이션에 대한 손쉬운 QR 코드 생성의 필요성에서 영감을 받았습니다.

작가

Abhishek Gurjar는 유용한 대화형 웹 애플리케이션을 만드는 데 열정을 갖고 있는 웹 개발자입니다. GitHub에서 그의 작업을 팔로우할 수 있습니다.

위 내용은 React로 QR 코드 생성기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!