게임을 좋아하는 나는 OPGG같은 데스크탑 앱을 만들고 싶었다.
그러던 중 찾게 된 게 일렉트론!
오늘은 일렉트론에 대한 조사를 정리해보려 한다.
참고 : https://tech.kakao.com/2021/08/17/frontend-growth-11/
일렉트론(Electron)이란?
JavaScript, HTML, CSS 로 데스크톱 애플리케이션을 만들 수있는 프레임 워크이다.
Electron 의 최대의 장점은 Desktop App 을 Javascript 만으로도 개발이 가능다는 점이다.
비슷한 예로 Javascript 로 Mobile App 개발이 가능한 React Native 가 있다.
백엔드로는 Node.js 런타임을, 프론트엔드로는 크로미엄을 사용한다. 일렉트론은 여러 저명한 오픈 소스 프로젝트를 뒷받침하는 주요 GUI 프레임워크이다.
웹 서비스의 코드 및 종속 항목을 설치하고 서비스를 실행하는 소프트웨어 스택
*크로미엄 이란?
크로미움 이라는 오픈소스 프로젝트에서 만든 브라우저 이름이 바로 크로미움이다.
구글에서 2008년 9월 시작한 프로젝트인 크로미움은 오픈소스 프로젝트 이기 때문에 구글 직원이 아닌 사람들도 참가할 수 있으며, 이 프로젝트를 통해 만들어진 소스코드에서 커파일 된 브라우저가 바로 크로미움이다.
크로미엄, 크로뮴 이라고 표기하여 사용하기도 한다.
대표적으로 아래와 같은 브라우저들이 크로미움을 기반으로 제작됩니다.
이미 많은 일렉트론의 사례들
내가 많이 사용하고 있던 모든 앱들이 일렉트론을 이용해서 만들어 졌다는 것이 인상적이며, 더 흥미를 느끼게 해주었다.
일렉트론의 장점
- Node 기반이기 때문에 npm 을 이용해서, 방대한 Javascript 오픈소스를 사용할 수 있다.
- 배포 시에는, Dependency 가 있는 Node Module 을 포함 시킬 수 있다.
- 웹으로 개발한 소스를 약간의 수정과정을 거치면 그대로 사용이 가능하며, 필요하다면, Javascript 개발자가 직접 Desktop App 개발을 시작하는 것도 어렵지 않다.
- 한 코드 베이스로 Window, Mac, Linux 프로그램 작업 및 배포가 가능하다.
일렉트론의 단점
- “hello would” 를 출력하는 간단한 앱이라도 거대한 Chromium, 여러 Node Moudle 등을 포함 하므로 100 MB 이상의 저장 공간이 필요하다.
- 다른 Native Code 로 만든 프로그램에 비해 속도와 메모리 측면에서도 가볍지는 않다.
일렉트론은 어떻게 동작할까?
일렉트론에는 두가지 프로세스가 존재한다.
메인(Main) 프로세스와 렌더러(Renderer) 프로세스이다.
일렉트론 앱은 단 하나의 메인 프로세스를 가진다. 메인 프로세스는 Node.js 기반으로 동작하며 메인 프로세스에서는 이러한 렌더러 프로세스들을 관리하고, 각각의 렌더러 프로세스는 서로 동립적으로 동작한다.
위에서 언급한 메인 프로세스(Node.js 서버)와 렌더러 프로세스(Chromium 브라우저) 간의 통신이 이뤄지는 데, 일렉트론에서는 이를 ipcMain과 ipcRenderer같은 IPC 모듈을 통해 프로세스 간의 통신을 이루고 있다.
*IPC(Inter-Process Communication)란?
프로세스(Process)는 프로그램이 구동될 때 주 메모리에 적재되며, 메모리 상에서 실행되는 작업의 단위를 말한다.
즉, 컴퓨터가 연속적으로 실행하고 있는 컴퓨터 프로그램을 뜻하며 작업(Task)와 같은 의미로 쓰인다.
컴퓨터 시스템에서 프로그램은 혼자 독자적으로 수행될 수도 있고, 각자 독립적 메모리 공간을 지니고 다른 프로세스들에 의해 침범당하지 않도록 보호되고 있다.
따라서 프로세스는 원래 독립적이지만, 상황에 따라 프로세스끼리 협력해야 되는 경우가 발생한다.
이때 프로세스간 자원과 데이터를 공유할 수 있어야 하는데, 서로간의 통신을 위해 별도의 매커니즘이 필요하고, IPC라는 설비를 이용해 프로세스간 통신을 할 수 있게 된다.
*IPC가 필요한 이유
✔ 정보 공유 (Information Sharing)
여러 사용자가 동일한 정보에 엑세스 할 필요가 있을 수 있다.
✔ 가속화 (Computation Speed-up)
특정 작업(Task)을 여러 개의 서브 작업(Sub-task)로 쪼개어 프로세스의 병렬성을 키움으로써 처리 속도를 높일 수 있다.
이 때 메인 작업과 서브 작업은 서로 통신의 필요성이 생긴다.
✔ 모듈화 (Modularity)
특정한 시스템 기능을 별도의 프로세스(스레드)로 구분하여 모듈화된 시스템을 구성할 수 있다.
이 때 모듈간의 통신이 필요하다.
✔ 편의성 (Convenience)
다수의 사용자가 동시에 여러가지 작업을 수행할 수 있다.
Main Process
일렉트론 앱은 반드시 1개의 메인 프로세스를 가진다.
이 메인 프로세스에서 Node.js API 사용이 가능하며 File System 등에 자유롭게 접근이 가능하다.
메인 프로세스에서 BrowserWindow 로 렌더 프로세스를 생성하고, 웹페이지로 GUI 를 구성하게 된다.
만약 메인 프로세스 가 종료되면, 렌더 프로세스도 함께 종료된다.
Renderer Process
메인 프로세스에서 렌더 프로세스는 0개 이상일 수 있다.
각각의 랜더 프로세스들은 독립적으로 작동하기 때문에, 다른 랜더 프로세스에게 영향을 주지 않는다. 때문에 한페이지가 죽더라도, 다른 페이지에서는 여전히 동작이 가능하다.
만약 랜더 프로세스에서 Node.js API 에 접근하려면 nodeIntegration 설정하면 되며, DevTool을 확인해보고 싶다면, webContents.openDevTools 를 호출하면 된다.
Render Process 파일 접근 하기
만약 Render Process 에서 LocalFile 에 접근해야 한다면, 어떻게 할 수 있을까?
일반적으로 브라우저 에서 <input type="file" /> 파일에 접근한다면, C:\fakepath\filename 형태로 경로가 노출 되며 브라우저에서 LocalFile 에 직접 접근하는건 보안상 막고 있다.
일렉트론으로 노출되는 WEB 의 경우 DOM API 에 표준 API 이외에 일렉트론이 제공하는 API 내용이 추가되어 있다.
만약 실제 Local Full Path 를 확인해 보고 싶다면, Event.target.files[0].path 에서 실제경로를 확인할 수 있다.
이외에도 IPC 를 통해 브라우저를 거치지 않고, 메인 프로세스에서 dialog.showOpenDialog() 를 통해 파일에 접근하고, 이를 렌더 프로세스에게 알려줄 수 있다.
일렉트론과 리액트
일렉트론을 Javascript로 구현하는것은 어렵지 않다.
하지만 화면을 순수 HTML과 JS로 구현 하는건, 공수가 많이 드는 일이다.
React 나 Vue 같이 Javascript로 화면을 제어할 수 있는 도구를 활용한다면, 쉽게 작업할 수 있을 것이다.
'TIL & WIL > 오늘의 공부.js' 카테고리의 다른 글
| JavaScript heap out of memory 오류 해결 (0) | 2024.01.06 |
|---|---|
| 개인프로젝트 페이지 로딩 속도 개선 - WebP (2) | 2024.01.05 |
| 데이터를 완전히 삭제 시키는 것은 옳은 것인가? (Hard Delete, Soft Delete) (0) | 2023.12.11 |
| AWS EC2 멈춤 현상 (CPU 이슈) (1) | 2023.12.07 |
| 페이지 로딩 속도 테스트 후 리팩토링 계획 (1) | 2023.11.28 |
