전체 가이드 및 학습 리소스
JavaScript는 프로그래밍 언어 분야에서 가장 널리 사용되는 언어 중 하나로 자리매김했습니다. 그 이유는 백엔드 및 프런트엔드 개발 모두에 적용 가능하다는 점 덕분입니다.
기본 JavaScript 외에도 다양한 라이브러리 및 프레임워크들이 JavaScript의 활용 범위를 넓히고 있습니다.
Electron.js는 웹 개발자들이 기존 기술을 활용하여 네이티브 애플리케이션을 구축할 수 있도록 지원하는 강력한 오픈소스 프레임워크입니다. 본문에서는 Electron.js에 대해 자세히 알아보고, 이를 활용하여 놀라운 아이디어를 어떻게 구현할 수 있는지 살펴볼 것입니다.
Electron JS란 무엇인가?
Electron JS는 HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 데스크톱 애플리케이션을 만들 수 있게 해주는 프레임워크입니다. 이 프레임워크는 GitHub에서 개발 및 관리되고 있습니다.
Electron.js는 Node.JS와 Chromium을 결합하여 개발자들이 단일 JavaScript 코드베이스를 유지하면서 Windows, macOS, Linux 등 다양한 운영체제에서 작동하는 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있도록 합니다.
Electron.js의 역사는 2013년 1월로 거슬러 올라갑니다. 처음에는 JavaScript, HTML, CSS를 기반으로 하는 크로스 플랫폼 텍스트 편집기를 만드는 아이디어에서 시작되었습니다.
이 프로젝트는 2014년 Atom Shell이라는 이름으로 오픈소스로 공개되었으며, 2015년 4월에 Electron으로 명칭을 변경하였습니다. 첫 번째 API는 2016년에 공개되었습니다.
Electron JS의 주요 특징
- 광범위한 호환성: 모든 JavaScript 라이브러리 및 프레임워크와 호환됩니다. Vue.js, Angular, React.js 등 다양한 JavaScript 프레임워크를 Electron JS와 함께 활용할 수 있습니다. 이는 개발자들이 Electron 앱을 만들 때 이러한 라이브러리 및 프레임워크의 기능을 쉽게 적용할 수 있게 해줍니다.
- 재사용 가능한 프레임워크: 다양한 고객의 요구 사항을 충족하는 것은 많은 비용이 소요될 수 있습니다. Electron JS의 장점은 웹 및 데스크톱 애플리케이션 모두에 활용 가능하다는 점입니다. 이는 단일 코드베이스로 여러 운영체제에서 사용 가능하다는 것을 의미합니다.
- 기본 API 접근: Electron JS를 사용하는 개발자들은 운영 체제의 기본 API에 접근할 수 있습니다. 이는 알림 표시와 같은 하위 수준 기능에 접근할 수 있는 데스크톱 앱을 제작할 수 있다는 의미입니다.
- 웹 기술 지원: 개발자들이 새로운 프로그래밍 언어를 배울 필요가 없으므로 Electron JS는 적응성이 뛰어납니다. 웹 애플리케이션 제작에 사용하던 기술 스택을 그대로 사용하여 데스크톱 앱을 만들 수 있습니다.
- 코드 및 앱 관리 효율성: 서로 다른 운영체제용 앱 및 코드를 관리하기 위해 별도의 팀을 운영할 필요가 없습니다. Electron JS를 사용하면 Linux, Windows, Mac 운영체제에 대해 동일한 코드베이스를 유지할 수 있습니다.
- 간편한 빌드 및 배포: Electron 패키지 관리자는 개발자들이 각각의 패키지로 앱을 쉽게 패키징할 수 있도록 지원합니다. 이를 통해 동일한 코드베이스에서 Linux, Mac, Windows 데스크톱 앱을 배포할 수 있습니다.
Electron JS의 구조
Electron의 구조는 Chromium의 다중 프로세스 구조를 기반으로 하므로 최신 웹 브라우저와 매우 유사합니다.
Electron의 구조는 V8 JavaScript 엔진, Node.JS, Libchromiumcontent로 구성됩니다.
- Node.JS: V8 JavaScript 엔진에서 실행되는 오픈소스 JavaScript 런타임입니다. Node.JS를 통해 개발자들은 브라우저 창 외부에서 JavaScript 코드를 실행할 수 있으며, 대화형 셸을 통해 원시 JavaScript 코드를 실행할 수도 있습니다.
- Libchromiumcontent: Google Chrome에서 관리하는 오픈소스 Chromium 렌더링 라이브러리입니다. Chrome은 최소한의 사용자 인터페이스를 가지며, 레이아웃 엔진으로는 Blink를, JavaScript 엔진으로는 V8을 사용합니다.
- V8 JavaScript 엔진: Google에서 개발한 오픈소스 JavaScript 엔진으로, C++ 및 JavaScript로 작성되었습니다.
#1. Node.js 설치
Electron JS를 시작하려면 로컬 머신에 Node.js를 설치해야 합니다.
운영체제에 맞는 Node.js 버전을 선택하여 설치하십시오.
Node.js가 올바르게 설치되었는지 확인하려면 다음 명령어를 실행하십시오.
node -v
npm -v
정상적으로 설치되었다면 각각 Node.js 및 npm 버전이 표시될 것입니다.
#2. 명령줄 접근
명령줄에 접근하는 방법은 운영체제에 따라 다릅니다.
- Linux: 배포판에 따라 다름.
- Windows: PowerShell 또는 명령 프롬프트.
- macOS: 터미널.
Visual Studio Code와 같은 일부 코드 편집기에는 통합 터미널이 포함되어 있습니다.
#3. 코드 편집기 선택
Electron JS 코드를 작성하려면 코드 편집기가 필요합니다. Visual Studio Code는 강력하고 널리 사용되는 편집기 중 하나입니다.
Electron JS 설치 방법
1단계: Node.js 프로젝트 생성
다음 명령어를 사용하여 시작하십시오.
mkdir my-electron-app && cd my-electron-app
npm init
npm init 명령어를 실행하면 앱 이름, 진입점, 설명 등의 필드를 채우라는 메시지가 표시됩니다.
기본적으로 폴더 이름을 앱 이름으로 사용할 수 있습니다. 하지만 진입점은 main.js로 설정해야 합니다.
작성자 및 설명 필드에는 원하는 값을 입력할 수 있습니다. 모든 단계를 완료하면 package.json 파일이 다음과 같이 표시될 것입니다.
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
2단계: Electron 설치
다음 명령어를 실행하여 Electron을 설치하십시오.
npm install --save-dev electron
3단계: package.json에 'start' 명령어 추가
{
"scripts": {
"start": "electron ."
}
}
4단계: 앱 시작
개발 모드에서 앱을 시작하려면 다음 명령어를 사용하십시오.
npm start
Electron JS의 작동 과정
위에서 만든 설정을 기반으로 앱을 계속 개발해 보겠습니다. Electron 애플리케이션에는 메인 프로세스와 렌더러 프로세스라는 두 가지 유형의 프로세스가 있습니다.
메인 프로세스
메인 스크립트는 Electron 앱의 진입점 역할을 합니다. 앱은 전체 Node.js 환경에서 실행됩니다. Electron은 앱을 생성할 때 구성한 package.json 파일에서 메인 스크립트를 찾습니다.
루트 폴더에 main.js 파일을 생성하여 메인 스크립트를 초기화하십시오. 수동으로 파일을 생성하거나 다음 명령어를 사용할 수도 있습니다.
touch main.js
다음 코드를 main.js에 추가하십시오.
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Electron에서 웹 페이지는 원격 웹 주소 또는 로컬 HTML 파일에서 로드할 수 있습니다. 데모 목적으로 로컬 HTML 파일을 사용하겠습니다.
루트 폴더에 index.html 파일을 만듭니다. 다음 코드를 사용하여 시작할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h2>Hello from Electron renderer!</h2> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
렌더러 프로세스
렌더러 프로세스는 웹 콘텐츠를 렌더링합니다. 사전 로드 스크립트에는 웹 콘텐츠가 로드되기 전에 렌더러 프로세스에서 실행되는 코드가 필요합니다.
루트 폴더에 preload.js 파일을 만들고 다음 코드를 추가하십시오.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
npm start 명령어를 사용하여 개발 서버를 실행하면 다음과 같은 결과가 표시됩니다.
Electron JS로 만든 애플리케이션 예시
#1. Slack 데스크톱 앱
Slack은 가장 널리 사용되는 원격 협업 도구 중 하나입니다. 사용자들은 이 앱을 통해 메시지를 주고받고, 통화를 하고, 파일을 공유할 수 있습니다. Slack은 웹 기반 앱과 Mac, Linux, Windows 운영 체제에서 사용할 수 있는 데스크톱 앱을 제공합니다. Slack 데스크톱 앱은 Chromium 엔진과 Node.js를 사용하여 고품질 코드를 렌더링합니다.
#2. WordPress 데스크톱 앱
WordPress는 세계적으로 가장 큰 콘텐츠 관리 시스템입니다. 기본적인 코딩 기술이 없어도 웹사이트를 시작할 수 있다는 점은 많은 사용자들에게 매력적으로 다가왔습니다. WordPress는 브라우저를 통해 접속할 수 있으며 Mac, Linux, Windows 운영체제에서 데스크톱 앱을 통해서도 이용할 수 있습니다. WordPress 데스크톱 앱은 Electron JS를 기반으로 개발되었습니다.
#3. WhatsApp 데스크톱 앱
WhatsApp은 20억 명이 넘는 사용자를 가진 현대 사회에서 가장 인기 있는 메시징 앱 중 하나입니다. WhatsApp은 원래 모바일 앱으로 설계되었지만 이제는 다양한 기기를 지원하는 플랫폼으로 발전했습니다. WhatsApp 데스크톱 앱은 Electron JS를 활용하며 주요 운영 체제에서 사용할 수 있습니다.
#4. Visual Studio Code
Microsoft에서 개발한 Visual Studio Code는 널리 사용되는 코드 편집기 중 하나입니다. Visual Studio Code는 HTML, CSS, JavaScript를 포함한 다양한 프로그래밍 언어를 지원합니다. Electron JS를 사용하여 개발된 이 데스크톱 앱은 Windows, Mac, Linux 운영 체제에서 사용할 수 있습니다.
Electron JS 학습 자료
#1. Electronjs 공식 문서
Electronjs 문서는 Electronjs.org에서 제작 및 관리됩니다. Electron JS가 무엇인지, 첫 번째 Electron 앱을 설정하는 방법, 다양한 기술을 활용하여 크로스 플랫폼 데스크톱 앱을 구축하는 방법 등을 배울 수 있습니다. 이 문서는 새로운 기능이나 개선 사항이 있을 때마다 업데이트됩니다.
#2. Master Electron: HTML, JavaScript, CSS를 사용한 데스크톱 앱 개발
Master Electron은 Udemy에서 제공하는 유료 강의로, Electron JS를 소개합니다. Mac, Linux, Windows와 같은 다양한 운영 체제용 데스크톱 앱을 만드는 방법을 배울 수 있습니다. Master Electron은 전체 Electron API 프로세스를 이해하고자 하는 사람들에게 좋은 학습 자료입니다.
#3. Electron React 튜토리얼
Electron React는 Udemy에서 제공하는 유료 강의로, 개발자들에게 React.js를 사용하여 Electron 앱을 만드는 방법을 알려줍니다. React는 Meta(이전의 Facebook)에서 개발한 유명한 JavaScript 라이브러리 중 하나입니다.
마무리
Electron JS는 크로스 플랫폼 앱이 필요한 현대 사회에서 데스크톱 앱을 만드는 데 유용한 JavaScript 라이브러리입니다. HTML, CSS, JavaScript를 활용할 수 있다는 점은 개발자들이 새로운 기술 스택을 익힐 필요 없이 앱을 만들 수 있다는 것을 의미합니다. 또한, 크고 활발한 커뮤니티를 통해 꾸준한 지원을 받을 수 있다는 장점이 있습니다.
더 짧은 시간 안에 최신 애플리케이션을 구축하기 위해 몇 가지 유용한 JavaScript 프레임워크를 살펴보는 것도 좋은 방법입니다.