👨‍💻 [Node.js] Nodejs 기반의 Electron은 무엇인가요? (웹 개발자가 쉽게 데스크탑 애플리케이션을 제작할 수 있는 프레임워크)

👨‍💻 안녕하세요, 윌리 프로젝트의 윌리 입니다.

웹 개발자가 쉽게 데스크탑 애플리케이션을 제작할 수 있는 프레임워크인, Nodejs 기반의 Electron 이 무엇인지 간단히 알아보았습니다.

웹 개발자가 쉽게 제작할 수 있다고 하지만, 개인적인 생각으로 접근하기 위한 허들이 낮은 것으로 보여지고, 깊이 있는 개발을 하려면 여전히 쉽지만은 않은 것 같습니다. 제가 아직 부족해서 그런지도 모르겠네요. 

---

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

질문 >

Nodejs 기반의 Electron은 무엇인가요?

답변 >

Electron은 Node.js와 Chromium을 기반으로 하여 데스크탑 애플리케이션을 제작할 수 있게 해주는 프레임워크입니다. 웹 개발자들이 익숙한 HTML, CSS, JavaScript를 사용해 Windows, macOS, Linux용 애플리케이션을 개발할 수 있게 해주는 것이 핵심입니다.

Electron의 주요 특징

1. Node.js와 Chromium의 결합:
   • 백엔드 로직을 Node.js로 구현하고, 프론트엔드 화면을 Chromium 기반의 웹 뷰에서 렌더링합니다.
   • 웹 기술로도 데스크탑 기능(파일 시스템 접근, OS API 호출 등)을 다룰 수 있습니다.
2. 크로스 플랫폼:
   • 동일한 코드베이스로 Windows, macOS, Linux 환경에서 동작하는 애플리케이션을 빌드할 수 있습니다.
   • OS별로 맞춤 기능(예: macOS 메뉴바 지원, Windows 시스템 트레이 등)도 쉽게 구현할 수 있습니다.
3. JavaScript를 사용한 쉽고 빠른 개발:
   • 웹 기술에 익숙한 개발자들이 추가적인 학습 없이도 데스크탑 앱을 개발할 수 있습니다.
   • 프론트엔드 라이브러리나 프레임워크(React, Vue.js 등)도 쉽게 통합 가능합니다.

---

Electron의 구성 요소

1. Main Process (메인 프로세스):
   • 애플리케이션의 시작점이 되는 코드가 실행되는 곳입니다.
   • Node.js API를 사용해 파일 시스템, 네트워크 등의 OS 기능에 접근할 수 있습니다.
   • 창(Window) 생성 및 관리 등의 역할을 합니다.
2. Renderer Process (렌더러 프로세스):
   • 애플리케이션의 UI를 담당하며, HTML/CSS/JavaScript로 작성됩니다.
   • 각 창마다 별도의 렌더러 프로세스가 실행됩니다.
   • Chromium이 렌더링을 담당하기 때문에 웹 브라우저처럼 작동합니다.
3. IPC (Inter-Process Communication):
   • 메인 프로세스와 렌더러 프로세스 간 통신을 위한 채널입니다.
   • ipcMain과 ipcRenderer 모듈을 사용해 데이터를 주고받습니다.

---

Electron을 사용하는 대표적인 애플리케이션

• Visual Studio Code: Microsoft의 코드 에디터.
• Slack: 팀 협업 툴.
• Discord: 음성 및 채팅 커뮤니티.
• Twitch: 스트리밍 관리 애플리케이션.

---

Electron으로 애플리케이션 개발의 장점과 단점

장점:

• 웹 개발자가 쉽게 접근: 웹 기술로 데스크탑 앱을 만들 수 있어 개발 속도가 빠릅니다.
• 크로스 플랫폼: 한 번 작성한 코드로 다양한 OS에서 실행 가능합니다.
• 풍부한 커뮤니티와 플러그인: 많은 오픈소스 라이브러리와 문서가 있습니다.

단점:

• 무거운 애플리케이션: Chromium을 포함하기 때문에 앱의 크기가 큽니다.
• 메모리 사용량: 각 창이 별도의 프로세스로 실행되기 때문에 리소스 사용이 많습니다.
• 성능: 네이티브 앱에 비해 속도가 느릴 수 있습니다.

---

Electron으로 간단한 앱 시작하기 (예제)

# Electron 프로젝트 생성
mkdir my-electron-app && cd my-electron-app
npm init -y
npm install electron --save-dev

main.js 파일 생성:

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

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadURL('<https://example.com>'); // 원하는 웹 페이지를 로드합니다.
});

package.json 수정:

"scripts": {
  "start": "electron ."
}

앱 실행:

npm start

---

Electron은 웹 개발 경험을 바탕으로 다양한 데스크탑 애플리케이션을 제작할 수 있는 강력한 도구입니다. 다만, 리소스 최적화와 같은 부분은 개발자가 직접 신경 써야 하는 점이 중요합니다.

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

---

🎬 유튜브 채널 🎬

위로그@WiLog

🎬 치지직 채널 🎬

위로그 채널 - CHZZK

---