일렉트론 시작하기

참고한 문서는 공식문서다. https://www.electronjs.org/docs/latest/

 

그럼 내가 이해하기 쉽게 개발 환경을 만드는 과정을 정리해 보겠다.

 

목적

이 문서의 목적은

1. hello world를 표시하는 앱을 실행한다.

2. 해당앱을 빌드한다.

라는 두가지 목표를 가진다.

 

앱 만들기

1-1. 프로젝트 폴더를 만들고 해당폴더에서 npm init을 사용하여 package.json을 만든다.
1-2. 엔트리 포인트는 main.js으로 한다.
1-3. author는 꼭 적어 준다. 안하면 빌드시에 오류가 난다.

2-1. npm install electron --save-dev를 사용해서 일렉트론을 설치해준다.
2-2. package.json의 script에 start를 추가해서 npm run start가 수행할 명령을 정의해준다.

3. main.js파일을 만든다. main.js는 node.js를 실행할 수 있다.
   일종의 백엔드같은 역할을 수 행한다고 볼 수 있다. 앱 window를 만들고 node.js 코드를 수행한다.
4. main.js에 윈도우를 만들고 index.html을 불러온다는 코드를 작성한다.
5. index.html파일을 만들어 준다.

위와 같은 절차를 거치면 앱을 만들 수 있다.

 

2-2이 끝난 후엔 프로젝트 폴더에 package.json이 있고 그 내용은 다음과 같다.

{
  "name": "gogo",
  "version": "1.0.0",
  "description": "일렉트론 앱을 만들어 봐요",
  "main": "main.js",
  "scripts": {
  	"start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "okane",
  "license": "ISC"
}

 

main.js를 만들고 window를 만들고 index.html을 불러오는 코드를 작성한다.

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.when~은 일렉트론 앱의 생명주기이다. app.on은 MacOS를 위한 코드인데 윈도우용이라면 고려할 필요는 없다. 근데 있어도 상관은 없으니까 그냥 둘려고 한다.

 

이제 index.html을 만들고 적당히 내용을 적어 준뒤 npm run start를 통해 앱을 실행 해 볼 수 있다.

참고로 개발자 도구를 키는 법은 Ctrl + Shift + i 이고 새로고침은 Ctrl + R이다.