
개요
QR Code 생성기를 구현하는 방법을 작성해보려 한다. Next.js와 TypeScript를 사용하여 Data
를 입력하고 생성 버튼을 클릭하면, QR 코드
가 생성되고, 생성된 QR 코드는 바로 다운로드할 수 있는 서비스이다.
QR 코드 소개
QR Code는 Quick Response Code의 약자로, 빠르고 쉽게 정보를 전달하는 데 사용되는 2차원 바코드다.
프로젝트 구현
-
프로젝트 생성
- 아래 명령어로
Next.js
프로젝트를 생성한다.
npx create-next-app@latest
- 아래 명령어로
-
패키지 설치
- 프로젝트 구현에 필요한 패키지를 설치한다.
npm install react-qr-code file-saver @types/file-saver framer-motion
-
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 코드에 들어갈 내용을 입력하기 위한 입력 필드를 구현한다.
QRCodeInput.tsx interface QRCodeInputProps { value: string; onChange: (value: string) => void; } const QRCodeInput = ({ value, onChange }: QRCodeInputProps) => { return ( <input type="text" value={value} className="mx-auto mt-4 w-full rounded-lg border px-4 text-lg md:w-3/4" placeholder="Enter Text" onChange={(e) => onChange(e.target.value)} autoFocus /> ); }; export default QRCodeInput;
-
QR 코드 생성 컴포넌트 구현
- QR 코드 생성을 위해 react-qr-code 라이브러리를 사용해서 구현한다.
QRGenerator.tsx '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
라이브러리를 사용했다.
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'); } }; // ...
- 생성된 QR 코드를 이미지로 저장하기 위해
-
QR Code 생성될 때, 애니메이션 추가
- QR Code가 생성될 때,
framer-motion
을 사용하여 애니메이션을 추가했다.
// ... <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> // ...
- QR Code가 생성될 때,
-
완성된 QRGenerator 코드
-
위 내용이 모두 반영된 **최종 컴포넌트(QRGenerator)**의 코드다.
QRGenerator.tsx '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;
구현 결과
결론
이미 만들어진 QR Code 라이브러리를 활용해서, 쉽고 빠르게 QR Code 생성기를 만들어 볼 수 있었다.