윈도우즈에서 일렉트론-뷰 데스크탑 어플리케이션 개발하기 1

2020/04/16 - [Development] - 윈도우즈에서 일렉트론-뷰 데스크탑 어플리케이션 개발하기 1

2020/04/20 - [Development] - 윈도우즈에서 일렉트론-뷰 데스크탑 어플리케이션 개발하기 2

 

사내 프로젝트 진행 중 UI를 갖춘 데스크탑앱이 필요한데 윈도우즈(Windows), 맥(Mac), 리눅스(Linux)를 모두 지원하는 형태로 만들어야 한다고 한다. 크로스 플랫폼(cross-platform)이 가능한 app은 예전에 wxWidget을 이용하여 만들어 본 적도 있긴 하지만 뭔가 UI component들이 맘에 들지 않았고, 원하는 기능을 지원하지 않는 등의 제약사항도 있었더랬다. 그리고, 배포를 위해 각 플랫폼 별로 앱을 생성하는 것도 좀 불편했었다.

그래서 이번에는 당시에도 한 번 고려했었다가 일정상 포기했었던 일렉트론(electron) 앱을 제작해 보는 것으로 결정하였고 나중에 혹시 또 필요하게 될까봐 좌충우돌 삽질기를 기록해 놓는다.

(일단 현재로서는 이런 류의 앱이 어떤 구조를 가지고 있고, 어떤 엔진 혹은 동작 환경이 필요하고, 어떤 장단점이 있는지 등등은 제쳐두기로 한다. 지금으로서는 cross-platform을 만족시키는 것만이 최우선과제라...ㅡㅡ;;)

 

언제나처럼 일단 레퍼런스를 찾아본다. 공식 문서를 모두 읽어보고 시작하기엔 시간이 여의치 않으니...ㅡㅡ;; 일단 구글링을 통해 가능한 최신의 제작기, 개발기 등을 조사해 보고 삽질 시작.

 

기본 형태의 application(보통 boilerplate라고 하는)을 화면에 띄우는 것까지는 성공했으니 일단 여기까지의 개발환경 셋업 및 앱 실행방법에 대한 내용을 정리해 보자.

 

1. Node.js 설치

기본적으로 Node.js는 설치되어 있어야 한다. 때문에 아래 사이트에서 사용하고 있는 OS에 맞는 설치파일을 받아 인스톨하면 끝.

(설치과정은 어려울 것 없으니 생략~)

https://nodejs.org/ko/

Node.js

난 윈도우즈에서 개발하고 있는 중이니까 명령 프롬프트를 실행하여 npm과 node의 버전을 확인해 보면,

위와 같은 식으로 설치 유무를 확인해 볼 수 있겠다.

 

2. yarn 설치

이건 또 뭔가?? 우리가 데스크탑앱을 만들던, 모바일앱을 만들던 혹은 웹앱을 만들던 우리는 많은 라이브러리 파일 혹은 프로젝트들을 활용하게 된다. 그리고, 우리가 가져다 쓰는 라이브러리들 또한 많은 수의 다양한 다른 라이브러리를 이용하여 만들어지는 구조이다 보니 이것들을 일일이 다 추적하여 어떤 라이브러리들이 사용되었는지 하나하나 다 명시를 해 주기가 불가능한 지경에 이르게 된 것이다. 그래서 여러 똑똑한 선구자들이 각 플랫폼 혹은 개발환경에 맞는 자동화 툴 같은 것을 만들기에 이르렀고, yarn 또한 그런 역할을 해 주는 package manager라 하겠다. 하지만, 우린 이미 1번에서 node.js를 설치하면서 npm이라는 node package manager를 설치하였다. 그런데 왜 yarn을?? 아직은 둘 사이에 어떤 장단점이 있는지 나도 정확히 잘 모르겠다...^^; 그냥 여러 글들을 보니까 yarn이 빠르다더라. 일단 급하니까 각각의 비교나 각 툴의 역사에 대한 내용은 나중에 한가해 졌을 때 찾아보는 걸로...ㅎㅎ

설치는 npm이 있으니까 간단하게~

위 그림처럼 'npm install -g yarn'으로 해 주면 된다.

 

3. Vue-CLI 설치

