[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

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