[어플리케이션] Electron 강의

작성일: 21년 4월 5일

 

Web 공부하면서 윈도우 Application를 개발할 수 있으니 장점

QT도 많이 추천하였지만 자유도 면에서 Electron이 훨씬 장점이 많을것으로 판단함

 

Index

1. Electron의 장점

2. electron Quick Start

3. 프론트엔드 디자인

4. 함수 실행

5. 외부 nodejs 파일을 html에 적용하는 방법

6. electron-packager 설치

7. 윈도우 어플리케이션 배포버전 빌드

 

 

1. Electron의 장점

 - 크로스 플랫폼: Mac, Linux, Windows에서 모두 호환되는 어플리케이션
 - Language: 웹언어(HTML, CSS, JS) 사용

 

2. electron Quick Start 실행

 - electron 공식 홈페이지에서 참고함

 - 기본 npm start 하였을때 Hello World가 뜨는것을 확인 할 수 있음.

- node_modules는 Nodejs가 실행될때 필요한 모듈들을 저장함

- npm install 하였을때 package.json 파일의 모듈들이 설치되면서 node_modules에 저장됨

- 실행될 큰 Frame 관련 함수들이 여기 있음. 그외의 사용자들이 만들 함수들과 기능들은 따로 구현함.

 

3. 프론트엔드 디자인

- Codepen에서 마음에 드는 디자인을 열어서 코드를 확인함

- 위의 코드들을 복사하여 style.css 파일에 붙여넣기함

- 같은 방식으로 html 파일에도 붙여넣음

 

- 디자인이 적용된 어플리케이션이 나타남을 확인 할 수 있음

 

 

4. 함수 실행

- Button을 누를때마다 함수가 실행됨

 

5. 외부 nodejs 파일을 html에 적용하는 방법

 

6. electron-packager 설치

- npm install electron-packager -g

- 옵션 g를 둠으로써 cli 에서 사용할 수 있도록 함

 

7. 윈도우 어플리케이션 배포버전 빌드

- electron-packager.cmd ./electron-quick-start/ --arch ia32 --platform win32

- 인스톨 버전으로 배포가 가능함

 

Referece:

www.youtube.com/watch?v=kGfOihKIDPg&list=PLqh5vK4CKWeZDGPhn5IMk3uZv2rQ5hNSK

github.com/electron/electron-packager

electron/electron-packager

stackoverflow.com/questions/44391448/electron-require-is-not-defined?answertab=active#tab-top

Electron require() is not defined