[JavaScript] (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) - 클로저(7)

 

7.  (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고)

 

지난 6개의 포스팅에 걸쳐 클로저에 대해 깊게 이해해 보는 시간을 가졌습니다. 특히 지난 포스팅에서는 클로저 사용 시 주의할 점도 살펴보았는데요. 만약, 예상치 못한 성능이슈가 발생한다면 어떤 방법으로 디버깅할 수 있을까요? 

이번 포스팅에서는 feconf 2023 토스플레이스 세션 메모리 누수 디버깅 가이드를 듣고 적용해본 경험을 공유합니다. 

* 간단히 다룰 포스팅이기 때문에 자세한 설명은 링크로 첨부된 세션을 직접 보시는 것을 권장합니다.

 

 

---

목차

1. 자바스크립트에서 함수는 “값"이다.
2. 고차함수
3. 클로저의 이해
4. 클로저와 메모이제이션
5. 리액트에서의 클로저
6. 클로저 사용 시 주의할 점
7. (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고)

 

---

 

 

간단하게 MemoryLeakWxample 이라는 컴포넌트에서 의도적으로 메모리 누수 상황을 발생시켜 보았습니다. 버튼을 클릭하면 handleDataClick함수에서 데이터가 n번만큼 추가되는 아이템이 생성되고 dataLeak이라는 내부 함수를 통해 데이터를 계속 참조시켜 보았습니다. 

 

Chrome DevTools의 Memory 탭을 활용하여 메모리 누수 디버깅을 진행하였습니다. 버튼을 클릭할 때마다 파란 막대가 가득 찬 모습을 보실 수 있습니다. 이는 데이터가 참조되고 있기 때문에 가비지 컬렉터에 수집되지 않은 것임을 의미합니다. 

---

 

누수가 되는 지점을 찾기 위해서는 좀 더 자세한 디버깅이 필요합니다. Shallow Size에 비해서 Retained가 매우 큰 값이 있다면 누수의 범인일 확률이 커집니다. 데이터 참조 지점을 파악하기 위해 클로저를 펼쳐보고, 누수가 발생하는 함수를 찾아봅니다.

 

 

 

---

 저는 간단한 코드라 그런지 쉽게 찾을 수 있었습니다. closure를 펼쳐보면 제가 만든 dataLeak을 바로 찾을 수 있었습니다. dataLeak은 버튼 클릭 함수가 호출될 때마다 내부적으로 state를 저장해 각각 다른 참조값을 가지고 있습니다. 이렇게 의미 없는 참조값들이 생겨 가비지 컬렉터가 수집할 수 없게 만드는 것은 좋은 코드가 아니게 되겠죠

 

이렇게 발생한 누수를 디버깅을 통해 찾아낸 후, 해당 함수를 수정하여 불필요한 참조값을 줄여줍니다. 의미 없는 참조값이 늘어나 가비지 컬렉터의 작동을 방해하지 않도록 주의해야 합니다. 

 

---

마무리 

 

이번 7개의 포스팅을 통해 클로저에 대한 심층적인 이해와 활용 방법, 그로 인한 메모리 누수에 대한 디버깅이 얼마나 중요한지를 알게 되었습니다. 실제 세션에서 얻은 경험을 기반으로 클로저를 적절히 활용하여 메모리 누수를 예방하고 해결하는 방법에 대해 자세히 살펴보았습니다. 첨부된 세션 자료를 더 자세히 확인하시길 권장합니다. 

 

이렇게 총 7개의 포스팅에 걸쳐 클로저에 대해 깊게 알아보는 시간을 가졌습니다. 앞에서도 언급한 바 있지만, 해당 자료는 이번 회사 내부 프런트엔드 에서 진행하는 세션에 참여하여 발표한 내용을 글로 정리한 것입니다. 

 

공부를 하며 저 역시 당연하게 생각했던 자바스크립트의 동작원리에 대해 다시 한번 살펴보게 되면서 저 역시도 얻은게 매우 많았습니다. 고차함수를 사용하면서도 별다른 궁금한 점, 의문 점도 품지 않고 사용했던 경험들이 프런트엔드 개발자로서 부끄러움을 느끼기도 했습니다. 

 

그래서 동료분들께도 당연하게 사용하던 실 예제를 통해 함수의 정의부터 고차함수의 개념까지 발표한 이유이기도 합니다.

 

이 글을 다 읽으신 여러분들도 클로저의 활용과 함정을 이해하여 코드의 품질을 더 향샹시키고, 예상치 못한 문제에 대한 대응력을 키우는 데 큰 도움이 되시길 바랍니다. 앞으로도 경험과 지식을 공유하며 팀원들과 협업을 통해 높은 수준의 웹 개발을 위해 노력하겠습니다. 감사합니다.  

 

 

---

 

Reference

• [에이콘]함수형 자바스크립트 입문 2/e - 안토 아라빈스 스리칸스 마치라주
• react-hooks-not-magic-just-arrays
• (번역) 훅을 사용할 때 주의할 점
• Can Swyx recreate React Hooks and useState in under 30 min?
• feconf 2023 토스플레이스 세션 메모리 누수 디버깅 가이드