[node JS] electron

카테고리 없음

[node JS] electron

seongjin08 2022. 7. 14. 10:05

electron 다운로드

$ npm install -g electron

폴더 생성 후

$ npm -y init

혹시 따로 설정 하고 싶은게 있으면 -y 옵션을 빼고 진행하면 된다.

index.js 파일을 생성 해 준다.

index.js

const electron = require('electron');
const app = electron.app; // 일렉트론 애플리케이션 객체에 대한 참조를 저장
const BrowserWindow = electron.BrowserWindow;  //BrowserWindow 클래스의 참조 저장

let mainWindow = null; // 애플리케이션 화면을 저장할 변수 선언

// macOS를 제외하고, 화면이 모두 종료되면 애플리케이션을 곧바로 종료하게 합니다.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

// 애플리케이션이 로드되면 mainWindow 변수에 BrowserWinow 클래스 인스턴스를 할당해서,
// 애플리케이션 화면이 가비지 컬렉션에 의해 회수되지 않게 합니다.
app.on('ready', () => {
    mainWindow = new BrowserWindow();
    mainWindow.loadURL(`file://${__dirname}/index.html`); // index.html을 읽어들입니다.
    mainWindow.on('closed', () => { mainWindow = null; }); // 애플리케이션 화면을 닫으면, mainWindow 변수를 null로 비워줍니다.
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            width: 100vw;
            height: 100vh;
            background-image: linear-gradient(45deg, #7031c8 0%, #EF8C53 100%);
            text-align: center;
        }

        button {
            background: rgba(0, 0, 0, 0.40);
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.50);
            border-radius: 8px;
            color: white;
            padding: 1em 2em;
            border: none;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: 14pt;
            position: relative;
            top: 40%;
            cursor: pointer;
            outline: none;
        }

        button:hover {
            background: rgba(42, 35, 35, 0.3);
        }
    </style>

    <script>
        function sayHello() {

            alert('Hello World');
        }
    </script>
</head>

<body>
    <button onclick="sayHello()">Say Hello</button>
</body>

</html>

이렇게 코드르 작성 후