348. (TWOK/ERROR) [JavaScript] 자바스크립트 qrcode.js QR 생성 Uncaught Error: code length overflow 에러 발생

---

[환경 설정 및 설명]

​

프로그램 : Web / Chrome

​

설 명 : [JavaScript] 자바스크립트 qrcode.js QR 생성 Uncaught Error: code length overflow 에러 발생

​

 

---

[설 명]

 

--------------------------------------------------------------------------
[개발 및 테스트 환경]
--------------------------------------------------------------------------

- 제목 : [JavaScript] 자바스크립트 qrcode.js QR 생성 Uncaught Error: code length overflow 에러 발생


- 테스트 환경 : JavaScript / qrcode.js / QR


- 사전) 👉 qrcode.js 라이브러리 간략 설명 : 

  >> qrcode.js 는 QRCode.js라는 경량 자바스크립트 라이브러리를 CDN을 통해 불러오는 방식입니다

  >> qrcode.js 는 브라우저에서 QR 코드 생성을 매우 간단하게 해줍니다

  >> qrcode.js 는 브라우저 IE8 이상 대부분 지원합니다

  >> qrcode.js 는 MIT (상업적 사용 가능) 라이센스 이며, 크기가 매우 작고 가볍습니다

  >> 웹브라우저 CDN 의존성 설정 코드 : 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[에러 원인]
--------------------------------------------------------------------------

1. qrcode.js 라이브러리 사용해 QR 코드 생성 시 QR 코드에 넣으려는 데이터 길이가 기본 최대 용량을 초과하여 발생하는 이슈

  >> QR 코드 생성 시 URL 데이터를 사용하여 생성

  >> URL 길이가 너무 길어서 최대 용량을 초과하는 이슈 발생


2. 🟥 에러 발생 로그 전문 : 

  >> Uncaught Error: code length overflow. (1620>1056) 


3. 🟥 QR 생성 시 사용한 자바스크립트 소스 코드 : 

  const webUrl = "https:// ...... ";

  const container = document.getElementById('qrcode');

  new QRCode(container, {
    text: webUrl,
    width: 200,
    height: 200,
    colorDark: "#000000",
    colorLight: "#ffffff"    
  });

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[해결 방법]
--------------------------------------------------------------------------

1. qrcode.js 라이브러리 사용해 QR 코드 생성 시 error level 을 낮춰서 용량 사이즈를 최대로 허용할 수 있게 변경 수행


2. 🟦 qrcode.js error level 종류 : 

  >> L : ✅ 최대
  
  >> M : 보통
  
  >> Q : 적음
  
  >> H : ❌ 최소


3. 🟦 변경 된 자바스크립트 소스 코드 예시 : 

  const webUrl = "https:// ...... ";

  const container = document.getElementById('qrcode');

  new QRCode(container, {
    text: webUrl,
    width: 200,
    height: 200,
    colorDark: "#000000",
    colorLight: "#ffffff",

    correctLevel: QRCode.CorrectLevel.L  // ✅ 변경
  });

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[참고 사이트]
--------------------------------------------------------------------------

▶️ [Web/JavaScript] 자바스크립트 qrcode.js 라이브러리 사용해 옵션 지정 QR Code 큐알 코드 생성 수행

https://kkh0977.tistory.com/8546

https://blog.naver.com/kkh0977/224133937308?trackingCode=blog_bloghome_searchlist


▶️ [자바스크립트 qrcode.js 라이브러리 사용해 커스텀 옵션 지정 간단 QR 코드 생성 수행]

https://kkh0977.tistory.com/8503

https://blog.naver.com/kkh0977/224112052912?trackingCode=blog_bloghome_searchlist


▶️ [참고 사이트] [온라인] QR 코드 생성 사이트

https://kkh0977.tistory.com/4240

https://blog.naver.com/kkh0977/223112864218?trackingCode=blog_bloghome_searchlist

--------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8546

180. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 qrcode.js 라이브러리 사용해 옵션 지정 QR Code 큐알 코드 생

---