Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

과거의 내가 미래의 나에게

Electron 설치 및 실행 본문

FE

Electron 설치 및 실행

양바삭 2023. 1. 3. 16:18

여러 방법의 electron 시작

일렉트론으로 개발할 일이 생겼다. 평소처럼 잘 정리된 블로그를 참고하려다 저번 vue 스터디를 통해 깨달은 공식 문서의 중요성을 생각하고 공식문서를 바탕으로 일렉트론에서 Hello World를 띄우는 법을 기록해본다. 

또한 이외에도 한 블로그를 참고하여 보일러 플레이트를 활용한 시작, 기존 react 프로젝트에서 일렉트론 추가하기도 기록해볼 것이다.

 

 

Electron은 무엇인가?

일렉트론은 HTML,CSS,JS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크이다. 크로니움과 node.js를 바탕으로 제작하여 js 코드베이스를 유지하며 windows, mac, linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다.

공식문서와 함께 시작하기

0. 목적

Hello World 화면이 뜬 앱을 띄우는 것을 최종 목적으로 한다.

 

최종적으로 띄울 화면

1. 기본 설치

  a. node.js 및 npm 설치한다.

  b. 그리고 원하는 폴더에 npm init을 통해 package.json 파일을 생성한다. 아래는 package.json 파일 구성

 

{
  "name": "my-electron-app", // 이름 자유
  "version": "1.0.0",
  "description": "Hello World!", // 설명 자유. 안의 내용은 꼭 작성하자
  "main": "main.js", // 엔트리 포인트는 적은 이름과 루트 폴더에 생성할 main.js는 같은 이름이어야한다
  "author": "Jane Doe", // 이름 자유. 안의 내용은 꼭 작성하자
  "license": "MIT"
}

 

  c. 일렉트론 설치

npm install --save-dev electron

  설치한 후 package.json의 script 부분을 추가해준다. 추가한 부분은 나중에 일렉트론을 시작할 때 명령어를 정해놓은 것.

{
  "name" : "my-electron-app"
  ...
  "scripts": {
    "start": "electron ."
  }
}

 

2. index.html 세팅

앱에 띄울 화면을 만들 것이다. 루트 폴더에 index.html 파일을 생성하여 아래와 같이 적어준다. 물론 body의 내용은 자유로이 수정해도 좋다.

<!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>
  </body>
</html>

 

2. main.js 세팅

일렉트론 애플리케이션의 진입점은 main.js 이다. 이 스크립트는 Node.js 환경에서 실행되며 앱의 수명 주기 제어, 네이티브 인터페이스 표시, 권한 있는 작업 수행 및 렌더러 프로세스 관리를 담당하는 메인 프로세스를 제어한다.

 

  a. 루트 폴더에 main.js 파일을 생성하자. package.json에서 entry에 적어놓은 이름과 동일하게 생성하여야 할 것이다.

  b. main.js를 아래와 같이 세팅하자.

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


//응용프로그램 창을 만들어주는 BrowserWindow 모듈을 사용하여 창을 하나 만든다.
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html') //아까 만든 화면에 띄울 html 파일
}


/* app모듈은 ready 이벤트가 발생한 후 생성할 수 있으므로 app.whenReady()API를 사용하여 
*  이벤트가 발생하길 기다린 후, createWinodow를 호출한다
*/
app.whenReady().then(() => {
  createWindow()
  /* linux나 windows는 창이 열려있지 않다면 종료되지만 macOS는 창이 열려있지 않아도 계속 실행되고
  켜져있는 창이 없을 때 앱을 실행하면 새 창이 열린단다. mac을 안써봐서 잘 모르겠네.*/
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})


// 창 종료 시 응용프로그램이 완전히 종료되게끔 하는 함수
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

  c. npm start를 통해 실행하면 화면이 뜰 것이다.

  공식문서에서는 로드 되기전에 실행되는 preload.js를 넣어서 화면에다가 크롬 버젼 이런거 띄웠는데 다 생략하고 정말 화면을 실행시키는 것만 해보았다. 이제 계속해서 더 공부해야지

 

3. 추가로...

기본 일렉트론 위에 리액트를 설치하는 법을 적어놓은 블로그 주소를 첨부해둔다

https://codegear.tistory.com/12

또한 위의 리액트 설치 방법이 익숙하게 보이지 않는다면 한 유투브를 보면 좋은데, 일반 html에서 리액트를 설치하고 웹팩설정까지 하는 방법을 자세하게 설명해놓은 것이니 참고하면 좋을 듯 하여 첨부해둔다. 다 볼 필요 없고 1~20강정도만 봐도 위 블로그의 리액트 설치 코드는 다 이해할 수 있을 것이다.

https://www.youtube.com/watch?v=aYwSrzeyUOk&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&ab_channel=ZeroChoTV

 

 

보일러 플레이트와 함께 시작하기

보일러 플레이트를 활용하면 엄청엄청엄청 쉽게 일렉트론을 시작할 수 있다.

 

1. 폴더가 생성되기 원하는 위치에 npx create-electron-app "프로젝트명"을 입력한다.

2. 해당 폴더에서 npm install을 진행한다

3. npm start로 시작한다!

 

 

참고 문서

 

 

 

 

'FE' 카테고리의 다른 글

iframe  (0) 2023.09.24
Next.js 문서 읽기 - 개요  (0) 2023.08.20
웹이란 뭘까?  (0) 2023.07.02
CSS 설계 기법 정리  (0) 2023.06.21
Cookie, Session, Web storage  (0) 2023.06.18
'FE' Related Articles more
Comments