2025. 1. 20. 14:28ㆍDesktop/Electron
2025.01.09 - [Desktop/Electron] - [Electron] 2. 일렉트론이 보안상 까다로운 이유
[Electron] 2. 일렉트론이 보안상 까다로운 이유
2024.12.23 - [Desktop/Electron] - [Electron] 1. 왜 일렉트론(Electron)인가 [Electron] 1. 왜 일렉트론(Electron)인가닭 잡는데 소 잡는 칼 쓰는 상황개발 1년 차가 조금 넘어갈 무렵, 다수의 키오스크 기기 안에 들
rediscovery.tistory.com
이전 글까지 일렉트론에 대한 이론적인 부분에 대해 알아보았다면, 이 글에서는 일렉트론에 대한 설치와 실행에 대한 내용을 포스팅하겠습니다. 설치 방법은 공식 문서를 참조해서 진행하겠습니다.
※ 본 설치 환경은 Windows, Intelij Webstrom 으로 진행합니다.
일렉트론 설치(25년 01월 기준)
1. Node.js 설치
우선 node.js 가 컴퓨터에 설치되어 있는지 확인합니다. node.js 는 LTS 버전을 설치하는 것을 권장합니다.
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
$ node -v
v16.14.2
$ npm -v
8.7.0CLI 환경에서 node.js 와 npm 이 잘 동작하는지 확인합니다.
2. Electron 프로젝트 구성
프로젝트를 만들 경로로 가서 프로젝트 루트 폴더를 생성합니다.
# 루트 폴더 생성, 루트 폴더로 이동
# 폴더 명은 임의대로 생성해도 좋습니다.
mkdir electron-app && cd electron-app
npm init
# 혹은
yarn init
다음으로 의존성 설치를 진행합니다.
# npm
npm install electron --save-dev
# yarn
yarn add electron --dev
package.json 을 열어 수정해 줍니다.
// package.json
{
"name": "electron-app",
"version": "1.0.0",
"description": "일렉트론 앱입니다.",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Meggigoatee",
"license": "MIT",
"devDependencies": {
"electron": "^34.0.0"
}
}
마지막으로 electron의 시작점 스크립트를 작성합니다. 루트 폴더에서 "main.js"를 만들어 실행할 스크립트를 작성합니다.
// main.js
console.log('Hello from Electron!')
이제 일렉트론을 시작해 봅니다.
# npm
npm run start
# yarn
yarn run start
아래와 같이 결과가 실행되면 정상적으로 동작하는 것입니다.
3. 웹페이지를 BrowserWindow로 나타내기
일렉트론은 사용자 화면을 브라우저 엔진으로 구성합니다. 때문에 html 파일을 화면 구성으로 넣어주어야 합니다. 루트 폴더에 index.html을 생성해 다음 내용을 넣어줍니다.
<!-- 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'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>일렉트론</title>
</head>
<body>
<h1>일렉트론 화면입니다. 랜더러 프로세스에서 작동됩니다.</h1>
<p>👋</p>
</body>
</html>
이제 작성한 index.html 을 불러올 수 있도록 BrowserWindow를 생성하고 일렉트론이 시작되면 화면을 생성하게끔 하겠습니다. 스크립트는 main.js 에서 작성합니다.
// main.js
const { app, BrowserWindow } = require('electron/main')
// 새로운 BrowserWindow(화면)를 생성합니다.
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
// index.html 을 로드하도록 지정합니다.
win.loadFile('index.html').catch(err => console.log(err))
}
// Electron 앱이 준비되면 새로운 BrowserWindow 를 생성합니다.
app.whenReady().then(() => {
createWindow()
// Mac 에서는 프로그램이 백그라운드에서 실행되고 있기 때문에, 열린 창이 없다면 새로운 창을 생성하게 합니다.
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
// 모든 BrowserWindow 가 닫히는 이벤트를 수신해서 윈도우 환경에서의 프로그램을 종료합니다.
app.on('window-all-closed', () => {
// Mac 환경에서는 창이 닫혀도 프로그램을 종료하지 않습니다.
if (process.platform !== 'darwin') {
app.quit()
}
})
이제 다시 일렉트론을 시작해 봅니다.
# npm
npm run start
# yarn
yarn run start
윈도우라면 생성된 창을 닫으면 프로그램이 종료되고, Mac 이면 백그라운드에서 계속 실행됩니다.
여기까지 일렉트론 공식 문서를 참조하여 일렉트론 앱을 간단하게 만들어 보았습니다. 이후 필요한 프레임워크나 모듈을 추가로 설치해서 사용하면 되겠습니다. 그러나 수많은 프레임워크와 모듈을 일일이 설치하고 의존성을 관리하는 것은 처음에 벅찰 수 있습니다. 다행히도 Electron-vite라는 프로젝트 템플릿1 을 가져와서 사전 정의된 프로젝트 구성을 사용해 빠르게 프로젝트 설정을 구성할 수 있습니다. 다음 포스팅에서는 Electron-vite라는 프로젝트 템플릿을 사용해서 다양한 의존성을 가진 Electron 프로젝트 구성을 진행하도록 하겠습니다.
참조
https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites
- boilerplate라고도 부릅니다. [본문으로]
'Desktop > Electron' 카테고리의 다른 글
| [Electron] 2. 일렉트론이 보안상 까다로운 이유 (2) | 2025.01.09 |
|---|---|
| [Electron] 1. 왜 일렉트론(Electron)인가 (3) | 2024.12.23 |