투케이2K

558. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 JSON Pretty 정렬 출력 팝업창 생성 및 클립보드 내용 복사 기능 수행 본문

JavaScript

558. (javaScript) 자바스크립트 SweetAlert 라이브러리 사용해 JSON Pretty 정렬 출력 팝업창 생성 및 클립보드 내용 복사 기능 수행

투케이2K 2026. 6. 22. 21:50
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / SweetAlert / Alert


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

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

  >> SweetAlert 장점 설명 : 

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

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

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





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

<!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;
      } 


      /* footer를 flex 컨테이너로 */
      .swal-footer {
        display: flex;
        align-items: center;
      }


      /* 버튼 간 간격 */
      .swal-footer .swal-button {
        margin-left: 8px;
      }


      /* preview 버튼 색상 (선택) */
      .btn-preview {
        background-color: #6f42c1;
        color: #fff;
      }


      /* JSON 정렬 에딧터 */
      .json-viewer {
        text-align: left;
        background: #1e1e1e;
        color: #fff;
        padding: 15px;
        border-radius: 8px;
        font-size: 16px;
        line-height: 1.5;
        max-height: 400px;
        overflow: auto;
        font-family: Consolas, monospace;
      }

    </style>





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

    <!-- [SweetAlert 라이브러리] -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>






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


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

        try {

          // ------------------------------------------------------
          // 🟦 [SweetAlert 기본 설명 정리]
          // ------------------------------------------------------
          // 1. SweetAlert 는 👉 기존 alert(), confirm(), prompt()를 대체하기 위해 만들어진 JavaScript 기반 경고창(팝업) UI 라이브러리입니다.
          // ------------------------------------------------------
          // 2. SweetAlert 장점 설명 : 
          // 
          // >> 디자인이 훨씬 이쁨
          // >> 버튼 커스터마이징 가능
          // >> HTML 요소 삽입 가능
          // >> Promise 기반 처리 가능
          // ------------------------------------------------------
          // 3. SweetAlert 이 제공하는 타입 설명 : 
          // 
          // "success" : 성공
          // "error" : 에러
          // "warning" : 경고
          // "info" : 정보
          // ------------------------------------------------------

          
          // 팝업창 호출 수행
          openAlertPopup();     

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

        }

      };







      function openAlertPopup() {
        console.log('openAlertPopup : start');
        
        try {

          // -------------------------------------------------
          // alert 팝업창에 표시 될 title 및 content 지정
          // -------------------------------------------------
          const title = "JSON 표시 팝업창";

          const jsonData = {name: "투케이", addr:"seoul"};

          const pre = document.createElement('pre');
          pre.className = 'json-viewer';

          //pre.textContent = JSON.stringify(JSON.parse(jsonData), null, 2); // String 데이터 인 경우
          pre.textContent = JSON.stringify(jsonData, null, 2); // Object 데이터 인 경우

          
          // -------------------------------------------------
          // alert 팝업창 표시 수행
          // -------------------------------------------------

          swal({
            title: title,
            content: pre,
            closeOnClickOutside: false, // 외부 클릭 ❌
            closeOnEsc: false, // ESC ❌
            buttons: {              
              preview_1: { // 추가 버튼 생성
                text: "복사",
                value: "preview_1",
                className: "btn-preview" // ✅ 동적 스타일 지정 클래스 명칭
              },              
              confirm: { // 기본 확인 버튼
                text: "확인",
                value: "confirm",
                visible: true   // ✅ 확인 버튼 표시 설정
              }
            },
          }).then(async (btnClick) => { // ✅ 버튼 클릭 이벤트 확인 : async 지정
            
            switch (btnClick) {              
              case "preview_1":
                console.log('preview_1 : 클립 보드 복사를 선택했습니다.');
                
                try {
                  await navigator.clipboard.writeText(pre.textContent);
                  
                  swal("알 림", "복사 성공", "info"); // 간단 팝업 표시
                } catch (err) {
                  swal("알 림", "복사 실패", "error"); // 간단 팝업 표시
                }
               
                break;
              default:
                console.log('confirm : 확인을 선택했습니다.');                
            }

          });

          
          // -------------------------------------------------
          // ✅ SweetAlert 렌더링 후 실행
          // -------------------------------------------------
          setTimeout(() => {            
            const previewBtns = document.querySelectorAll(".btn-preview");
            if (previewBtns.length === 0) return;
          
            // ✅ 마지막 "보기" 버튼의 컨테이너만 밀어냄
            const lastPreviewBtn = previewBtns[previewBtns.length - 1];
            lastPreviewBtn.parentElement.style.marginRight = "auto";

            console.log('btn-preview : style setting');
          }, 0);


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

      };


    </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


▶️ [sweet alert 라이브러리 사용해 커스텀 팝업창 표시 실시]

https://kkh0977.tistory.com/929

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


▶️ [sweet alert 라이브러리 사용해 커스텀 팝업창 표시 및 css width 사이즈 조절]

https://kkh0977.tistory.com/951

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


▶️ [toastr js 라이브러리 사용해 토스트 알림 메시지 표시 실시]

https://kkh0977.tistory.com/981

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

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

[화면 출력]

​

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

'JavaScript' 카테고리의 다른 글

557. (javaScript) [유틸 파일] common_json_validate_check - 자바스크립트 typeof 사용해 null 및 json 형식 여부 유효성 확인 수행  (0) 2026.06.20
556. (javaScript) 자바스크립트 marked 라이브러리 Markdown md 파일 형식 HTML 로 변환 출력 수행 - Markdown 문자열을 HTML로 파싱  (0) 2026.06.17
555. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 Certificate , PrivateKey 인증성 생성 수행  (0) 2026.06.16
554. (javaScript) 자바스크립트 node-forge 라이브러리 사용해 X.509 인증서 Certificate , PrivateKey 키 쌍 일치 여부 확인  (0) 2026.06.15
553. (javaScript) [간단 소스] 자바스크립트 실무 에러 발생 및 크래시 감지 이벤트 리스너 등록 - error , unhandledrejection , console  (0) 2026.06.14
'JavaScript' Related Articles more
Comments