Electron - 개요

개미는뚠뚠·2024년 2월 25일
electronjs
0

Electron

목록 보기
1/1

🚀머릿말

오늘은 여유 시간에 작업하였던 Electron의 개념을 간단히 정리하려고 한다. 자격증 시험을 앞에 두고 있어서 간단히 작성할 예정이지만 이후에는 내가 만든 PC 어플리케이션 코드와 깊은 개념에 대해서 작성할 예정이다.

나는 개인적으로 PC 어플리케이션 제작에 호기심이 있어서 제법 예전부터 공부를 시작했는데 주변 개발자들 사이에서 Electron이 언급되는걸 보면서 깊게 공부할 필요가 있는 거 같다.

🚀개요

공식 홈페이지 URL : https://www.electronjs.org/
git-hub URL : https://github.com/electron/electron-quick-start

Electron을 간단히 설명하면 노드JS(Node.js)를 기반으로 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 오픈소스 프레임워크이다.

  • 2013년 아톰 쉘(Atom Shell)이라 불리는 크로스 플랫폼 애플리케이션 쉘로 시작되었으며 오픈소스화, 명칭 변경 등을 거쳐 현재 깃허브(GitHub)에 의해 개발되고 있다.
  • 윈도우(Windows)·맥OS(Mac OS)·리눅스(Linux)를 모두 지원한다.

추가적으로 Electron은 아래 3가지 핵심 요소로 구성되어 있다.

  • 프론트엔드를 담당하는 오픈소스 웹브라우저 크로미움(Chromium)
  • 백엔드를 담당하는 런타임 환경 노드JS
  • ES6기능을 내장하고 있고, 위를 별도의 컴파일 없이 사용할 수 있게 해주는 엔진 V8

🚀활용사례

나는 개인적으로 궁금하여 Electron이라는 것을 발견하였는데 이를 통해 개발한 프로그램들이 정말 많았고, 심지어 전부 내 주변환경에서 자주 사용하던 애들이라 더욱 깜짝 놀랐다.

아래 이미지와 같이 vsCode, FaceBook, Twitch, Slack, Figma..... 이거 전부 내가 사용하는건데!??!?!😂

이미지 출처 : https://www.electronjs.org/

🚀장점과 단점

장점

1) 낮은 진입 장벽

일렉트론의 중요한 장점은 진입 장벽이 낮다는 것이다. 웹개발의 기초 언어인 HTML, CSS, JS 만으로도 PC 어플리케이션을 제작할 수 있다.

2) 개발 속도 향상

자바스크립트는 한 줄씩 해석하는 인터프리터 방식을 사용하기 때문에 개발자가 손쉽게 디버깅하고 최적화할 수 있어 애플리케이션 제작 시간과 비용을 줄일 수 있다.

3) 크로스 플랫폼 지원

각기 다른 OS 플랫폼에 대해 데스크톱 애플리케이션을 지원하려면 각 OS마다 최적화 작업을 해야 하는데 일렉트론은 개요에서 설명한 내용과 같이 윈도우·맥OS·리눅스 별로 적합한 룩앤필을 맞추며 어플리케이션 환경을 구성할 수 있다.

4) 써드파티 지원

일렉트론은 노드JS의 모든 빌트인 모듈과 써드파티 모듈을 사용할 수 있다. NPM 레지스트리에 등록된 대부분의 모듈도 이용 가능하며 노드JS를 통해 파일시스템에 접근하고 네트워크 리소스를 제약 없이 사용할 수도 있다.

5) 빌드 툴과 인스톨러 제공

일렉트론은 자체 빌드 툴을 제공하여 데스크톱 애플리케이션을 손쉽게 패키징 할 수 있을 뿐 아니라 인스톨러도 순식간에 만들 수 있다. 또한 autoUpdater라는 구성 요소를 이용하면 애플리케이션 자동 업데이트 기능도 사용할 수 있다.

6) 기타

이외에도 노드 접근 권한 관리 내용이나 네이티브 API 등의 내용이 있으나, 아직까진 이른 단계이므로 제외했다. 궁금하면 찾아보기

단점

1) 큰 설치 파일 용량

일렉트론은 애플리케이션 UI를 렌더링 하기 위해 번들로 크로미움을 사용한다. 또한 구동에 필요한 여러 NPM 모듈들도 함께 패키징 되어 있다. 그로 인해 일렉트론으로 제작한 어플리케이션은 최소 100MB 기본 용량을 가진다.

2) 상대적으로 느린 속도

일렉트론으로 제작한 데스크톱 애플리케이션은 시스템 리소스, RAM을 많이 차지한다. 하나의 플랫폼을 위해 특별히 개발되어 최적화된 네이티브 애플리케이션에 비해 다양한 플랫폼을 위한 일렉트론은 효율성이 다소 떨어진다.

🚀기본 구조 및 예제

const { app, BrowserWindow } = require('electron');

function createWindow () {
  // 브라우저 윈도우를 생성한다.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // index.html 파일을 불러온다.
  win.loadFile('index.html')
}

app.on('ready', createWindow)

필수 파일
package.json: 애플리케이션의 메인 파일을 가리키고 앱의 세부 정보 및 의존성 목록을 포함한다.
main.js: 애플리케이션을 시작시키고 HTML이 렌더링 될 브라우저 윈도우를 생성한다.
index.html: 애플리케이션의 프론트엔드 UI가 되는 HTML 파일이다.

package.json
main: 메인 프로세스 파일을 지정한다.
scripts: 애플리케이션을 시작하고 실행하는 스크립트를 정의한다.

시험이 2주 남겨두고 있다...얼른 공부하러 가야하기 때문에 오늘은 개념만! 차주에는 세팅 방법 또는 코드적인 부분을 작성해야겠다. 암튼 electron은 신이에요👍

profile
개미는뚠뚠
404

0개의 댓글