일렉트론(Electron)의 아키텍쳐






일렉트론으로 데스크탑 앱을 개발하기 전에 일렉트론의 아키텍쳐에 대해 확실하게 알고 개발해야합니다. 만약 잘 모르는 상태에서 개발을 한다면 보안 문제와 여러 심각한 문제들이 발생할 수 있습니다. 지금부터 제가 일렉트론으로 개발을 해보면서 깨우친 일렉트론의 아키텍쳐에 대해 이야기하도록 하겠습니다.

일렉트론의 기본 아키텍쳐


일렉트론의 기본 아키텍쳐는 공식 웹사이트에서도 찾을 수 있듯이 메인 프로세스와 렌더러 프로세스로 나누어 집니다.

메인 프로세스

렌더러 프로세스와 시스템의 통신을 담당하는 프로세스입니다. 시스템 기능과 관련된 자바스크립트 모듈을 여기에 두어야 합니다.

렌더러 프로세스

실제로 사용자에게 보여지는 부분을 담당하는 프로세스입니다. GUI와 웹 앱이 이쪽에 포함되어야 합니다.

이는 매우 크게 보았을때 이야기이고 더 복잡한 시스템의 어플리케이션을 개발 할 수록 추가적인 프로세스가 존재한다고 생각하면 될 것 같습니다.

실제 개발에서 사용되는 일렉트론의 아키텍쳐

위에서 이야기하는 일렉트론 기본 아키텍쳐는 이미 존재하는 웹앱을 데스크탑앱으로 그대로 옮길때나 사용합니다. 만약 시스템과 여러 작업을 해야하는 데스크탑 앱을 개발하게 된다면 위의 아키텍쳐가 아닌 아래의 아키텍쳐로 일렉트론을 이해하고 개발해야합니다.


*위 이미지의 window는 웹 브라우저의 window 객체입니다.

위의 이미지를 보면 알 수 있듯이 렌더러 프로세스 내부에 더 이해해야하는 것들이 존재합니다.

preload.js

preload.js는 보안을 위해 메인 프로세스의 일렉트론 모듈로부터 ipcRenderer모듈을 미리 가져오는 것을 담당합니다. 이는 보안을 위해 반드시 사용되는 방식이며, preload.js 없이 개발을 한 앱들은 렌더러 프로세스에서 컴퓨터 시스템에 접근이 가능해집니다. 예를 들어서 네트워크 통신이 가능한 일렉트론 앱이 존재한다고 했을때, 해커가 렌더러 프로세스로 스크립트를 보내 시스템 해킹을 할 수가 있습니다. 이런 문제를 막기위해 일렉트론은 기본적으로 nodeIntegration: false;로 되어 있으니 절대 true로 변경하면 됩니다.

preload.js를 사용할 때 중요한 점이 있는데, preload.js를 GUI와 웹앱을 담당하는 html 파일에 포함시켜서는 안됩니다. preload.js를 메인 프로세스에서 사용하도록 설정을 하면, 렌더러 프로세스에 포함이 되기때문에 html 스크립트로 불러올 필요가 없고 렌더러 프로세스의 또 다른 내부 구조라고 생각하면 됩니다.

GUI & 웹 앱

이 내부 구조는 보여지는 부분과 웹앱의 기능을 담당합니다. javascript, css 그리고 html로 만들어야 하며, 프레임워크를 이용해 개발해도 됩니다. window 객체와 자바스크립트를 이용해 preload.js와 메세지 교환을 하는 것이 메인 프로세스와 통신을 하는 방법입니다.

글을 마치며

참고로 숙력된 일렉트론 개발자가 많이 없고 정보가 적다는 이유로 저는 일렉트론의 아키텍쳐를 배우기까지 시간이 꽤 걸렸습니다. 이 글을 읽는 개발자 분들은 저보다 쉽게 이해해서 개발을 했으면 좋겠습니다.


댓글 없음:

댓글 쓰기