티스토리 뷰
Electron 첫번째 어플리케이션 만들기.
1. Project폴더 생성 후 package.json 작성하기
앞서 Node.js를 설치 하였기 때문에 npm init 명령어가 가능합니다. 커맨드 창에서 프로젝트 경로로 진입 한 후 npm init -y 명령어로 기본 package.json 파일을 생성합니다. -y 옵션은 기본값으로 package.json을 생성하는 옵션입니다.
package.json을 생성한 후 아래와 같이 수정합니다(주석 제외, 주석 포함시 에러발생).
package.json
{
"name": "Electron-HelloWorld",
"version": "1.0.0",
"description": "",
"main": "index.js", //엔트리 포인트
"scripts": {
"start": "electron ." // 실행 스크립트
},
"author": "suwoni <topspin1278@naver.com>", //리눅스 빌드시 필요함
"license": "ISC"
}
2. Electron 설치
Electron을 아래와 같이 설치합니다.
Electron 설치
npm install --save-dev electron
3. index.js 작성
index.js 파일을 package.json파일과 같은 경로에 아래와 같이 작성합니다.
// app모듈과, BrowserWindow 모듈 할당
const {app, BrowserWindow} = require('electron');
let win;
app.on('ready', () =>{
win = new BrowserWindow(
{
width : 800
, minWidth:330
, height :500
, minHeight: 450
, show: false
, icon: __dirname + '/resources/installer/Icon.ico'
, webPreferences :{ defaultFontSize : 14}
}
);
// 창이 ready 상태가되면 보여주기
win.once('ready-to-show', function(){
win.show();
});
// 윈도우 창에 로드 할 html 페이지
win.loadURL(`file://${__dirname}/index.html`); //작은 따옴표가 아닌 back stick 기호(tab키 위)
//개발자 도구 오픈
win.webContents.openDevTools();
});
4. index.html 작성
index.html은 자유롭게 작성합니다.
5. 실행
커맨드 창에서 아래의 명령어를 실행합니다.
npm start
실행 소스 - https://github.com/cionman/02_Electron_HelloWorld
'CodeLab > Electron' 카테고리의 다른 글
07. Electron Windows Install시 커스텀 스킴 레지스트리에 추가하는 방법 (0) | 2017.04.29 |
---|---|
06. Electron 관련 기타 유용한 링크 및 글 (0) | 2017.04.15 |
05. Electron Debugging (0) | 2017.04.15 |
04. Electron API Demo (0) | 2017.04.15 |
03. Electron 실행파일 만들기 (2) | 2017.04.15 |
02. Electron Hello World (0) | 2017.04.15 |
01. Electron 소개 (0) | 2017.04.15 |
00. Electron 글 목차 (0) | 2017.04.15 |
공유하기 링크
- TAG
- electron, JavaScript
댓글
공지사항
- Total
- 299,227
- Today
- 38
- Yesterday
- 373
TAG
- tomcat
- MongoDB
- 자바스크립트
- 마리아DB
- Apache
- NoSQL
- 채팅
- django
- django 모델
- 몽고DB
- jenkins
- 모던 자바스크립트 입문
- Linux
- Python
- 숫자키 입력방지
- CentOS
- 리눅스
- MariaDB
- 생존코딩
- 마리아 db
- 파이어베이스
- JavaScript
- mongo
- 깃랩
- 젠킨스
- gitlab
- 파이썬
- electron
- 타입체크
- Firebase