02.일렉트론 Quick Start

이동훈·2022년 3월 29일
0

일렉트론 Quick Start는
https://www.electronjs.org/docs/latest/tutorial/quick-start
에 예시가 나와있다.

1.Nodejs 설치 및 업데이트

  • Electron 개발하기 위해서는 먼저 nodejs가 설치 되어야한다.
    https://nodejs.org/ko/
  • 설치 후 node, npm 버전 확인
    node -v
    npm -v
  1. 프로젝트 폴더 생성
  • mkdir my-electron-app
  • cd my-electron-app
  1. 프로젝트 생성
    npm init
  • package.json 파일 확인
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": “First electron app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
  • "main":"index.js":entry point로 프로그램의 시작점
  • 파일명은 index.js 또는 main.js를 일반적으로 사용
  1. Electron Package 추가
  • 프로젝트에서 electron을 사용하기 위해서는 "electron"패키지를 반드시 추가해야 한다.
    npm install --save-dev electron
    or
    yarn add electron --dev
  1. Package.json에 scripts 프로퍼티에 실행 스크립트를 추가
    "scripts":{
    	...
       "start": "electron ."  // 실행 스크립트
       ...
    }
6. index.html 생성
- root폴더에 index.html을 만들고 다음과 같이 작성
```javascript
<!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>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>
  1. preload.js 생성
  • root폴더에 preload.js를 생성
// preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
  1. 프로젝트 실행
    npm start or yarn start

실행화면

  1. 패키징과 배포
  • 패키징과 배포를 위한 가장 빠른 방법은 Electron Forge를 사용하는 것이다.
  • Electron Forge 패키지를 추가합니다.

npm install --save-dev @electron-forge/cli
npx electron-forge import

profile
한계를 부시는 프론트개발자

0개의 댓글