225. (TWOK/WORK) [개선 요청] 웹 브라우저 QR 코드 생성 시 긴 데이터 Long Data 도 QR 코드를 생성할 수 있게 해달라는 수정 요청 - qrcode.js

---

[제 목]

​

주제 : 투케이2K 업무 정리

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [개선 요청] 웹 브라우저 QR 코드 생성 시 긴 데이터 Long Data 도 QR 코드를 생성할 수 있게 해달라는 수정 요청 - qrcode.js

​

 

---

[내 용]

​

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

- 제 목 : [개선 요청] 웹 브라우저 QR 코드 생성 시 긴 데이터 Long Data 도 QR 코드를 생성할 수 있게 해달라는 수정 요청 - qrcode.js


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


- 사전) 👉 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. 🟥 기존 짧은 형식 Short QR 데이터 생성을 지원하는 기능에서 긴 형식 Long QR 데이터도 추가로 생성할 수 있게해달라는 문의


2. 🟥 현재 사용되는 라이브러리는 웹 브라우저에서 qrcode.js 라이브러리를 사용해 QR 코드를 생성하고 있는 상태

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





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 🟥 웹 브라우저에서 qrcode.js 라이브러리를 사용해 Long QR 코드 생성 수행


2. 🟥 자바스크립트 로그에서 Uncaught Error: code length overflow. (1620>1056) 에러가 발생하며 QR 코드가 생성 되지 않는 것 확인

  >> QR 코드에 넣으려는 데이터 길이가 기본 최대 용량을 초과하여 발생하는 이슈

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






------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. 🟦 웹 브라우저에서 qrcode.js 라이브러리 사용해 QR 코드 생성 시 error level 을 최대 허용으로 변경해 Long QR 생성 가능하게 소스 코드 변경


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

  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  // ✅ 변경
  });


3. 🟦 qrcode.js error level 종류 : 

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

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





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

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

https://kkh0977.tistory.com/8866

https://blog.naver.com/kkh0977/224300336393


▶️ [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/8866

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

---