우선, electron 앱을 만들기 위해서는 npm 설치가 되어 있어야 합니다.
프로젝트 폴더를 하나 생성합니다. (예: C:\ElectronTest)
Node.js command prompt 를 실행 후 해당 디렉토리에서 아래의 작업을 수행하면 됩니다. (예: cd C:\ElectronTest)
1. package.json 파일 만들기
Node.js command prompt에서 아래 명령어를 실행합니다.
npm init위 명령어 실행 후 나오는 물음에 대해서 모두 Enter키로 스킵합니다.
수정이 필요한 경우 "npm init"을 다시 실행하거나 "package.json"파일을 수동으로 수정할 수 있습니다.
2. package.json에서 scripts 수정
일반 텍스트 편집기롤 package.json파일을 열어 scripts부분을 "start": "electron ."로 수정합니다.
{
"name": "electrontest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"electron": "^4.1.4"
},
"devDependencies": {},
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC"
}
3. Electron 설치
Node.js command prompt에서 아래 명령어를 실행합니다.
npm install --save-dev electron"package.json"파일에 devDependencies항목으로 electron이 추가된 것을 확인 할 수 있습니다.
4. index.js, index.html 파일 만들기
index.js
const { app, BrowserWindow } = require('electron')
let win = null
function createWindow () {
// 브라우저 창을 생성합니다.
win = new BrowserWindow({ width: 800, height: 600 })
// index.html파일을 로드합니다.
win.loadFile('index.html')
}
app.on('ready', createWindow)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<center><h1>Hello World!</h1></center>
</body>
</html>
5. 실행
Node.js command prompt에서 아래 명령어를 실행합니다.
npm start
반응형
댓글