[Front] JS heap, Listener, Node를 신경 쓴 메모리 누수 이야기

 

 

작성하게 된 계기

 

나는 서버 백엔드 개발자이다.

이번에 실무 개발을 하면서 유튜브의 쇼츠, 유튜브의 릴스처럼 짧은 영상을 넘기기(Swipe)를 하는 프론트단 기능구현을 하게 되었다.

 

웹 앱으로 만들게 되었고 웹, 갤럭시에서 봤을 때는 문제가 없었지만 특이하게 아이폰에서 기능 동작을 테스트하는데

몇 번 넘기기(Swipe)를 하고 나서 기능 작동 멈춤과 동시에 새로 고침도 안되는 먹통 현상이 일어 났다.

 

웹(Chrome) 에 와서 개발자 도구에 성능을 테스트 하게 되었는데 JS Heap, Node, Listener들이 떨이지지 않고 꾸준하게 올라가는 것을 볼 수 있었다.

아무리 무지한 사람이라도 "어?!, 이거 계속 올라가서 문제 있는 것 같은데?" 라고 생각한 그래프 였다.

 

그래서 어떤 형식으로 해결하게 되었는지 작성하려고 한다.

 

 

 

 

 

 

문제 상황

 

처음 개선하기 전 개발자도구의 성능을 보도록 하자

 

딱 봐도 메모리가 계속 올라서 아이폰에서 사파리가 먹통이 되었구나 라고 알 수 있었습니다.

 

 

 

 

 

문제 해결 (중간)

 

저는 Swiper.js를 사용하였고 그 라이브러리 안에 있는 이벤트를 사용하는데 그 이벤트를 제거 했고,

변수에 값을 담을 것들을 다 사용하고 참조를 해제 시켜 주었습니다.

 

아래와 같이 우선 참조 해제와 이벤트를 제거해주는 코드를 짜기 시작했습니다.

/** 이벤트 해제 */
let mySwiper = new Swiper('.swiper-container', {
	// Swiper 설정
});

// 이벤트 해제
mySwiper.off('transitionStart');
mySwiper.off('transitionEnd');

// 이벤트 등록
mySwiper.on('transitionStart', function () {
    console.log('트랜지션 시작');
    // 이하 로직~
});
mySwiper.on('transitionEnd', function () {
    console.log('슬라이드 변경됨');
    // 이하 로직~
});


// -=-=-=-=-=--=-===-=-=-=--=-=-=-=-=-=-=-=-=-=
/** 참조 해제 */
let index = 0;

// 로직 수행~

index = null;	// 참조 해제

 

 

조금 개선된 그래프

 

메모리는 사용했다가 반납하는 그래프가 나왔지만 

근본적인 원인인 메모리가 꾸준하게 상승중이다. 라는 것을 알고 꾸준히 찾을려고 노력하였습니다.

 

 

 

 

 

문제 해결 (결과)

 

참조 해제와 이벤트제거를 했지만 

나는 딱 하나를 간과한 것이 있었다.

 

유튜브의 쇼츠, 인스타의 릴스를 보면 영상을 컨트롤한다. 그리고 이번 기능을 하면서 나도 영상을 컨트롤하는 기능 개발인데,

Hls.js를 사용하여 영상 재생을 하였다.

 

그래서 이 영상을 재생하기 위해서는 아래와 같이 Hls객체를 생성해야했다.

let hls = new Hls();

 

이 객체를 생성하고 그냥 두었다는 것이다.

 

그래서 영상이 이제 안보이기 시작했을 때 이 해당 영상의 Hls 객체를 destroy() 해주었다.

 

 

완전 개선된 메모리 그래프

 

 

 

 

 

결론

 

Java도 어떻게 보면 자동으로 GC(Gabage Collect)가 처리해 주어 JS도 그럴거라고 생각했다.

그래서 인지 이것을 간과하고 시간을 많이 쓰게 되었다.....

 

Spring/JAVA 도 메모리를 신경 안쓰고 기능 구현 했을 때 엄청난 트래픽과 무거운 기능을 수행한다면 계속 메모리가 올라가다가 죽는 현상이 일어 날 것이다.  엔지니어, 개발자는 그것을 찾지 못하면 어딘가에 폭탄을 심어둔 느낌이라 처음부터 메모리 누수 안되게 개발해야 겠다는 생각이 들었다.

 

 

감사합니다.