JavaScript (22) 썸네일형 리스트형 [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용 빌드를 지원하.. [SonarQube] Consider using "forEach" instead of "map" as its return value is not being used here. 오늘 SonarQube에서 버그로 "Consider using "forEach" instead of "map" as its return value is not being used here." 이런 Warning이 발생되었다. 상세 설명을 보면 "Return values from functions without side effects should not be ignored" 룰에 걸린다. map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드인데, 반환되는 값을 사용하지 않고 있기 때문에 발생하는 에러였다. 배열에 담긴 값을 순회하면서 읽어와 가공하여 다른 배열에 저장을 해주려고 한 로직이었는데 forEach 함수 대신 map 함수를 사용해서 발.. [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.. [Vue.js] <input type="file"> 요소에 동일 파일 연속 선택 시, change 이벤트가 발생되지 않는 문제 해결 방법 안녕하세요. 최근에 드래그 앤 드롭 파일 업로드 기능을 추가하다가 파일 업로드 컴포넌트에 있던 오류를 발견해서 수정한 경험이 있어서 공유를 해보려고 합니다😀 오류 내용은 아래와 같았어요. 파일 업로드 오류 1. 파일A 선택 → 요소의 change 이벤트 발생 2. 파일A 삭제 3. 파일A 선택 → 요소의 change 이벤트 발생 안됨❗️ stackoverflow에 찾아보니, 같은 파일을 다시 선택할 경우 input value가 변경된 게 아니기 때문에 change 이벤트가 발생되지 않는 게 정상이라고 하더라구요. 해결 방법은 파일이 선택된 후 처리해줄 로직이 끝난 뒤에, input 요소의 value 값을 비워주면 된다고 합니다. 해결방법 input 요소의 value 값을 ''으로 초기화해주면, 같은 파일.. [Lodash] _.filter() 함수 설명 및 사용 예제/예시 구문(Syntax) _.filter(collection, predicate) 컬렉션(collection)의 요소를 반복하면서, 술어(predicate)에 대해 모든 요소가 참을 반환하는 새로운 배열을 반환합니다. 술어는 (값, 인덱스|키, 컬렉션)의 세 가지 인수로 호출됩니다. 참고: _.remove와 달리 이 메서드는 새 배열을 반환합니다. Iterates over elements of collection, returning an array of all elements predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection). Note: Unlike _.remove, .. [Lodash] Lodash란? Lodash 사용 사례 및 설치 방법 소개 안녕하세요. 최근에 프로젝트를 진행하면서, Lodash 함수를 많이 사용하게 되어서 이번 기회를 통해 Lodash 라이브러리에 대해 정리를 해보려고 해요. Lodash 카테고리를 새로 추가하였는데, 이번 글을 시작으로 자주 사용하는 Lodash 라이브러리의 함수들을 설명하는 포스팅을 하나씩 올려볼 예정입니다😉 Lodash란? 개발을 하다 보면 여러 페이지에서 사용해서 공통으로 사용해야 하는 함수들이 종종 있죠. 그런 경우 직접 함수를 구현해서 util 폴더에 추가해서 사용을 하기도 하는데요. 개발을 할 때 일반적으로 많이 사용하는 기능들을 굳이 회사마다, 개발자마다 일일이 개발을 한다면 그건 비효율 적이라고 볼 수가 있을 것 같아요. 그래서 이런 일반적인 유틸 함수들을 모아서 제공해주는 라이브러리가 Lo.. 이전 1 2 3 다음
