프로젝트 폴더 생성
원하는 폴더에 프로젝트를 진행할 폴더 하나 생성해주세요.
저는 G 드라이브에 devNode 라는 폴더를 생성했습니다.
폴더안에 파일 생성
index.js
package.json
파일을 생성해주세요.
도스창 오픈
해당 프로젝트 경로로 이동해서 npm init 를 입력합니다.
명령어를 입력하면 세부정보를 입력하는 질문이 뜨는데, 저는 아래와 같이 입력했습니다.
확인을 누릅시다.
electron 설치
OK 를 누른다음 npm install electron -g 를 입력해서 설치를 진행합니다.
index.js 내용 수정
이 과정에서 저는 에디터는 Visual Studio Code 를 사용하겠습니다.
아래 코드들은 Electron 문서의 첫 번째 Electron 앱 만들기 코드 입니다.
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
let win
function createWindow () {
// 새로운 브라우저 창을 생성합니다.
win = new BrowserWindow({width: 800, height: 600})
// 그리고 현재 디렉터리의 index.html을 로드합니다.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// 개발자 도구를 엽니다.
win.webContents.openDevTools()
// 창이 닫히면 호출됩니다.
win.on('closed', () => {
// 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해
// 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
// 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
win = null
})
}
// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저
// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만
// 사용할 수 있습니다.
app.on('ready', createWindow)
// 모든 창이 닫히면 애플리케이션 종료.
app.on('window-all-closed', () => {
// macOS의 대부분의 애플리케이션은 유저가 Cmd + Q 커맨드로 확실하게
// 종료하기 전까지 메뉴바에 남아 계속 실행됩니다.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// macOS에선 보통 독 아이콘이 클릭되고 나서도
// 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다.
if (win === null) {
createWindow()
}
})
// 이 파일엔 제작할 애플리케이션에 특화된 메인 프로세스 코드를
// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로
// 코드를 작성할 수도 있습니다.
index.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World</h1>
이 애플리케이션은 node <script>document.write(process.version)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
Electron <script>document.write(process.versions.electron)</script>을 사용합니다.
</body>
</html>
electron 실행
npm start로 앱 실행
package.josn 파일에서 "start" : "electron index.js" 를 추가해서 수정하면 npm start 명령어로 앱을 실행할 수 있습니다.
{
"name": "devnode",
"version": "1.0.0",
"description": "tutorail for electron",
"main": "index.js",
"scripts": {
"start" : "electron index.js"
},
"author": "",
"license": "ISC"
}
내용 추가
win.loadURL 사용시 튜토리얼 사이트에는 win.loadURL('index.html') 이렇게 되어있는데 이대로 하면 에러가 발생한다.. index.html 파일을 열어야 하는데 접속가능한 경로가 아니여서 그런가보다
