일렉트론 튜토리얼 따라 해 보기.
(공식 홈 튜토리얼 https://www.electronjs.org/docs/latest/tutorial/quick-start)
○ 일렉트론(Electron)이란?
- 데스크톱 앱을 만드는 크로뮴과 Node.js 기반 앱 프레임 워크임 (Github에서 관리 중)
- HTML, CSS, Javascript을 이용하여 웹 앱(페이지)을 만들듯이 데스크톱 앱 만들면 됨 → 개꿀띠☆
- 대표적으로 VS code, Facebook 메신저가 일렉트론으로 만들어진 앱 → 검증 끝乃
일렉트론, 잘 몰라도 웹 만들 듯이 데스크톱 앱 만드는 것이군. 공식 홈페이지 튜토리얼을 한 번 따라가 보자.
○ 시작하기 앞서 (Prerequisites)
- Node.js를 일단 설치해야 하고 가급적 최신 버전을 사용해야 함. 아래 코드로 최신 버전임을 확인.
| node -v npm -v |
○ 본격 애플리케이션 만들기
1. 작업 폴더 만들고 일렉트론 설치하기 (Scaffold the project)
- 터미널에서 아래 명령어로 프로젝트 폴더를 만들자. 난 그냥 my-electron-app 폴더 만든 뒤 터미널에서 npm init 침
| mkdir my-electron-app && cd my-electron-app npm init |
- init 명령을 치면 필드 설정을 하는데, author나 description은 맘대로 하되 이번 튜토리얼을 따라오기 위해서는 entry point는 "main.js"로 설정
- 결국 package.json 파일이 아래와 거의 같으면 됨
| { "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "main.js", "author": "Jane Doe", "license": "MIT" } |
- 이제 일렉트론 프레임 워크를 설치해보자. 터미널에 아래와 같이 입력하여 일렉트론 설치하자
| $ npm install --save-dev electron |
- 설치를 하고 나서 package.json에 일렉트론 실행 명령"start" 추가시켜 줌
| { "scripts": { "start": "electron ." } } |
- 아래 명령어로 실행시킴. 현재는 root 폴더에 앱이 없기 때문에 애러를 던지게 됨. 여기까지 설치 끝.
| npm start |
2. 메인 파일 만들기 (Run the main process)
- 일단 root 폴더에 비어있는 main.js 파일을 만듦
- (main.js에 대해 내용 추가 설명 공식 홈페이지 참고)
3. 웹 화면 만들기 (Create a web page)
- index.html 파일을 아래와 같이 만듦, 그럼 이제 하나의 웹페이지를 같게 된 것임
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> <title>Hello World!</title> </head> <body> <h1> 용가리 블로그</h1> ★만나서 반갑습니다★ </body> </html> |
4. 방금 만든 웹페이지 윈도우 브라우저 창으로 열어보기 (Opening your web page in a browser window)
- 위에서 생성한 웹페이지를 윈도우앱으로 실행시키기 위해서는 두 개의 Electron 모듈이 필요함
- The app module, which controls your application's event lifecycle.
- The BrowserWindow module, which creates and manages application windows.
- main 프로세스가 Node.js를 실행하기 때문에, 두 모듈을 아래와 같이 CommonJS 모듈로 파일 상단에 넣으면 됨
| const { app, BrowserWindow } = require('electron') |
- 그런 다음 index.html을 새 BrowserWindow 인스턴스에 로드하는 createWindow() 함수를 추가하고,
| const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600 }) win.loadFile('index.html') } |
- 다음 createWindow() 함수를 호출해서 브라우저 윈도우 창을 만듦
- app 모듈의 ready 이벤트 발생 후에만 → 브라우져 창 생성됨
- app.WhenReady() API 이용해서 ready 이벤트 기다릴 수 있음
- 아래와 같이 해서 WhenReady()가 이것의 Promise를 resolve 하면 createWindow()가 실행되게 함
| app.whenReady().then(() => { createWindow() }) |
오호 여기까지 하면 실행시키기까지 성공!!
ㅎㅎ 여기서 한번 끊고, 다음 포스팅에서 튜토리얼을 마무리해보도록 하자