투케이2K

537. (javaScript) [간단 소스] 자바스크립트 파일 데이터 fetch get 방식 호출 및 응답 파일 내용 읽기 , window.open 동적 html 팝업창 표시 본문

JavaScript

537. (javaScript) [간단 소스] 자바스크립트 파일 데이터 fetch get 방식 호출 및 응답 파일 내용 읽기 , window.open 동적 html 팝업창 표시

투케이2K 2026. 5. 21. 19:55
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / JavaScript / fetch / S3 / get / window.open


- 사전) 👉 Fetch API 간단 설명 :

  >> Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.

  >> Fetch API 는 브라우저에서 비동기 HTTP 요청을 수행할 수 있습니다.

    - 데이터를 서버에 요청(request) 하고 응답(response)을 받아 처리할 때 사용합니다.

  >> Fetch API 핵심 기능 : 

    - Promise 기반 : 비동기 처리가 쉽고 .then(), .catch() 또는 async/await로 직관적으로 코드를 작성할 수 있습니다.
    - JSON 처리 간편 : response.json()만 호출하면 비동기로 JSON 데이터 파싱 가능
    - 다양한 옵션 제공 : HTTP 메서드 (GET, POST, PUT, DELETE 등) , 헤더 설정 , 요청 바디(JSON, FormData 등) , CORS 설정 , 인증 토큰 추가
    - 스트림 기반 처리 지원 : 대용량 다운로드에도 효율적


- 사전) 👉 window.open 기능 간편 설명 : 

  >> window.open() 은 브라우저에서 새 창이나 새 탭을 열거나, 기존에 이름 붙인 창을 재사용할 때 사용하는 함수입니다

  >> window.open() 은 주로 외부 링크를 새 탭으로 열거나, 팝업(작은 창) 형태로 보조 UI를 띄울 때 사용됩니다

  >> window.open() target 주요 인자 값 : 

    - '_blank': 새 탭/창

    - '_self': 현재 창(일반 링크와 동일)

    - '_parent', '_top': 프레임/아이프레임 계층에 영향

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





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

// -----------------------------------------------------------------
// ✅ [HTTP 응답 데이터 읽기 관련 함수]
// -----------------------------------------------------------------
async function openHttpReadPopup(getUrl){
  console.warn("openHttpReadPopup : Start : ", getUrl);

  const w = window.screen.availWidth;    // 작업표시줄/독 등을 제외한 가용 너비
  const h = window.screen.availHeight;   // 가용 높이
  const features = [
    `width=${w}`,
    `height=${h}`,
    'left=0',
    'top=0',
    'toolbar=no',
    'menubar=no',
    'location=no',
    'status=no',
    'resizable=yes',
    'scrollbars=yes',
    'noopener',
    'noreferrer',
  ].join(',');
  
  try {

    if (getUrl !== null && getUrl !== undefined && getUrl != ''){

      // -----------------------------------------------------------
      // ✅ Get 방식 API 호출 수행 : 인코딩 깨짐 방지
      // -----------------------------------------------------------
      const timeoutMs = 60000; // 60 초 
      const controller = new AbortController();
      const timer = setTimeout(() => controller.abort(), timeoutMs);

      await fetch(getUrl, {
        method: "GET",
        signal: controller.signal,
        cache: "no-store",
      }).then( async (response) => {
        console.warn(`Response API : ${getUrl} / Status : ${response.status}`);

        clearTimeout(timer);

        if (response.status >= 200 && response.status < 300){

          // ✅ [텍스트 응답 확인]              
          try {                

            const text = await response.text();
            console.warn("Response Data : ", text);

            stopLoading();
            
            const html = `<!doctype html>
                    <html lang="ko" translate="no">
                    <head>
                    <meta charset="utf-8">
                    <meta name="google" content="notranslate">
                    <title>logFileData</title>                            
                    <style>
                        body {
                            background-color: #000;
                        }
                        h3 {
                            color: #fff;
                        }
                    </style>
                    </head>
                    <body>
                    <h3 style="white-space: pre-wrap; line-height: 1.35; margin: 0 0 12px 0;">${text}</h3>
                    </body>
                    </html>`;
                    
            const blob = new Blob([html], { type: 'text/html' });
            const url = URL.createObjectURL(blob);


            const popup = window.open(url, '_blank', features);
              
          }
          catch(err){
            console.error('❌ fetch response parsing exception : ', err);
          }
        }
        else {
          console.error("❌ openHttpReadPopup : Error : Get 방식 API 호출 파일 유효성 검증에 실패했습니다. 실제 파일 존재 여부를 확인해주세요.");
        }

      }).catch((error) => {
        console.error(`❌ Response API : ${getUrl} / Error : ${error.name}`);

        clearTimeout(timer);

      });

    }
    else {
      console.error("❌ openHttpReadPopup : Error : getUrl is null");
    }

  }
  catch (exception){
    console.error("❌ openHttpReadPopup : Exception : ", exception);
  }
};

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





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

▶️ [간단 소스] 자바스크립트 동적 스크립트 작성 및 window.open 시 window.opener.postMessage 부모에서 자식 데이터 전송

https://kkh0977.tistory.com/8733

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


▶️ [업무 이슈] 웹 페이지 window open 팝업창 열기 수행 시 크롬 브라우저 자동 번역 기능으로 인해 한글이 깨져 보이는 현상 이슈 문의

https://kkh0977.tistory.com/8832

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


▶️ [Web/JavaScript] 자바스크립트 window.open 팝업창 새창 열기 수행 시 브라우저 팝업 차단 권한 체크 코드

https://kkh0977.tistory.com/8670

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


▶️ [fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시간 대기 후 재요청 수행]

https://kkh0977.tistory.com/8653

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


▶️ [fetch (페치) Web API 사용해 async await 동기 방식 http 요청 및 response header 및 body 확인 실시]

https://kkh0977.tistory.com/3514

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

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

'JavaScript' 카테고리의 다른 글

539. (javaScript) [간단 소스] 자바스크립트 ms-powerpoint 스키마 호출을 통해 파워포인트 앱 실행 및 파일 열기 수행 - open scheme file  (0) 2026.05.27
538. (javaScript) [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser  (0) 2026.05.23
536. (javaScript) [간단 소스] 자바스크립트 AWS S3 텍스트 파일 프리사인 Url 생성 및 콘텐츠 inline 브라우저 표시 설정 - utf8 인코딩 적용  (0) 2026.05.21
535. (javaScript) [간단 소스] 자바스크립트 ms-word 스키마 호출을 통해 워드 앱 실행 및 파일 열기 수행 - open word scheme file  (0) 2026.05.20
534. (javaScript) [간단 소스] 자바스크립트 ms-excel 스키마 호출을 통해 엑셀 앱 실행 및 파일 열기 수행 - open excel scheme file  (0) 2026.05.20
'JavaScript' Related Articles more
Comments