Intro 🌼
오랜만에 블로그에 글을 남긴다.
1년동안 프런트엔드 개발자로 치열?하게 일하다보니, 핑계지만... 글을 쓸 여유가 없었다.
앞으로는 이렇게 꾸준하게 글을 남겨야 겠다.
Electron 메모리 누수 💥
지금 회사에서 React와 Electron을 이용해서 키오스크를 개발하였다.
물론, 떠나간 울 사수와 같이...(보고싶다...)
사실 Electron은 어렵지 않게 개발할 수 있다. 공식문서도 잘되어 있고, 커뮤니티도 활성화가 잘 되어 있기 때문에,
기능을 구현함에 있어서, 어렵지는 않은데...
Electron으로 개발하면서 가장 큰 문제는 메모리 누수였다.
물론 키오스크의 메모리를 8gb만 해줘도,사실 크게 문제는 없는데...
시장 상황과 점주분들의 지갑을 생각하면, 그것마저도 어려운게 현실이다.
메모리 누수가 나타나는 현상들이 있는데, 내가 겪어본 바로는
- 백화현상
- 소리가 깨지거나 느려지는 현상
등이 있었던 거 같다.
처음에는 키오스크를 빠르게 하겠다고, useCallback, useMemo를 막 사용했었는데, 혹 React를 이용해서 개발하고 있다면, 충분한 검토를 한 뒤 사용해야함을 명심했으면 좋겠다. 메모리 누수가 있는 상태에서 저것들을 사용하게 된다면... 크나큰 재앙을 얻을지도...
Electron 메모리 누수 해결과정 🧐
사실 이 부분은 케이스가 워낙 다양해서... 찾기가 쉽지 않을 수 있는데, 나 같은 경우에는 react-router의 useLocation을 이용할 때, 메모리 누수가 발생한다는 것을 알게되었다. 이게 알면 쉽지, 막상 왜 발생하는지 모르고 있으면... 아... 그 답답함은.. 정말...
결론
Electron을 1년동안 붙잡고 있었고, 지금도 붙잡고 있는 상황이지만...
회사에서는 안정성을 위해서 C++로 다시 개발을 해야하는거 아닌가... 깊은 고민을 하고 있는 상황이다.
다행히도... 메모리 누수를 잡아서... 잠시 보류 상태이지만...
React 와 Electron 으로 키오스크를 개발중에 있다면, react-router를 잘 살펴보시길 바란다. 또한 전역 상태관리는 될 수 있으면 하지 않는 걸 추천한다. 메모리 누수가 발생할 수 있는 여건? 자체를 만들지 않는게 좋은 듯 하다.
자바스크립트는 직접 메모리를 KILL 할 수 없다보니...
