[Electron] 앱 시작하기

[Electron] 앱 시작하기

---

1. 프로젝트 폴더 생성

$ mkdir electron

2. 새로 만든 폴더 경로에서 "npm init" 명령어를 실행.

$ npm init

- Enter 키를 누르면 다음 정보가 뜸.

- 괄호 ( ) 안의 값은 디폴트 값이다. 미입력 시 괄호 안의 값으로 자동 설정된다.

- 입력 값

- package name : 패키지 명 ( default : 폴더명 )

- version : 릴리즈 버전 설정

- description : 패키지 설명

- entry point : 엔트리 포인트 파일 ( default : index.js )

- git repository : 깃 저장소

- keywords : 키워드

- author : 저자

- license : 라이센스 ( default : ISC )

3. "package.json" 파일이 생성되고, 패키지에 대한 정보가 입력되어 있다.

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "index.js"
}

4. entry point 파일 생성

- 패키지 생성시 입력한 엔트리 포인트 파일 생성(index.js) 후 아래와 같이 추가

// require 로 별도의 모듈 추가 가능
// Electron module 추가
const { app, BrowserWindow } = require("electron")

function createWindow() {
        // 브라우저 창 크기 지정하여 생성
        win = new BrowserWindow({width: 800, height: 600})

        // 앱의 index.html 파일 로드
        win.loadFile("index.html")

        // 창이 닫힐 때 이벤트
        win.on("closed", () => {
                // win 객체에 대한 참조 해제.
                win = null
        })
}

// Electron 초기화 마치고, 브라우저 창 생성 준비되었을 때 호출됨.
app.on("ready", createWindow)

// 모든 창이 닫혔을 때 app 종료
app.on("window-all-closed", () => {
        // mac os에서는 사용자가 명확하게 Cmd + Q 누르기 전까지는
        // 애플리케이션이나 메뉴 바가 활성화된 상태로 머물러 있는 것이 일반적이다.
        if (process.platform !== "darwin") {
                app.quit()
        }
})

5. index.html 파일 생성

- 엔트리 포인트 파일에 loadFile시 입력한 html 파일 생성    

  
    
    
  
  
    
Hello Electron!
  

6. 앱 실행

- index.js, index.html, package.json 파일을 작성한 후에는, 애플리케이션 디렉토리에서 "npm start" 명령어를 이용해 앱을 실행 가능.

$ electron .

7. 실행 결과

---

참고 : Electron 문서