Next Notion Blog Engine 중에 hero page에다가 인스타그램 스토리와 같은 이미지 및 비디오 플레이어를 만들었다. 이때 문제가 사이클이 반복될 수록 메모리가 계속 누적되어 브라우저가 감당하지 못할 정도가 되는 것이다. Arc browser를 사용하고 있는데 첫 사이클에는 1GB 정도의 메모리를 사용하는데 10번의 사이클이 지나면 대략 10GB의 메모리를 VTDecoderxPCService가 사용하게 된다.
여러 시도를 통해 누수를 해결하려고 했지만 개선되지 않았다. 그래서 개발자도구에서 메모리 누수를 검사해보기 위해 Chrome Incognito Tab에서 테스트해보니 놀랍게도 같은 코드인데도 문제가 발생하지 않는 것이다!
혹시 몰라 모든 Extension을 꺼봐도 문제가 발생하지 않음을 알게 되었다. 설치되어 있는 모든 extension을 껐다 키며 달라지는게 있는가 찾아봤다. 그 결과 React Developer Tools라는 extension이 문제임을 알게 됐다.
React Developer Tools은 React 개발시 모든 비디오 처리 과정을 기록해두기 때문에 메모리가 급증하게 되는 것이다.
1시간 동안 삽질을 했는데 알고보니 내쪽 문제는 아니었고 서드파티 문제였다. 나와 비슷한 문제를 겪고 있다면 우선 Incognito Tab에서 테스트를 먼저 해보길 추천한다.