일렉트론 자동 새로고침(Eletron reload) :: 마이구미

이 글은 일렉트론에서 소스 변경시 새로고침에 대한 기능을 다뤄본다.

이 기능은 소스를 변경했을 때, 다시 실행할 필요없이 자동으로 리로드를 하게 한다.

그로 인해 개발 환경 개선에 도움을 주게 된다.

일렉트론 환경에서 자동 리로드 기능을 원한다면, 읽어보길 바란다.

Electron-reload - https://github.com/hotehrud/electron-reload

현재 프론트쪽에서 핫 리로드(hot-reload) 라는 기능이 이용되고 있다.

핫 리로드는 페이지에 대한 단순히 새로고침이 아니라 수정된 관련 인스턴스만 반응하게 된다.

그로 인해 다른 영역은 상태를 보존할 수 있게 되어 개발 환경에 많은 도움을 준다.

이 기능은 관련 cli 프로젝트를 가져온다면 바로 사용할 수 있다.

이 글에서는 핫 리로드가 아닌 단순한 리로드가 된다.

단순한 리로드만으로도 충분할 수 있다면, 사용해도 크게 개선될 것이다.

리로드 기능을 사용하지 않는다면, 개발 환경은 다음과 같이 아마 사용하고 있을 것이다.

webpack watch + 새로고침(reload) or 일렉트론 재실행

코드 변경시 watch 를 통해 자동으로 bundle 파일이 다시 만들어질테니 그것을 적용하기 위해 리로드 또는 일렉트론을 재실행할 것이다.

webpack 을 사용하지 않더라도, 위와 같은 행위를 할 것이다.

위와 같이 새로고침 또는 재실행 행위를 없애는 것이 이 기능의 목적이다.

관련 내용은 Github 문서를 통해 충분히 이해할 것이다.

조금 더 이해를 돕기 위한 설명은 다음과 같다.

우리는 코드를 변경하면, 자동으로 새로고침을 원한다.

이것을 구현한다면, 다음과 같이 표현할 수 있다.

코드 변화에 반응하고, 반응을 일렉트론의 메인 프로세스에 요청하게 된다.

메인 프로세스는 받은 요청을 통해 리로드를 처리하게 된다.

흐름을 이해하기에는 어려움이 없고, 위 방식대로 그대로 구현하면 된다.

구현을 위해 webpack 과 udp 를 사용했다.

코드 변화 - Webpack watch
변화를 일렉트론에 알리기 위한 통신 수단 - UDP

이것만으로도 Github의 기술 문서를 이해하는데 큰 어려움이 없다.

참고하거나 그대로 사용해도 무방하다.

이해했다면, 일렉트론을 통한 리로드이기 때문에, 일렉트론에서 Vue.js, React, Angluar 어떠한 것을 쓰더라도 상관없다는 것을 알 수 있다.

Electron-reload - https://github.com/hotehrud/electron-reload