[JavaScript] Progress / Memory Leak (메모리 누수)

<progress id="progress" value="0" max="100"></progress><br />
 <input id="btn" type="button" value="시작" /> <br />
  
    <script>
      let progress = document.getElementById("progress");
      let btn = document.getElementById("btn");
      //버튼을 누르면 progress의 value를 1초마다 10씩 증가
      btn.addEventListener("click", (e) => {
        let timer = setInterval(() => {
          progress.value += 10;
          console.log("작업중");
          if (progress.value == 100) {
            clearInterval(timer);
            // *memory leak 발생할 수 있기 때문에 100되면 스탑 걸어줘야함
          }
        }, 1000);
      });

 

 => 버튼을 누르면 0에서 시작해 10씩 증가해 100을 채우는 progess를 만들어 보았다.

progress는 진행률을 보여주고자 할 때 사용하는 요소로, 자바 스크립트를 이용해 제어할 수 있다.

 

* Memory leakㅣ 용도가 끝났는데도 작업을 계속 수행하고 있어서 메모리 낭비가 발생하는 것.

입출력 작업을 수행하거나 타이머 같은 자원을 사용할 때 주로 발생하며,

타이머는 사용이 끝나면 해제해주어야 하고 입출력 작업은 스트림을 닫아야한다.

 

끝나는 지점을 설정해놓지 않아도 코드 동작은 잘 하지만 

메모리 누수가 발생할 수 있다는 사실을 깨달았다.