투케이2K

542. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 qrcode 라이브러리 사용해 QR 코드 표시 팝업창 생성 수행 본문

JavaScript

542. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 qrcode 라이브러리 사용해 QR 코드 표시 팝업창 생성 수행

투케이2K 2026. 5. 29. 19:49
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / sweetAlert / qrcode 


- 사전) 👉 SweetAlert 라이브러리 간략 설명 :  

  >> SweetAlert 는 👉 기존 alert(), confirm(), prompt()를 대체하기 위해 만들어진 JavaScript 기반 경고창(팝업) UI 라이브러리입니다.

  >> SweetAlert 장점 설명 : 

    - 디자인이 훨씬 이쁨
    - 버튼 커스터마이징 가능
    - HTML 요소 삽입 가능
    - Promise 기반 처리 가능

  >> SweetAlert 이 제공하는 타입 설명 : 
          
    - "success" : 성공
    - "error" : 에러
    - "warning" : 경고
    - "info" : 정보


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

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

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

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

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

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





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

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






    <!-- [자바스크립트 코드 지정] -->
    <script type="module"> 

      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // --------------------------------------
          // ✅ QR 코드 데이터 생성
          // --------------------------------------
          const qrCodeData = "hello twok";


          // --------------------------------------
          // ✅ sweetAlert 팝업창 생성 수행
          // --------------------------------------
          swal({
            title: "QR 코드",
            text: "",
            content: {
              element: "div",
              attributes: {
                id: "qrcode", // 👉 동적 div 생성 위함

                // 👉 QR 코드를 팝업창 중앙 배치 설정
                style: `
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        padding:0px;
                      `
              }
            },
            button: "닫 기"
          });         


          // --------------------------------------
          // ✅ 팝업 렌더링 이후 실행 (핵심!)
          // --------------------------------------          
          setTimeout(() => {
            const container = document.getElementById('qrcode');

            if (!container) return;

            // 중복 방지
            container.innerHTML = "";

            var qrSize = 300;
            
            new QRCode(container, {
              text: qrCodeData,

              width: qrSize,
              height: qrSize,

              colorDark: "#000000",
              colorLight: "#ffffff",

              correctLevel: QRCode.CorrectLevel.L  // ✅ 변경 : 최대 QR 생성 용량 길이 증가
            });

          }, 0);

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [자바스크립트 SweetAlert 라이브러리 사용해 input 입력 받기 팝업창 생성 - prompt , text , number , password]

https://kkh0977.tistory.com/8788

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


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 팝업창 활성 시 확인 및 취소 버튼 외 동적 버튼 추가 생성 , 팝업창 자동 닫힘 방지 수행]

https://kkh0977.tistory.com/8784

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


▶️ [자바스크립트 SweetAlert 라이브러리 사용해 메뉴 리스트 표시 및 메뉴 선택 팝업창 생성 수행 - radio list alert]

https://kkh0977.tistory.com/8783

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


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

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정  (0) 2026.05.28
540. (javaScript) [간단 소스] 자바스크립트 Proxy 사용해 콘솔 로그 출력 막기 수행 - console log, debug, info, warn, error  (0) 2026.05.28
539. (javaScript) [간단 소스] 자바스크립트 ms-powerpoint 스키마 호출을 통해 파워포인트 앱 실행 및 파일 열기 수행 - open scheme file  (0) 2026.05.27
538. (javaScript) [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser  (0) 2026.05.23
537. (javaScript) [간단 소스] 자바스크립트 파일 데이터 fetch get 방식 호출 및 응답 파일 내용 읽기 , window.open 동적 html 팝업창 표시  (0) 2026.05.21
'JavaScript' Related Articles more
Comments