JavaScript로 QR코드 생성
JavaScript는 웹 개발에서 가장 인기 있는 언어입니다. qrcode.js 또는 qr-code-styling과 같은 라이브러리를 사용하여 브라우저나 Node.js에서 QR코드를 생성하거나, QRCode.fun API를 호출하여 고급 스타일링을 적용하세요.
설치
선호하는 패키지 매니저를 사용하여 인기 있는 JavaScript QR코드 라이브러리를 설치하세요.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingJavaScript 라이브러리로 QR코드 생성
인기 있는 JavaScript QR코드 라이브러리를 사용하여 프로젝트에서 QR코드를 생성하는 코드 예제입니다.
Basic QR Code (Node.js)
const QRCode = require('qrcode')
// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)
// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
width: 300,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Browser Canvas Rendering
import QRCode from 'qrcode'
const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
width: 256,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://qrcode.fun',
image: '/logo.png',
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })JavaScript에서 API로 QR코드 생성
QRCode.fun API를 사용하여 JavaScript 애플리케이션에서 커스텀 색상, 모양, 로고가 포함된 스타일 QR코드를 생성하세요.
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
data: 'https://qrcode.fun',
width: 300,
height: 300,
type: 'png',
margin: 10,
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
})
const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)QR코드 라이브 미리보기
지금 바로 JavaScript로 QR코드를 생성해 보세요.
네이티브 라이브러리 vs API
JavaScript QR코드 라이브러리 직접 사용과 QRCode.fun API 비교.
| 기능 | 네이티브 라이브러리 | QRCode.fun API |
|---|---|---|
| 설정 복잡도 | 패키지 설치, 번들러 설정 | 단일 HTTP 요청 |
| 커스터마이징 | 라이브러리에 따라 다름 | 전체 스타일링: 색상, 모양, 로고 |
| 오프라인 지원 | 예 | 인터넷 필요 |
| 유지보수 | 수동으로 의존성 업데이트 | 항상 최신 상태 |
| 출력 형식 | PNG, SVG (라이브러리에 따라 다름) | PNG, SVG |
JavaScript QR코드 사용 사례
JavaScript 개발자가 QR코드를 생성하는 일반적인 시나리오.
웹 애플리케이션
React, Vue, Angular 또는 바닐라 JS 웹 앱에서 링크 공유, 결제, 인증을 위해 QR코드를 동적으로 생성합니다.
Node.js 백엔드
송장, 티켓, 배송 라벨, 자동 이메일 첨부를 위해 서버 사이드에서 QR코드를 생성합니다.
프로그레시브 웹 앱
PWA에 QR코드 생성 기능을 추가하여 오프라인 지원 모바일 경험과 스캔 가능한 코드를 구현합니다.
브라우저 확장 프로그램
현재 페이지 URL이나 선택한 텍스트에 대한 QR코드를 생성하는 Chrome 또는 Firefox 확장 프로그램을 구축합니다.
JavaScript QR코드 생태계 심층 분석
JavaScript는 모든 언어 중 가장 풍부한 QR코드 생태계를 보유하고 있으며, 브라우저, 서버, 하이브리드 환경을 아우릅니다.
React, Vue, Angular 통합
최신 프론트엔드 프레임워크에는 각각 전용 QR코드 래퍼 컴포넌트가 있습니다. react-qr-code는 SVG 렌더링을 지원하는 선언적 React 컴포넌트를 제공합니다. vue-qrcode는 반응형 데이터 바인딩을 지원하는 Vue 3 컴포저블을 제공합니다. Angular에서는 angularx-qrcode가 QR코드 생성을 디렉티브로 래핑합니다.
서버 사이드 렌더링(SSR)과 Next.js
Next.js, Nuxt 또는 기타 SSR 프레임워크를 사용할 때, QR코드 생성은 서버 사이드 렌더링 시 또는 클라이언트 사이드 hydration 후에 수행할 수 있습니다. 서버 사이드 생성은 정적 SVG 문자열을 생성하여 SEO에 적합합니다. 클라이언트 사이드 생성은 인터랙티브 커스터마이징을 가능하게 합니다.
npm 생태계와 번들 크기 고려사항
JavaScript QR코드 생태계는 다양한 번들 크기 트레이드오프를 가진 라이브러리를 제공합니다. qrcode는 약 33KB, qr-code-styling은 약 65KB, qrcode-generator는 10KB 미만입니다. 선택 시 번들 크기 예산을 고려하세요.
자주 묻는 질문
JavaScript로 QR코드 생성에 관한 일반적인 질문.