0. Electron.js 개요
일렉트론은 "HTML, CSS, Javascript를 이용해 크로스플랫폼 기반의 데스크톱 앱을 만드는 프레임워크"로 알고 있습니다. 이것 역시,..좀 하다가 말아서..(-- 까먹기 전에 ㅎㅎ
일단 모바일이 대세긴 하지만, 언젠가 데스크톱 앱을 만들어본다는 멋진 일을 하지 않을까 해서 (재도전) 기록을 남겨봅니다.
다만, 크로미움(Chromium) 엔진에 대해서는 가타부타 말이 (느리다는?) 많아서 확실히 복잡한 앱을 만들고 최적화하지 않으면 느릴것 같긴 한데요, 실습하는 수준에서 크게 걱정할 건 없어보입니다.
보다 자세한 크로미움 프로젝트는 여기를 눌러서 확인해보세요!
ps. 플러터, 일렉트론.js 모두 올 한해동안 손을 대지 않았었던거같네요,..분명 2022년도에 뭔가 해보려고 선정했던 주제인데..지금보니 놀았나봐요;;
1. 사전지식
- HTML
- CSS
- JavaScript | Node.js
2. 준비할 것
- Node.js LTS (v18.x | 현재 사용중인 버전이나 v16.x 이상이면 될거같네요!)
- Chromium Engine (크롬, 엣지, Brave 등의 브라우저가 설치되어 있다면 OK)
- VSCode (편리한 개발을 위한 IDE)
3. 실습목표
- Electron.js 개발환경을 구축할 수 있다.
- Electron.js를 이용한 데스크톱 앱을 제작할 수 있다
- 웹 기술(HTML, CSS, Javascript)로 데스트톱 앱을 제작할 수 있다.
그럼, 기본적인 환경설정부터 한번 해볼까 합니다.
Q. Node.js가 설치되어 있나요?
A. 그렇다면 PASS!
아니라면, Node.js를 여기를 눌러 설치하고 옵시다.
Q. VSCode가 설치되어 있나요?
A. 그렇다면 PASS!
아니라면, VSCode를 여기를 눌러 설치합시다.
웹브라우저는 뭐 있겠죠,..꼭 크로미움 버전이 아니어도 되더라고요! (왜죠? ...동공지진!)
우선 첫번째 데스크톱 앱으로, 이미지 리사이저를 만들어 볼 ㄲ ㅏ합니다. 이미지 크지를 조절하는 편리한 도구! 라고 생각하세요, 원래 포토샵이나 다른 이미지 편집도구(=저는 주로 그림판을 사용 ㅠ)가 있으면 좋은데 직접 만들어보는 재미도 있고..좋지 않을까요? 원래는 계산기 먼저 만들어볼까 했는데,..이건 누구나가 다 하는거니깐 PASS
첫번째 앱을 만들기 위해서 VSCode를 실행하고, 터미널을 열어줍니다. 단축키, CTRL+SHIFT+` 또는 (메뉴중) Terminal > New Terminal 클릭! 명령행에 (적당한 위치에) 프로젝트명을 하나 정해서 새 디렉터를 만들어줍니다.
mkdir image-resizer && code image-resizer(저는 주로 Bash를 사용하는데, zsh도 좋아보여서..앞으로는 zsh로 할지도 모르겠어요)
혹시나 아래 이미지 처럼, 신뢰하는지(Trusted?) 물어보면 예(Yes)를 선택합시다.
그리고 나서 다시한번 Bash 터미널을 열어주고, 아래 명령을 실행합니다. Node.js 다뤄보신 분들은 아시겠지만 기본적으로 package.json을 만들어야 합니다. 세부 설정은 차차 변경해도 되거든요,
npm init -y && npm i -D electron
프로젝트 관련 설정을 수동으로 하실려면, 아래 명령을 입력해보세요
npm init
그러니까 -y는 무조건 yes! 기본값으로 설정하는 편리한 스위치인데, 직접적으로 내용 작성하려면 세부사항을 일부 알아야하지만..일단 궁금하니 해보는것도 좋을듯 하고요..저는 이제 안해요, 귀찮..
참고로, 공식 튜터리얼에서는 아래와 같이 샘플 예제를 제공하더라고요
mkdir my-electron-app && cd my-electron-app
npm init
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
npm install --save-dev electron
일단 자동이나 수동으로 생성한 package.js를 열어보고, 아래와 같이 productname 키(Key)를 채워보겠습니다. 이건, 맥 사용자들을 위한 것으로 맥에서 앱의 이름등을 나타낼때 사용합니다.
이제, 다시한번 터미널을 열고 (CTRL+`) electron을 설치합니다.
npm i electron
// npm i electron -g : 전역설치(전역공간에)
// npm i electron -D : 지역설치(현재위치에)
// npm i electron --save-dev : -D와 같음
그러면, 알아서 node_modules 라는 디렉터리와 electron 관련 모듈(=Node.js에서 모듈은 ..그냥, 자바스크립트 파일을 의미)이 설치됩니다.
이제, package.json에서 "main"을 index.js라고 적혀있는게 보통인데 Electron.js에서는 엔트리포인트를 main.js 라고 사용합니다. 그래서 저는 이미 바꺼두었지만요,..아래는 package.json의 일부입니다.
{
"scripts": {
"start": "electron ."
}
}
main.js 파일도 잊지 말고 생성해주자구요! 그리고, 간단한 문자열을 출력해보도록 하겠습니다.
console.log("Hello, Electron.js!");
아직은 일렉트론 앱은 아니니까, 명령 실행을 중지하려면 CTRL+C 단축키를 눌러서 중단하세요!
이제 본격적인 main.js 를 작성해보겠습니다. 기본적인 브라우저 윈도우 객체부터 준비해야하거든요,
const { app, BrowserWindow } = require("electron");
const path = require("path");
const createWindow = () => {
const win = new BrowserWindow({
title: "Image Resizer",
width: 500,
height: 600
});
win.loadFile(path.join(__dirname+"./renderer/index.html"));
}
app.whenReady().then(() => {
createWindow();
})
참고로, 첫 일렉트론 앱으로 만들 Image Resizer를 개발하는 과정에서 기본 HTML 템플릿은 eletron.js 공식 튜터리얼을 참고하도록 하겠습니다.
경로는 renderer 라는 경로에 index.html로 저장했습니다. 일렉트론 앱을 실행하면, 보여줄 컨텐츠가 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
와하하,..아직 끝난건 아닙니다만...한번에 끝내려는게 아니라서,..퇴근 전에 다시한번 정리해볼게요...일단 체크하면서 하느라고 개발속도가 디게 느리지만, 저와같은 달팽이들은..느려도 좋아요! (일단 하다보면 되는걸 경험해봤다면..)
믿어보시라니까요,..일단 저장!
(비겁한 변명)