[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 파일을 이용하여 구성할 수 있습니다.


 

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

[Electron] 개발 환경 설정

Screen Shot 2017-01-23 at 5.56.28 PM

Electron은 Chromium과 Node.js를 이용하여 구동됩니다. 따라서 HTML, CSS, Javascript를 이용하여 사용자가 앱을 만들수 있습니다. 게다가 한번 만들어놓은 앱은 Mac, Windows, Linux와 모바일 플랫폼에서도 동일하게 사용이 가능합니다. 한번 배워놓으면 괜찮을것 같아서 짬짬이 시간내서 배워두려고 합니다.

개발환경 구축하기

1. Node.js 설치

먼저 Node.js를 설치해야 합니다. 제가 사용하는 개발환경은OS X(10.12, Sierra)과 Ubuntu (16.04 LTS)입니다. OS X에서는 homebrew를 사용하고 있고, Ubuntu에서는 apt를 사용하여 설치합니다. 소스를 직접 가져다가 설치하거나 하는 번거로운 방법은 되도록이면 피하려고 합니다.

1.1 OS X

먼저 OS X 환경에서는 homebrew를 설치(설치하기)하고, 터미널에서 다음과 같이 입력하면 쉽게 설치가 가능합니다.

현재 최신버전은 7.4.0이지만, LTS 버전인 6.9.4를 사용하려고 하기때문에 위와 같이 입력하면 됩니다. 맨 뒤의 -v 옵션은 설치과정을 보여주는 것으로, 필요하지 않으시면 안쓰셔도 무방합니다. 이제 설치가 완료되고 다음과 같이 나오면 설치가 완료된 것입니다.  쉽죠?

 

1.2 Ubuntu

Ubuntu 16.04 LTS 버전에는 기본적으로 Node.js가 설치되어 있습니다. 다만, 그 버전이 좀 낮으므로 사용하고자하는 6.x 버전을 설치하기 위해서 다음과 같이 터미널에서 입력합니다.

역시 한방에 설치가 완료됩니다. ^^

 

2. Electron 설치 (npm 이용)

이제 Electron을 설치해봅니다. npm은 Node.js의 패키지를 관리하는 도구로 사용자가 어떤 패키지를 설치하고자 할때, 의존성있는 모든 패키지를 자동을 설치해 줍니다.  터미널에서 다음과 같이 입력합니다.

중간의 -g 옵션은 Node.js의 실행파일이 모든 사용자가 사용할 수 있도록 해주는 것입니다. 저 옵션이 없을 경우 사용자 폴더에 설치를 하게 됩니다. OS X에서는 homebrew를 이용해서 설치되는 /usr/local 위치가 사용자가 읽고 쓸수 있는 권한을 가지므로 sudo 를 붙이지 않아도 되지만, Ubuntu에서는 그렇지 않으므로 다음과 같이 앞에 sudo 를 붙여서 실행해줘야 합니다.

이제 설치가 완료되고, 다음과 같이 입력하면 Electron의 실행화면이 나옵니다.

Screen Shot 2017-01-23 at 5.51.49 PM

이제 개발환경 설정이 완료되었습니다.