(성능) JS도 GC 있는데 메모리 누수는 왜 생기나요? 어쩌다 새는 건지

SPA 하나 만들어서 돌리는데 오래 켜두면 탭이 점점 무거워지고 결국 버벅여요. 크롬 작업관리자로 보니까 이 탭 메모리가 계속 우상향으로 올라가더라고요. 새로고침하면 확 내려가고요.

제가 알기론 자바스크립트는 가비지 컬렉터가 알아서 안 쓰는 객체 치워준다고 배웠는데, 그럼 누수라는 게 애초에 생길 수가 없는 거 아닌가요? GC가 있는데 왜 메모리가 안 줄고 계속 쌓이는지 이해가 잘 안 돼요.

일단 의심 가는 코드는 이런 건데요.

function setup() {
  const box = document.querySelector('#box');
  window.addEventListener('resize', () => {
    box.style.height = window.innerHeight + 'px';
  });
}

이런 컴포넌트를 붙였다 뗐다 반복하는데, 뗄 때 리스너를 안 지웠거든요. 이게 문제가 될까요? box는 화면에서 지웠는데도 계속 메모리에 남아있는 느낌이에요.

궁금한 게, GC가 "안 쓰는" 걸 판단하는 기준이 정확히 뭔가요? 제 생각엔 화면에서 안 보이면 안 쓰는 거 같은데 GC 입장에선 아닌가 봐요. 그리고 setInterval이나 클로저, 전역 배열에 계속 push하는 것도 누수랑 관련 있다고 얼핏 들었는데 왜 그런지 원리가 궁금합니다. 어떤 상황에서 조심해야 하는지 정리 좀 부탁드려요.