170. (TWOK/LOGIC) [Web] 자바스크립트 setInterval 사용해 주기적 반복 타이머 동작 및 a 태그 파일 다운로드 (blob download) 백업 로직

---

[로직 정리]

​

정리 로직 : Web / JavaScript / a tag

​

상태 : [Web] 자바스크립트 setInterval 사용해 주기적 반복 타이머 동작 및 a 태그 파일 다운로드 (blob download) 백업 로직

​

 

---

[설 명]

​

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

1. 제 목 : [Web] 자바스크립트 setInterval 사용해 주기적 반복 타이머 동작 및 a 태그 파일 다운로드 (blob download) 백업 로직


2. 테스트 환경 : Web / JavaScript / Chrome


3 사전) a 태그 download 속성 설명 정리 : 

  >> <a> 태그 download 속성은 링크를 페이지로 이동 (navigate) 하지 않고 파일로 다운로드하도록 브라우저에 요청합니다

  >> 파일 다운로드 관련 우선 순위 :

    - 서버 응답 헤더 : Content-Disposition: attachment; filename="..." 포함

    - download 속성의 값 : <a download="원하는이름.ext"> 포함

    - URL에서 추정한 이름 : 예) .../file.pdf → file.pdf 사용

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






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

1. 자바스크립트에서 window.prompt 창을 활성화 한 후 주기적으로 백업할 단위를 사용자로부터 입력 받습니다.

  var input = window.prompt('\n' + '로그를 자동으로 저장할 주기 (분 단위) 를 입력해주세요. [로그 백업 파일은 PC 다운로드 폴더에 저장 됩니다]' + '\n\n' + 'ex : value = 30 은 30 분 마다 자동 구독 로그 저장' + '\n\n' + 'ex : value = 120 은 2시간 마다 자동 구독 로그 저장' + '\n');


2. 입력 된 값이 null 이 아닌 지 체크 수행 후 Number 타입으로 변환 합니다

  if (input != null && input != undefined && input != ""){
    const number = Number.parseInt(input);

    // ... 코드 계속 ...
  }


3. 변환 된 number 값을 사용해 setInterval 주기적 동작 타이머를 생성합니다

  // 주기적 동작 타이머 생성 코드
  var logTimer = setInterval(() => {

    // ... 코드 계속 ...

  }, (number * 60000) ); // ✅ 지정 시간 마다 체크 (분 단위 기준)


  // [참고] : 주기적 반복 타이머 동작 정지 코드 
  if (logTimer) {
    clearInterval(logTimer);
    logTimer = null;
  }


4. setInterval 주기적 동작 타이머 내에 a 태그를 사용해 지정된 시간 마다 현재 날짜 기준으로 log.txt 파일을 생성하도록 로직을 구현합니다

  var timeStamp = String(Date.now()); // 현재 날짜 및 시간 타임스탬프
  var date = dayjs(Number(timeStamp));
  var nowDate = date.format("YYYYMMDDHHmmss");

  const logContent = subscribeInput.value; // ✅ 로그 textarea 읽어온다

  if (logContent != null && logContent != undefined && logContent != ""){                                
    
    const blob = new Blob([logContent], { type: 'text/plain;charset=utf-8' }); // Blob 객체 생성
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'TWOK' + '_' + nowDate + '_' + 'Log_AutoSave.txt'; // 파일명
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    URL.revokeObjectURL(url);

    console.warn("백업 파일 저장 : ✅ : Success");

  } else {
    console.error("백업 파일 저장 : ❌ : 저장할 로그 파일이 없음"); 
  }

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






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

[new Blob 사용해 json 파일 , text 텍스트 파일 생성 실시]

https://kkh0977.tistory.com/980

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


[a 태그 download 사용해 캔버스 canvas 이미지 파일 저장 실시]

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


[Web/JavaScript] 자바스크립트 AWS STS 사용 Long 형식 S3 파일 다운 GetPreSignedUrl 프리사인 URL 주소 생성

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

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

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/980

93. (javascript/자바스크립트) new Blob 사용해 json 파일 , text 텍스트 파일 생성 실시

---