QR 코드 생성기 만들기: Next.js와 TypeScript로 시작하기

QR 코드 생성기 만들기: Next.js와 TypeScript로 시작하기

개요

이 글에서는 QR 코드 생성기를 만드는 단계별 가이드를 제공합니다.

Next.js와 TypeScript를 사용하여 QR 코드를 입력하고 생성하며,

생성된 QR 코드를 다운로드할 수 있는 웹 애플리케이션을 개발하는 방법입니다.

소개
- QR 코드란?
- 프로젝트 개요
프로젝트 설정
- 프로젝트 초기 설정
UI 구성
- 전체 레이아웃 구성
- 입력 필드 추가
- QR 코드 생성 버튼 추가
- QR 코드 표시 영역 추가
QR 코드 생성
- react-qr-code 라이브러리 설치
- QR 코드 생성 로직 구현
QR 코드 저장
- file-saver 라이브러리 설치
- QR 코드 저장 기능 추가

QR 코드에 효과 추가
- framer-motion 라이브러리 설치
- QR 코드 div 수정

프로젝트 테스트
- QR 코드 생성 및 저장 테스트
결론
- 구현 결과 및 평가

소개

QR 코드는 Quick Response Code의 약자로, 빠르고 쉽게 정보를 전달하는 데 사용되는 2차원 바코드입니다. 이번 프로젝트에서는 Next.js와 TypeScript를 사용하여 QR 코드 생성기를 만들어보려고 합니다. 사용자가 입력한 데이터를 기반으로 QR 코드를 생성하고, 생성된 코드를 이미지로 저장할 수 있는 웹 애플리케이션을 구현할 것입니다.

프로젝트 설정

Next.js 공식문서의 프로젝트 생성 가이드대로, 아래 명령어로 프로젝트를 생성합니다.

npx create-next-app@latest

UI 구성

프로젝트의 UI를 구성하기 위해, 먼저, 제목 부분과, QR 생성기 부분으로 나눕니다.

QR 생성기에 입력 필드, QR 코드 생성 버튼, 그리고 QR 코드 표시 영역을 추가합니다.

// app/page.tsx

import QRGenerator from "@/components/QRGenerator";
import Title from "@/components/Title";

export default function Home() {
  return (
    <main>
      <Title />
      <QRGenerator />
    </main>
  );
}

입력 필드 생성

QR 코드에 들어갈 내용을 입력하기 위한 입력 필드를 구현합니다.

interface QRCodeInputProps {
  value: string;
  onChange: (value: string) => void;
}

const QRCodeInput = ({ value, onChange }: QRCodeInputProps) => {
  return (
    <input
      type="text"
      value={value}
      className="border w-full md:w-3/4 mx-auto px-4 rounded-lg text-lg mt-4"
      placeholder="Enter Text"
      onChange={(e) => onChange(e.target.value)}
      autoFocus
    />
  );
};

export default QRCodeInput;

QR 코드 생성

QR 코드 생성을 위해 react-qr-code 라이브러리를 사용하겠습니다.

이 라이브러리를 설치하고 QR 코드 생성 로직을 구현합니다.

npm install react-qr-code

"use client"; // useState 사용을 위해, client component 사용

import { useState } from "react";
import saveAs from "file-saver";
import QRCode from "react-qr-code";
import { motion } from "framer-motion";
import QRCodeInput from "./QRCodeInput";
import Button from "./Button";

const QRGenerator = () => {
  const [qrData, setQrData] = useState<string>("");
  const [isGenerated, setIsGenerated] = useState<boolean>(false);

  const handleInputChange = (value: string) => {
    setQrData(value);
    setIsGenerated(false);
  };

  const generateQRCode = () => {
    if (qrData) {
      setIsGenerated(true);
    }
  };

  return (
    <>
      <QRCodeInput value={qrData} onChange={handleInputChange} />
      <Button
        onClick={generateQRCode}
        disabled={qrData === ""}
        title="Generate QR Code"
      />
      {isGenerated && (
        <>
          <div className="border p-2">
            <QRCode value={qrData} />
          </div>
        </>
      )}
    </>
  );
};

export default QRGenerator;

QR 코드 저장

생성된 QR 코드를 이미지로 저장하기 위해 file-saver 라이브러리를 사용합니다. 이 라이브러리를 설치하고 QR 코드 저장 기능을 추가합니다. TypeScript 프로젝트이므로, @types/file-saver 도 필요합니다.

npm install file-saver @types/file-saver

import saveAs from "file-saver";  
// ...
const saveQRCode = () => {
    if (isGenerated) {
      const svgString = document.querySelector("svg")?.outerHTML;
      
      if (!svgString) return;

      const blob = new Blob([svgString], { type: "image/svg+xml" });
      saveAs(blob, "qrcode.svg");
    }
  };

// ...

※ 기능 추가

framer-motion을 추가하여, QR Code가 생성될 때, animation을 추가했습니다.

// ...          
<motion.div
      className="border p-2"
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      >
       <QRCode value={qrData} />
</motion.div>
// ...

완성된 QRGenerator 코드

"use client";

import { useState } from "react";
import saveAs from "file-saver";
import QRCode from "react-qr-code";
import { motion } from "framer-motion";
import QRCodeInput from "./QRCodeInput";
import Button from "./Button";

const QRGenerator = () => {
  const [qrData, setQrData] = useState<string>("");
  const [isGenerated, setIsGenerated] = useState<boolean>(false);

  const handleInputChange = (value: string) => {
    setQrData(value);
    setIsGenerated(false);
  };

  const generateQRCode = () => {
    if (qrData) {
      setIsGenerated(true);
    }
  };

  const saveQRCode = () => {
    if (isGenerated) {
      const svgString = document.querySelector("svg")?.outerHTML;
      
      if (!svgString) return;

      const blob = new Blob([svgString], { type: "image/svg+xml" });
      saveAs(blob, "qrcode.svg");
    }
  };

  return (
    <>
      <QRCodeInput value={qrData} onChange={handleInputChange} />
      <Button
        onClick={generateQRCode}
        disabled={qrData === ""}
        title="Generate QR Code"
      />
      {isGenerated && (
        <>
          <motion.div
            className="border p-2"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5 }}
          >
            <QRCode value={qrData} />
          </motion.div>
          <Button
            onClick={saveQRCode}
            disabled={!isGenerated}
            title="Save QR Code"
          />
        </>
      )}
    </>
  );
};

export default QRGenerator;

프로젝트 테스트

전체 소스 코드를 다운 받고 npm run dev 로 실행할 수도 있고,

아래 링크에서 직접 테스트도 가능합니다.

웹 애플리케이션을 실행하고 실제로 QR 코드를 생성하고 저장해보시기 바랍니다.

결론

이미 만들어진 QR Code 라이브러리를 활용해서, 쉽고 빠르게 QR Code 생성기를 만들어 볼 수 있었습니다.

※ 참고 1) 전체 소스 코드

※ 참고 2) 프로젝트 이름 배경

QRQuasar: QRQuasar는 강력한 QR 코드 생성 도구로, 빠른 속도와 높은 효율성을 특징으로 합니다. (ChatGPT)

긴 글 읽어주셔서 감사합니다. 👍

개요

목차

소개