Vuetify + Electron 사용하기
요즘 프론트엔드 라이브러리의 인기가 상당합니다.
페이스북에서 이끄는 React, 타입스크립트 기반의 Angular2, 항상 떠오르는 신예 취급을 받는 Vue.js 등의 라이브러리가 많은데요.
저는 Pure Javascript + Electron을 통해 데스크탑 어플리케이션 작업을 하고 있었는데, Single-Page Application (SPA)로 구성하지 않았던 앱을 SPA로 변경하려니 상당히 어려움이 많았습니다.
자바스크립트에서 SPA를 구현하려면 직접적으로 DOM을 건드려주기도 해야하구요.
그래서 SPA 관련해서 정보를 찾아보니 React, Vue.js 등의 프론트엔드 라이브러리에 관한 정보가 많이 나와 프론트엔드 라이브러리를 사용해보고,
라이브러리를 사용하는 게 더 괜찮으면 코드를 다 엎은 뒤 라이브러리를 사용하는 쪽으로 건너가려고 합니다.
처음에는 React를 사용해봤는데, 상당히 좋은 라이브러리인데 아무래도 추가적으로 배워야 하는 게 많았습니다.
특히 JSX에 관한 부분이 그랬습니다. 코드가 더러워 보이기도 하구요.
이 글에는 제가 Vue.js를 공부하면서 배운 것들을 적어보려고 합니다.
Vue + Electron 개발을 찾아보니, Vuetify.js라는 라이브러리가 나와 해당 라이브러리를 이용해 개발해 보겠습니다.
설치
당연하지만, 개발하려면 우선 설치가 필요합니다.
Vue.js 공식 사이트에서는 CDN에서 Vue.js를 가져와 사용하는 것을 추천하고 있는데,
저는 웹 어플리케이션이 아니라 데스크톱 어플리케이션을 개발하기 때문에 설치 후 작업이 필요했습니다.
우선 yarn 이라는 패키지 매니저를 설치하겠습니다.
보통 자바스크립트 패키지 매니저는 npm을 주로 사용하는 데, npm의 단점을 해결하기 위해 페이스북, 구글등의 엔지니어 그룹이 협력해서 만든 패키지 매니저라고 합니다. 보다 빠르고 안정적이라고 주장하고 있네요. 우선 설치해보겠습니다, npm이 필요합니다.
npm install --global yarn해당 명령어를 통해 yarn의 설치가 가능합니다.
그 다음, yarn을 통해서 Vue CLI를 설치하겠습니다.
yarn global add @vue/cli그 다음 프로젝트를 생성하겠습니다.
프로젝트 이름은 vueapp으로 하겠습니다.
vue create vueapp
cd vueapp이제 Vuetify를 설치하고, 서버를 시작해보겠습니다.
vue add vuetify
yarn serve서버가 시작된 뒤, 나오는 주소로 접속해보면
이런 화면을 볼 수 있습니다.
이제 이 App을 Electron으로 띄워봐야겠죠?
저는 vue-cli-plugin-electron-builder를 이용해서 만들어보도록 하겠습니다.
vue add electron-builder
yarn serve:electron커맨드라인에서 실행하시면,
이런 식으로 Electron으로 뜨는 걸 볼 수 있습니다.
더 자세한 설명은 다음 게시글에서 하겠습니다.
읽어주셔서 감사합니다.