[Electron] Hello World

개발 환경을 구축하였으니, 이제 Hello World 프로그램을 작성해보고, 대충 어떻게 돌아가는지 파악해보도록 하겠습니다. electron-quick-start를 사용하면 될듯 합니다.

터미널을 여시고, 임의의 디렉토리를 만듭니다. 그리고, 다음과 같이 입력합니다 .

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install
$ npm start

일단 개발환경이 제대로 설치된 상태고, 별다른 문제가 없다면 떡하니 창하나가 뜰겁니다. Hello World 프로그램이 완성되었습니다.

Screen Shot 2017-01-25 at 5.23.38 PM

우분투 환경에서도 역시 마찬가지로 같은 모양을 가진 창이 뜹니다. 아마 윈도우에서도 마찬가지일겁니다. 한번의 개발로 모든 운영체제에서 실행이 되는 앱을 개발하였습니다 .^^

이제 electron-quick-start 프로그래을 좀더 살펴보도록 하겠습니다.

문서파일을 제외하고, 총 4개의 파일로 이루어져있습니다.

index.html
main.js
package.json
renderer.js

package.json 파일은 이 프로그램을 실행하는데 필요한 패키지들의 리스트를 보여줍니다. 아까 실행하기 위해 입력했던 npm install 명령어가 이 파일을 참조하여 필요한 패키지들을 자동으로 설치하여 줍니다.

main.js가 파일 이름 그대로 메인 파일입니다. node.js 언어로 되어 있으며, 현재는 그다지 복잡한 상태가 아니므로 내용을 잠깐 보면 윈도우를 생성하고, 같은 디렉토리에 있는 index.html 파일을 불러오는 기능을 수행합니다.

render.js는 현재는 아무런 내용이 들어가 있지 않습니다. index.html 파일을 렌더링하기 위해 필요하며, 추후에 좀더 많은 코드들이 입력될 예정입니다.

index.html은 윈도우 내부에 보여질 내용을 나타냅니다. HTML로 구성되어 있죠. 보시면 웹페이지를 만들때처럼 html – head -body 등의 내용을 보실수 있습니다.

지금은 없지만, 내부의 디자인은 style.css 파일을 이용하여 구성할 수 있습니다.


 

참 쉽죠? 이제 좀더 복잡한 프로그램을 만들어보도록 하겠습니다.

Leave a Reply