회사내 프로젝트중 angular16을 사용하며 ag grid를 통해 데이터를 주기적으로 모니터링 할 수 있는 화면이 있었다.. 어느날 고객사에서 문의 요청이 왔다..
화면을 몇일 띄워놓으면 화면이 다운됩니다...
이 말을 듣고 특정 ag grid를 사용한 화면에서, 그리고 주기적으로 데이터를 갱신시켜주는 로직이 있는 화면에서 발생하는 공통점을 찾았고 이제 ag grid의 문제라는 것을 인식했다.
<원인 분석>
개발자 모드를 통해 메모리 누수를 분석하기 시작했고..
처음 메모리 누수 관련 이슈를 다뤄보는 것이라 이곳 저곳 찾아본결과 메모리 탭의 '힙 스냅샨', '타임라인 할당' 등을 통해 화면에서 시간이 지나면서 내부적으로 어떤 변화가 있었는지 차이점을 찾아보았다. 또한 성능 탭에서 프로파일링을 하면서 힙, listener등 타임라인에 따라 어떤 변화가있는지도..
처음에는 개발자모드에서 제공하는것들에 대한 공부가 많이 되어있지않아.. 누수의 원인이 될 수 있는 많은 데이터를 보고도 인지하기 어려웠다.
여러 노가다와 검색 끝에 "Detached " 관련 문구가 들어왔고 트리를 타고 보니 ag grid에서 사용하는 것으로 보이는 문구들이 보이기 시작했다.
그리고 grid내부의 rendererComponent의 html들이 여전히 남아있는 것이 보였고 해당 컴포넌트들이 다시 그려질때마다 완전히 초기화가 되지 않는다고 생각했다.
< 해결 방안 #1 > .. 실패
rendererComponent의 생명주기에 따라 혹시라도 있을 누수 현상을 보기 위해 코드를 분석하였고, destroy 함수 및 혹여나 로직상 가비지 컬렉터에 걸리지 않는 코드를 확인 하였다.. 그리고 다시 테스트..
하지만 내가 생각했던것과 다른게 메모리 누수 현상은 그대로였고.. 멘붕이였다.
내가 생각한대로 rendererComponent는 생명주기에 따라 컨트롤이 되지 않았다.
찾아보니 이유는 ag grid는 외부 라이브러리기 때문에 angualr의 생명주기와 완전히 일치하게 돌아가지 않는다는것.. 왜 그렇게 만들어졌을까..
고민하다가 프로젝트에 설치된 ag grid라이브러리를 다시 한번 보게되었다.
아니.. angular 프레임워크 환경에서 ag grid를 사용하기 위해서는 "ag-grid-angular" 와 "ag-grid-community" 라이브러리를 사용해야한다.
이 둘은 서로 상호 호환이 되어야 문제없이 angular에서 ag grid를 사용할 수 있다고 한다. 보통은 둘다 같은 버전을 사용해야지 호환이 된다고 찾았다.
< 해결 방안 #2 > .. 실패
그리고 나는 머리 한대 맞은듯.. 아 버전이 다른다는것을 파악했다. 뭔가 실마리가 보였고 26버전대에 있는것을 28버전으로 서로 버전을 맞추고 난 후 다시 테스트 돌입.
문제는 해결되지 않았고 단순히 ag grid 라이브러리 버전을 맞춰서는 안되고 버전에 맞는 로직 및 옵션을 재 설정해야겠다고 생각했다.
기존에 legacy ag grid 로직을 엎었고, 해당 버전에서 사용하는 옵션, 변경사항들을 문서에서 찾아 분석했다. 그리고 ag grid를 다시 그릴떄 기존에 잡혀있던 메모리를 초기화시키는것이 초첨이 아니라 기존에 사용하던 것을 재사용해야한다는 생각이 들어 노선을 변경..!
< 해결 방안 #3 > .. 성공
grid를 재사용하기 위해서
1. immutableData(=deltaRowDataMode) 옵션 true 설정
28버전부터는 deltaRowDataMode 사용되지 않고 immutableData 옵션을 사용하도록 변경.
2. getRowId(=getRowNodeId) 사용
각 행의 고유 key를 설정하여 재사용되도록 28버전부터는 getRowNodeId사용되지 않고 getRowId옵션을 사용하도록 변경.
3. 재사용성이 중요한 grid인 경우 사용처 component에서 getRowNodeKey를 input으로 넣어주고 wrapper gird component에서 받아서 gridOptions.getRowId를 설정하도록 로직 변경.
이렇게 기존에 사용하던 ag grid의 wrapper component에 로직 수정을 하였고, 이에따라 wrapper component를 사용하던 다른 component에서도 unique한 데이터 key 값을 만들어주는 작업을 하였다.
- Renderer Component에서 실제 재사용이 가능하도록 로직 구현
render component를 grid에서 사용하는경우 해당 component에서 재사용이 가능하도록 로직 구현.
refresh 함수 오버라이딩하여 구현
< 최종 테스트 >
이제 메모리 누수가 일어나지 않고 지속적으로 모니터링이 가능한지 테스트하기 위해 브라우저 개발자모드에서 성능 프로파일링을 진행하였다.
기존에는 JS 힙 및 노드가 우상향 하는 그래프를 그려.. 시간이 자날수록 ag grid가 재사용하지못하여 메모리를 지속적으로 차지하는 현상이있었다.
드디어.. 테스트 결과
모두 일정항게 유지되는 모습..! 후.. 이렇게 몇일간 ag grid 관련 메모리 누수건을 분석하고 최종 개선까지 하게 되었습니다.
앞으로 어떤 라이브러리를 사용하든간에 사전에 충분히 숙지후 사용해야하고 버전이 달라지는 상황이 오면 그에 따른 사이드이펙트는 내 예상보다 항상 클 수 있다는 것을 느낀 순간이였습니다.
