175. (TWOK/LOGIC) [Web] 자바스크립트 img src 지정 및 fetch api 사용해 실제 네트워크 사용 가능 여부 상태 확인 로직 정리

---

[로직 정리]

​

정리 로직 : Web / JavaScript

​

상태 : [Web] 자바스크립트 img src 지정 및 fetch api 사용해 실제 네트워크 사용 가능 여부 상태 확인 로직 정리

​

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[사전) 설정 및 정보 확인 사항]
// --------------------------------------------------------------------------------------

1. 제 목 : [Web] 자바스크립트 img src 지정 및 fetch api 사용해 실제 네트워크 사용 가능 여부 상태 확인 로직 정리


2. 테스트 환경 : Web / JavaScript / img src / fetch api


3. 사전) 👉 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 설정 , 인증 토큰 추가
    - 스트림 기반 처리 지원 : 대용량 다운로드에도 효율적


4. 사전) 👉 await 간편 설명 : 

  >> await 는 Promise 가 끝날 때까지 기다리는 문법입니다.

    - Promise 는 미래에 완료될 작업의 결과값을 나타내는 객체입니다. (미래에 완료될 작업의 결과(성공/실패) 를 나타내는 객체)
    - pending → 대기중
    - fulfilled → 성공 (resolve 호출)
    - rejected → 실패 (reject 호출)

  >> await 는 async 함수 안에서만 사용 가능합니다.

// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[로직 설명]
// --------------------------------------------------------------------------------------

1. 웹 자바스크립트에서 동기 이벤트 방식으로 네트워크 연결 상태를 확인하므로 async 함수 생성 수행

  >> async function getConnectionSnapshot(type) {}

  >> ✅ type 파라미터 : 0 = fetch api 호출 방식으로 네트워크 연결 상태 확인 / 1 = img src 지정 방식으로 네트워크 연결 상태 확인

  >> ⚠️ 주의 사항 : 로컬 Html 파일에서 네트워크 연결 상태 체크 시 fetch api 는 cors 에러가 발생할 수 있으므로 img src 지정 방식으로 네트워크 연결 상태 확인 필요

  >> 현재 접속 된 브라우저 URL 주소 획득 코드 : window.location.href; (예시 : file:///C:/Users/twok/Desktop/testHtml.html)


2. fetch api 및 img src 지정 방식으로 네트워크 연결 상태 확인 감지를 위한 호출 URL 주소 배열 생성

  // ✅ [Http API 테스트 호출 위한 URL 배열 생성]
  // favicon 호출이 일반 페이지(예: https://www.google.com/) 호출보다 훨씬 더 빠릅니다.
  const apiArray = [            
    "https://www.google.com/favicon.ico",
    "https://www.amazon.com/favicon.ico",
    "https://www.microsoft.com/favicon.ico",
    "https://www.apple.com/favicon.ico",
    "https://www.youtube.com/favicon.ico",
    "https://www.cloudflare.com/favicon.ico",            
    "https://www.wikipedia.org/favicon.ico",            
    "https://www.naver.com/favicon.ico",
  ];


3. 네트워크 연결 상태 확인 타임 아웃 변수 선언 및 성공 , 실패 플래그 값 변수 선언

  const timeoutMs = 1000; // 1 초            
  var successFlag = false; // 인터넷 사용 가능 여부 체크 플래그


4. API 호출 방식 인 경우 로직 처리 : 

  // -------------------------------------------------
  // ✅ API 호출을 통해 실제 네트워크를 사용할 수 있는지 확인 : async await  
  // -------------------------------------------------
  const controller = new AbortController(); // 지정 된 시간이 지난 경우 타임 아웃 에러 발생을 위한 컨트롤러
  const timer = setTimeout(() => controller.abort(), timeoutMs);
              
  try {

    for (var i=0; i<apiArray.length; i++){ // URL 주소 배열 확인
      const url = apiArray[i];

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

        if (response.status !== undefined && response.status !== null && response.status >= 200 && response.status < 300){          
          successFlag = true; // 👌 api call success
        }

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

      if (successFlag == true){
        break; // for end
      }
    }

    console.warn('api call result : ', successFlag);

  } 
  catch(err){
    console.error('api call exception : ', err);
  }
  finally {
    clearTimeout(timer);
  }


5. img src 지정 방식 인 경우 로직 처리 : 

  // -------------------------------------------------
  // ✅ 이미지 호출을 통해 실제 네트워크를 사용할 수 있는지 확인 : async await  
  // -------------------------------------------------
  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  try {

    for (var i=0; i<apiArray.length; i++){ // URL 주소 배열 확인
      const url = apiArray[i];

      const timestampUrl = url + (url.includes('?') ? '&' : '?') + '_=' + Date.now()

      const img = new Image(); // 이미지 객체 생성
      
      img.onload = () => { console.log(`Img : ${timestampUrl} / Load : Success`); successFlag = true; }; // 👌 set src success
      img.onerror = () => { console.error(`Img : ${timestampUrl} / Load : Error`); }; // 이벤트 등록

      img.src = timestampUrl; // 이미지 로드 수행

      await sleep(timeoutMs); // 지정 된 시간 대기
      
      URL.revokeObjectURL(timestampUrl); // 곧바로 무효화 → 로딩 실패 유도

      if (successFlag == true){
        break; // for end
      }
    }

    console.warn('img call result : ', successFlag);

  } 
  catch(err){
    console.error('img call exception : ', err);
  }

// --------------------------------------------------------------------------------------






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

[자바스크립트 navigator.connection 네트워크 품질 확인 및 img.src , fetch api 호출로 실제 네트워크 사용 가능 확인]

https://kkh0977.tistory.com/8675

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


[간단 소스] 자바스크립트 async await 사용해 new Promise 순차 대기 sleep 일정 시간 대기 동작 코드 작성

https://kkh0977.tistory.com/8667

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


[간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage 메시지 전달 수행

https://kkh0977.tistory.com/8668

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

// --------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8675

505. (javaScript) 자바스크립트 navigator.connection 네트워크 품질 확인 및 img.src , fetch api 호출로 실제

---