QRCode.Fun QRCode.Fun
시작하기
JavaScript QR코드 라이브러리

JavaScript로 QR코드 생성

JavaScript는 웹 개발에서 가장 인기 있는 언어입니다. qrcode.js 또는 qr-code-styling과 같은 라이브러리를 사용하여 브라우저나 Node.js에서 QR코드를 생성하거나, QRCode.fun API를 호출하여 고급 스타일링을 적용하세요.

QR 생성기 사용해보기API 문서 보기

설치

선호하는 패키지 매니저를 사용하여 인기 있는 JavaScript QR코드 라이브러리를 설치하세요.

npm
npm install qrcode
yarn
yarn add qrcode
npm (styled)
npm install qr-code-styling

JavaScript 라이브러리로 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' })
QRCode.fun API

JavaScript에서 API로 QR코드 생성

QRCode.fun API를 사용하여 JavaScript 애플리케이션에서 커스텀 색상, 모양, 로고가 포함된 스타일 QR코드를 생성하세요.

JavaScript API 통합
// 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코드를 생성해 보세요.

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코드 생성에 관한 일반적인 질문.

가장 인기 있는 두 가지 옵션은 qrcode(경량, 간단한 QR코드에 적합)와 qr-code-styling(색상, 모양, 로고를 통한 고급 커스터마이징)입니다. 단순함을 원한다면 qrcode를, 디자인 유연성을 원한다면 qr-code-styling을 선택하세요.

JavaScript로 QR코드 생성 시작하기

무료 온라인 생성기로 빠르게 QR코드를 만들거나, API를 JavaScript 프로젝트에 통합하여 자동 생성을 구현하세요.

QR 생성기 열기API 문서 보기