2.electron, 첫번째 electron 어플리케이션을 만들어 볼께요 ^^；

블로그목적

electron 에 대해서 공부하여, 드디어 첫번째 어플리케이션을 완성했고, 그것에 대해서 공유한다.

​

도전해보자, 첫번째 만들어보는 Electron 어플리케이션 ^^

Electron 은 지난 블로깅에도 말씀드렸던것 같이 Node 기반으로 만들어져 있음.

즉, 아래 언어들의 조합으로 이루어진다고 보면 될것 같습니다.

Javascript 실행

HTML 과 CSS 를 이용한 화면 그리기.

우선, 개발과 관련해서 Electron 어플리케이션은 근본적으로 Node.js 어플리케이션이라고 할수 있습니다.

즉, Node.js 모듈과 마찬가지로, 시작점은 당근, package.json 이겠죠? ^^

기본적으로 Electron 어플리케이션 앱 대부분은 아래 폴더 구조를 갖게됩니다.

my-app

package.json

main.js

index.html

그럼 이제 시작해 보겠습니다.

우선, 새로운 Electron 어플리케이션을 위해 빈 폴더를 하나 만들고 그 폴더 안에서 아래 명령을 실행합니다.

$ npm init -y

결과 : -y 옵션을 통해서 package.json 파일이 디폴트로 생성됩니다.

저는 아래 정보를 추가 및 변경했습니다.

description

"description": "electron first application"

main

"main": "main.js"

script

"start": "electron ."

author

"author": "magic"

그리고, electron 을 설치합니다.

$ npm install --save-dev electron

이외에도 다양한 electron 설치 방법이 존재한다고 하네요.. 아래 설치방법을 참고부탁드려요^^;

설치 방법

참고페이지 : https://www.electronjs.org/docs/tutorial/installation

그리고, Electron 어플리케이션을 생성하기위해서 아래 3가지 파일을 추가 및 코딩했습니다.

첫번째, package.json 파일

 

npm 에서 사용하는 package.json과 같은 파일

의존성관리

작성자정보

스크립트명령

ex) start

기타 등등

가장 중요한 부분

main

이 필드 값을 참조해서 Electron 이 어느 javascript 파일을 실행할지 결정함.

두번째, main.js 소스 파일

 

Electron 어플리케이션의 진입점이 되는 파일

어플리케이션을 어떻게 실행할지?

전역적으로 어떤 설정이 필요한지 등등 여기서 지정함.

세번째, index.html 소스파일

물론, 위의 소스는 보여주기 위한 웹페이지입니다. ^^;

첫번째 도전 어플리케이션으로 로그인페이지 설정을 한번 해봤습니다.

물론. 현재, 해당 어플리케이션에서 로그인은 정상적으로 되지 않는 가상의 fake 소스(?) 이긴하지만, 추후에 javascript 를 통해서 더욱 세밀한 소스코딩를 하고,

CSS/HTML 을 통해서 예쁘게 꾸미게 될 경우에 좋은 어플리케이션을 개발할 수 있다는 가능성을 봤습니다.

그리고, 앞으로 더욱 electron 을 공부해서 나만의 서비스 프로그램을 어떻게 만들어볼까?라고 상상해 보니 순간 할 수 있다라는 자신감과 더욱 끌리는 electron 이네요 ^^

하지만, 나만의 서비스를 만들려면 저의 게으름과 무지와 단단히 싸워야 할 것 같습니다.

​

그럼, 실행해 보겠습니다^^;

실행은 아래 명령어를 사용하면 됩니다.

$ npm start

실행했더니, 제가 코딩했던 내용을 기반으로 아래와 같이 윈도우 창이 하나가 뜨네요 ^^; 이렇게 첫 electron 을 이용한 저만의 electron 어플리케이션이 탄생 및 기동을 성공했습니다. !

결론

개발과 관련해서 Electron 어플리케이션은 근본적으로 Node.js 어플리케이션이라고 할수있음.

electron 을 통해서 javascript, html, css 로 PC 기반의 어플리케이션을 뚝딱뚝딱(?) 쉽게 만들 수 있다는 장점이 있는것 같음. 앞으로 더욱 경험하고 공부해 봐야겠지만요 ^^;

그리고 첫 프로그래밍 한 소감은 electron 및 javascript, html, css 에 대해서도 좀더 심도있는 공부가 필요할 것 같네요..배움의 목이 마르네요 ^^;

아무튼, 오늘도 electron 관련 개발에 대한 마술(?) 한가지 획득 완료! 감사합니다. ^^

(금일도 1시가 넘었네요; 요즘 공부하다 보면 시간이 그냥 물 흐르듯이 지나가네요..^^;; 모두 즐겁고 행복한 밤 되세요, 소중한 시간을 들여 너무나 부족한 글 읽어주셔서 감사합니다. 부족함을 더욱 채울 수 있는 제가 되겠습니다. ㅎㅎ 그럼 이만.)

---

오늘의 명언 한마디

우리 마음을 움직이고, 감동시키는 것은 모두 섹시하다. 그러니까 섹시하기 위해서는 다른 사람을 감동시키고 움직이는 법을 찾아내야하고, 그러려면, 우리 스스로를 감동시키고 움직여야한다.

이것은 오로지 느낌과 생각에 의해서만 이루어질 수 있다. 또 그렇게 하자면 우리는 너무 겁이 많아도 안되고, 게을러서도 안 된다.

카렌 크리스티네 앙어마이어지음, "펜으로 유혹하라" 중에서...

---

오늘의 영어 한마디

You need to keep your feet on the ground not to get carried away.

너는 필요하다 / 자신의 뜻을 굽히지 않는 사고가 / 타인들의 의견에 휩쓸리지 않으려면

해설

마치 식물이 땅에 뿌리를 내리고 있으면, 홍수에 뿌리가 뽑혀 다른 곳으로 떠내려가지 않음.

즉, 타인들의 이견에 흔들리지 않으려면, 자신의 발을 땅에 디디고 있어야 하죠.

결론적으로, "keep one's feet on the ground" 는 자신의 뜻을 굽히지 않는다는 의미임.

​

---

목표

- 나의 강점을 바탕으로 나의 일을 잘해냄으로써 타인과 사회를 아릅답게 만든다.

- 현재 내가 가진 능력으로 누군가에 도움이 될 수 있을까? 에 대해서 항상 생각하기

- 나는 블로그 생태계에서 IT 테크관련 파워블로거및 인플루언서가 반드시 된다!

​

목표를 이루기 위한 실천방안

- 꾸준한 블로깅/기록법/독서법으로 넘버원이 아닌 온리원이 되보자.

- 천사불여일행(千思不如一行)을 항상생각하며 체화 및 각인시키자.

- "천번 생각하는것보다 한번 행동하는 것이 더 중요하다."

- 기기일약 불능십보(騏驥一躍 不能十步) / 노마십가 공재불사(駑馬十駕 功在不舍)

- 천리마도 한번에 열걸음을 뛸 수 없고, 느리고 둔한말이라도 열흘이면 하룻길을 간다.

- 모든 실수에는 마술이 숨어 있다. 따라서 나는 실수하면 실수할수록, 그런 실수에서 더 많이 배울수록 삶에서 더 많은 마술을 갖는다.