반응형 Electron7 Electron 앱의 창 위치 및 크기 기억하기 Electron 앱 구현 튜토리얼의 잘 알려진 예제들은 창의 크기나 위치를 복원시키는 코드를 대부분 알려주지 않는다. 필요하다면 알아서 구현해야 한다는 말인가? 다행히도 찾아보니 electron-window-state라는 패키지를 사용하는 방법이 가장 간단할 것 같아서 이용해봤다. 패키지 설치하기 여타 Node.js 패키지들처럼 NPM이나 Yarn을 이용해 설치할 수 있다. yarn add electron-window-state # or npm install --save electron-window-state 런타임에 사용되는 패키지이기 때문에 개발 의존성(--save-dev 등)으로 설치하면 안 된다는 점에 주의하자. 패키지를 설치한 후 이제 몇몇 코드를 구현해야 한다. 코드 구현하기 공식 깃헙 저장소.. 2022. 4. 2. Electron에서 타이틀 바 숨기기 및 창 이동 문제 최근의 macOS 앱들은 전통적인 타이틀 바 대신 타이틀 바 영역까지 툴바나 콘텐츠로 꽉꽉 채우는 것이 유행인 것 같다. 개인적으로도 이런 디자인이 유려하고 쓸모가 많은 것 같아 선호하기도 한다. 물론 이런 형태를 Electron에서도 구현할 수 있다. macOS에 어울리는 타이틀바 숨기기 아주 간단하다. 아래와 같이 BrowserWindow 생성 시 titleBarStyle을 hiddenInset으로 설정하면 타이틀 컨트롤만 남고 타이틀바 자체는 사라진다. window = new BrowserWindow({ ... titleBarStyle: 'hiddenInset', ... }); 타이틀 바에 있던 닫기나 풀스크린 버튼 등의 컨트롤과 기능은 그대로 남기 때문에 타이틀바 영역을 원하는 대로 꾸밀 수 있다.. 2022. 2. 6. Electron의 app 정보를 얻기 위한 삽질기 개인적으로 Electron으로 공부 겸 사이드 프로젝트를 시작하고 있었다. 그 과정에서 앱의 데이터를 데이터베이스에 저장하기 위해 몇 가지 정보를 찾아보다 데이터베이스 파일을 저장할 위치에 대해서 정해야 할 시기가 왔다. 즉 앱 데이터 저장 디렉터리를 알아내기 위함이 이번 여정(?) 목적이다. 참고로 사용한 Electron은 현시점에서 가장 최신 버전인 16.x 버전이다. 목표는 userData 방법은 구글링 과정으로 쉽게 알아내었다. Electron에서 제공하는 app 인스턴스의 getPath 메서드를 통해 여러 디렉터리 정보를 얻을 수 있고 이 중에 userData가 내 목적에 딱 맞는다는 것이었다. 참고로 appData도 있지만 이건 앱 전용 디렉터리가 아니라 이 앱 정보 디렉터리를 모아두는 디렉터.. 2022. 1. 30. Electron에서 iframe 사용하기(?) Electron에서 iframe 태그를 사용할...수 없다.이 무슨 시작부터 글 제목이랑 반대되는 이야기를 하는 건가 싶을 텐데, 사실 Electron이 보안상의 문제로 iframe을 이용한 외부 사이트 접근을 기본적으로 차단하고 있다고 보면 된다. 외부 사이트에서 내 로컬에서 돌아가는 Electron 앱의 node.js 환경을 그대로 사용할 수 있게 되기 때문이다.물론 대안은 있다iframe 대신 사용할 수 있는 대안으로 Electron은 webview 태그를 지원한다. 별도의 크로미움 프로세스로 동작하는 웹 뷰를 앱 내부에 넣을 수 있게 해주는 마법이다.그런데 이 webview는 기본적으론 비활성화 상태이기 때문에 우선 설정에서 열어줘야 한다. Electron 앱의 시작 스크립트에서 BrowserWi.. 2022. 1. 23. Electron + Svelte로 데스크톱 앱 개발 시작해보기 개인 프로젝트를 여러 방식으로 해보다 Electron을 이용해볼까 하는 약간의 욕심이 생겼다. 그래서 공부를 하던 중 웹 UI 프레임워크를 알아두면 좋을 것 같아서 찾아보다 Svlete의 평이 좋을 것을 보고 이것을 이용해 앱 개발을 시작해 보려고 했다. 이 글은 개발 환경을 셋업 하면서 검색했던 자료들과 함께 개인적으로 겪은 약간의 삽질의 결과가 섞여있다.Svelte 프로젝트 생성하기Electron은 웹 페이지를 로컬 크로미움을 통해 보여주는 용도이기 때문에 프로젝트의 시작점에는 맞지 않는다. 여기서는 Svelte 프레임워크를 이용해 웹 페이지를 구현할 것이기 때문에 Svelte 프로젝트로 시작한다.Svelte 프로젝트 템플릿은 npx로 간단하게 가져올 수 있었다.npx degit sveltejs/te.. 2022. 1. 16. 흥미로운 링크들 11월 1주차 지난 주도 뭔가 많았던 한 주 였군요.Highlights from Git 2.24Git 2.24 의 변화점을 정리한 블로그입니다. 사용성에 큰 변화는 없어보이네요.You Cannot Submit an Electron 6 (or 7) App to the Apple Store일렉트론(엘렉트론) 6, 7 버전으로 만들어진 앱들이 앱스토어 심사에서 거부되고 있다는 소식입니다. 사유는 non-public API를 사용했기 때문이라네요. 물론 비공개 API의 사용은 애플 측에서 충분히 거부할 만한 사유가 될 수 있습니다. 보안 등의 사유로 말이지요.다만 해당 버전만 문제인건지 일렉트론 전체를 거부하고 있는 것인지는 명확하진 않네요. 일단 관련 업데이트가 있나 지켜봐야 할 것 같습니다.자바스크립트의 메모리 모델제목대.. 2019. 11. 11. electron-vue에서 process를 못 찾는 문제 Javascript랑 ES6 공부 겸 일렉트론(elecron)으로 앱을 한번 만들어보고자 했습니다. 거기다 기왕 하는 김에 회사에서 사용하는 vue도 같이 사용해보면 좋을 것 같았습니다. 그래서 찾아보니 electron-vue라는 프로젝트 보일러 플레이트 생성해 주는 프로젝트를 발견했습니다. 목적에 맞는 게 있으니 당장 써보면 좋겠지요.우선 아래처럼 프로젝트를 만들어 봤습니다.$ npm i vue-cli -g$ npm i yarn$ vue init simulatedgreg/electron-vue my-project이것저것 귀찮게 물어오네요. vue-cli 쓸 때랑 묻는 게 비슷한 걸로 봐서 vue를 쓰면 어쩔 수 없는 숙명 같은 것일까요?yarn은 이 단계에서 꼭 필요한 건 아니지만 미리 설채해 두었을 .. 2019. 8. 3. 이전 1 다음 728x90 반응형