이제 얼마 안남았다. 일렉트론 앱을 만들건데 여기서 UI에 관련된 부분을 fancy~하게 만들어 주는 framework이 몇 가지 있다. Vue, React, Angular라고 하는 것들이 있는데 나는 당연히 이것들에 대해 잘 모른다. 왜?? 개발해 본 적이 없으니까...ㅡ,.ㅡ; 이 중에서 어떤 것을 선택해야 하나 구글링하면서 고민을 좀 해 봤는데 혼자 개발하면서 북치고 장구치고 하기엔 vue가 낫더라는 의견들이 있더라.

https://joshua1988.github.io/web-development/translation/why-we-moved-from-angular2-to-vuejs/

Angular 2 대신에 Vue.js를 선택한 이유 (그리고 React를 선택하지 않은 이유)

일단 이 vue를 활용할 수 있는 툴을 설치해 본다.

https://cli.vuejs.org/

Vue CLI

이것도 설치는 npm을 이용한다. 위 사이트에도 나와 있듯이 'npm install -g @vue/cli' 해 주면 된다.

설치하고 버전체크 해 보면 위와 같인 '4.3.1'이라고 나온다.

 

4. 프로젝트 생성 및 실행

이제 일렉트론뷰 앱을 만들기 위해 프로젝트를 생성하고 실행시켜보자. 기본적인 프로젝트 생성은 다 알아서 해 준다. 이걸 베이스로 필요한 기능을 넣고 빼고 하면 될테니 생산성이 높다고 하는 거겠지?

순서대로 가 보자.

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

Creating a Project | Vue CLI

요기 나와 있는대로 'vue create hello-world'한다.

엔터치고 나면 화면이 바뀐다. 유저가 설정해 줘야 하는 것이 있기 때문에......

화살표 키를 이용하여 위, 아래 위치를 바꿀 수 있는데 'Manually select features'를 선택한 다음 아래와 같이 구성해 준다.

(feature 선택은 스페이스바를 눌러서~ 엔터 누르면 다음 단계로 넘어간다.)

그 다음은 'history mode'를 사용할 건지 물어보는데 yes/no 중에서 선택하면 된다. 잘 모르면 default로~

(그림처럼 '(Y/n)'로 물어보는데 대문자로 표시된 대답이 default이다. 즉, 그냥 엔터를 누르면 대문자로 표시된 대답이 선택된다는 거~)

그 다음은 'ESLint + Standard config'를 선택. 화살표키를 눌러 지정해 주면 된다.

이 다음 항목들은 모두 default로...엔터~ 엔터~ 엔터~

그러고 나면 이제 자동으로 뭘 계속 설치를 하는 과정이 나온다.

암것도 안 했는데 벌써 만들어진 사이즈가 90MB가 넘어간다. 후아.......

 

자, 일단 여기까지 설치가 완료 되었다. 프로젝트가 생성이 되긴 했는데 사실 여기는 vue를 이용하는 프로젝트일 뿐이다. 무슨 말인고 하니, 아직 우리가 원하는 데스크탑앱은 아니라는 의미. 그래서 생성된 디렉토리로 이동하여 'yarn serve' 해 보면 웹앱이 실행되는 것을 확인해 볼 수 있다. 브라우저에서 돌아가는 application 인 것이다.

웹브라우저에서 'http://localhost:8080'으로 접속해 보면,

요런 화면을 볼 수가 있다.

 

데스크탑앱으로 만들어 보자.

'vue add electron-builder'로 일렉트론 관련 패키지들을 추가해 준다.

그런데, 일렉트론 버전을 선택할 때 6.0.0으로 선택을 했더니 다운로드 중에 계속 오류가 나더라. warning message처럼 뭔가 문제가 있는 듯...

('ECONNRESET' 에러가 난 것으로 보아 단순히 네트워크 문제였던 것 같다. 몇 주 지난 후 다시 해 보니 6.0.0을 선택하여도 잘 되더라.)

그래서 5.0.0버전으로 선택을 하여 다운로드를 진행했고 별 문제 없이 잘 완료가 되었다.

 

이어서 'vue add vuetify'로 vuetify를 설치해 준다.

 

일단 기본적인 구성은 끝났다. 시험삼아 실행을 해 보자면~ 'yarn electron:serve'

'yarn electron:serve'는 개발용, 'yarn electron:build'는 배포용 되시겠다.

기본 환경 구성은 일단 끝.

 

2020/04/20 - [Development] - 윈도우즈에서 일렉트론-뷰 데스크탑 어플리케이션 개발하기 2