JavaScript/Electron (6) 썸네일형 리스트형 [Electron] Electron이란 Electron이란? Electron은 JavaScript, HTML 및 CSS와 같은 웹 기술을 사용하여 데스크톱 애플리케이션을 만들기 위한 프레임워크입니다. (데스크탑 어플리케이션은 보통 해당 OS에서 제공하는 언어와 환경을 이용해서 제작합니다. Windows의 경우 C#이나 C++ 등을 이용해서 만들고, macOS의 경우 Objective-C나 Swift 등을 이용해서 만들게 됩니다.) 웹사이트를 구축할 수 있다면 데스크톱 앱을 구축할 수 있습니다. Electron을 사용하면 하나의 JavaScript 코드베이스를 유지 관리하고 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있습니다. 어려운 부분(Automatic updates, notifications 등)을 .. [Electron] Vue 기반 보일러 플레이트로 일렉트론 앱 빌드하기(Electron-Vue) 안녕하세요😊 지난 포스팅에서 VCP Electron Builder 보일러 플레이트를 이용하여 Vue Cli 기반의 Electron 앱을 구성하고 빌드하는 과정을 소개했었습니다. 프로젝트를 시작하기에 앞서 다른 보일러 플레이트도 비교를 해봐야 할 것 같아, 그전부터 봐왔던 Electron-Vue 보일러 플레이트를 이용하여 프로젝트를 구축해보았습니다. Electron-Vue도 아주 간단하게 프로젝트를 스케폴딩할 수 있었는데, 그 과정을 소개해보겠습니다. Vue Cli 설치 아래 명령어로 vue-cli를 전역에 설치해줍니다. npm install -g vue-cli 그리고 vue init 명령어를 이용하기 위해서는 아래 명령어로 추가 모듈을 설치해줍니다. npm i -g @vue/cli-init electro.. [Electron] Vue-Cli 기반 프로젝트로 Electron 앱 빌드하기(Vue CLI Plugin Electron Builder) 안녕하세요☺️ 지난 포스팅에서 Electron-Builder를 이용하여 일렉트론 앱을 Windows 용으로 빌드하는 내용을 설명했었습니다. 가이드 문서를 읽어보던 중 Electron-Builder에서 Vue-Cli를 기반으로 한 빌드 방법을 제공하는 보일러 플레이트가 있다고 공유를 드렸는데요, 오늘은 해당 보일러 플레이트를 적용해보려고 합니다. Vue-Cli를 이용하여 Vue 프로젝트 생성 다음은 Vue-Cli를 이용하여 Vue 프로젝트를 스케폴딩하는 명령어입니다. 저는 vue-cli-plugin-electron-builder-app이라는 프로젝트를 생성하였습니다. vue create vue-cli-plugin-electron-builder-app # vue create vue-cli-plugin-ele.. [Electron] Windows 용 데스크탑 앱 패키징 및 배포하기(electron-build) 안녕하세요😊 지난 포스팅에서 electron-forge 모듈을 이용해서 Mac 용 일렉트론 앱을 빌드하는 내용을 간단하게 설명했었습니다. 저의 1차 데스크톱 앱 출시는 Windows OS를 목표로 하고 있기 때문에 Windows에서 실행할 수 있는 데스크톱 앱을 빌드하는 법을 설명해보려고 합니다. 아직 개발 시작단계기 때문에 상세한 옵션 설정없이 정말 기본적인 옵션만 추가하여 빌드되는 과정만 정리해볼 예정이니 참고 부탁드립니다. 일렉트론 앱의 빌드 도구로 공식 사이트에서는 3가지를 소개하고 있습니다. electron-forge electron-builder electron-packager 이 중 첫번째 빌드 도구인 electron-forge는 지난 포스팅에서 설명드린 것처럼 Windows용 빌드를 지원하.. [Electron] Mac/Linux 용 데스크탑 앱 패키징 및 배포하기(electron-forge) 지난 포스팅에서 간단한 Electron 프로젝트를 생성하여 실행을 해보았습니다. 오늘은 전에 만든 앱을 패키징 해서 배포하는 과정을 정리해보려고 합니다. 가장 간단하게 배포할 수 있는 방법으로는 electron-forge 모듈을 사용하는 것인데요, 이 경우에는 Mac과 Linux 용 앱으로만 배포가 가능합니다. Windows 용 앱 배포 방법은 다음 포스팅에 진행할 예정이니 참고 부탁드려요😀 1. Electron Forge를 앱의 개발 종속성으로 추가 npm install --save-dev @electron-forge/cli 2. Forge의 스캐폴딩을 설정 npx electron-forge import 3. Forge의 make 명령을 사용하여 배포 파일을 생성 npm run make 명령어를 실행하.. [Electron] 간단한 Electron 프로젝트 띄워보기 최근에 개인적으로 데스크톱 앱을 만들어보고 싶어서 사전 조사를 시작했습니다. 제가 생각하고 있는 구조는 Electron + Vue.js를 함께 사용하는 방식인데, 본 프로젝트 시작 전 Electron의 구조를 어느 정도 알고 시작하는 게 좋겠다는 생각이 들었어서 먼저 Electron 공식 가이드의 Quick Start 문서를 따라 간단한 프로젝트를 생성하고 실행해보는 과정까지만 진행해보려고 합니다. Electron 앱은 다른 Node.js 프로젝트와 동일한 일반적인 구조를 가집니다. 그래서 일반적인 Node 프로젝트를 생성하는 방식과 유사하여 기존에 Node.js를 이용한 프로젝트를 진행한 경험이 있으시다면 쉽게 따라 하실 수 있을 것 같습니다😊 사전 준비 Electron을 이용하기 위해서는 Node.j.. 이전 1 다음
