• 개요
  • 포스트
  • 시리즈
  • 소개

Electron : Icons

아이콘 설정시 기존 자료들이 하라는대로 시도했지만 원활히 동작하지 않았다. 우선 여기서 사용중인 Electron + React 리포의 구조를 살펴보면 public에 electron의 코드가 포함되어 있다는 것을 감안했어야 하는데 그렇지 않아서 겪은 문제다. - [D] public - [D] assets - [F] main.js - [F] favicon.png - [D] icons - [D] win - [F] …

2020년 4월 24일 · 1 min read

Electron : Build

필자가 사용하는 Electron React Example 리포에선 이미 빌드 명령어가 만들어져 있는 상태라 npm run build 명령어를 치면 dist에 빌드된 파일이 생성된다. 설치 파일까지 알아서 생성된다(이건 일렉트론에서 기본적으로 해주는 듯) x64 기반으로 빌드가 진행되는데 차후에 아키텍처 별로 빌드가 필요한 상황이 온다면 더욱 상세하게 내용을 알아보고 여기에 추가하도록 할 예정이다. 우선 기본 …

2020년 4월 24일 · 0 min read

Electron : Native Node Module

일렉트론에선 분명히 노드 모듈을 사용할 수 있다고 명시되어 있었는데 막상 패키지를 설치하여 실행해보니 아래와 같은 에러가 발생했다. 문서를 살펴보니 재빌드가 필요하다고 한다. https://www.electronjs.org/docs/tutorial/using-native-node-modules 필자는 가장 간단한 방법으로 보여지는 '모듈을 설치하고 Electron용으로 다시 빌드하기'를 선택하였다. 윈도우와 맥에서 각각의 선행 작업이 필요하다. Windows Visual Studio 설치 Python 설치 위 작업을 마무리하고 아래 …

2020년 4월 24일 · 1 min read

Electron : Shell

Electron에는 shell이라는 라이브러리가 있다. 이 shell을 이용해 OS에 설정된 브라우저로 특정 주소를 띄우거나 파일 탐색기로 특정 위치에서 실행할 수 있다. 사용 방법 // MAIN 에서 호출시 const { shell } = require('electron') // Renderer 에서 호출시 // const { shell } = require('electron').remote //폴더 이름 const FOLDER_PATH = 'temp' shell.openExternal(FOLDER_PATH) …

2020년 4월 20일 · 1 min read

React : 상태 관리

데이터 추가하기 class App extends Component { id = 2 state = { information: [ { id: 0, name: '배진오', phone: '010-0000-0000' }, { id: 1, name: '홍길동', phone: '010-0000-0000' }, ] } handleCreate = (data) => { const { information } = this.state; this.setState({ information: information.concat({ id: this.id++, ...data, …

2020년 2월 18일 · 4 min read

React + Electron : 이벤트

Send const { ipcRenderer } = window.require("electron"); class App extends Component { ... btnClick = () => { ipcRenderer.send('button-click'); } render() { ... return ( <button onClick={this.btnClick}></button> ) ... } } Electron에서는 Electron : 이벤트와 마찬가지로 이벤트를 처리해주면 된다! On const { ipcRenderer } = window.require("electron"); class App extends Component …

2020년 2월 17일 · 2 min read

React + Electron : Example

이 프로젝트에선 yarn을 사용하고 있는데 npm을 사용할 수 있겠지만 그냥 다운받았다. https://yarnpkg.com/lang/en/ git clone https://github.com/kitze/react-electron-example cd react-electron-example yarn yarn start 위 명령어를 콘솔에 입력하면 다음과 같은 창을 만날 수 있다! 어떤 원리로 돌아가는가 보았더니 mainWindow.loadURL( isDev ? "http://localhost:3000" : `file://${path.join(__dirname, "../build/index.html")}` ); 개발중에는 React와 마찬가지로 3000번 포트에 올려서 Electron도 그 …

2020년 2월 12일 · 0 min read

Electron : 이벤트

커스텀 이벤트를 만들어 보기 위해서 index.html에 다음과 같은 버튼을 추가하고 웹사이트를 만들때 처럼 직접 onclick을 넣었더니 오류가 발생했다. <button onclick="btnClick()">click here</button> 무조건 다음과 같이 해야하나 보다. <button id="mainButton">click here</button> var mainButton = document.getElementById('mainButton'); mainButton.addEventListener('click', function() { alert('btn click!') });

2020년 2월 12일 · 0 min read

Electron : 통신

통신은 Main의 ipcMain과 Render의 ipcRenderer를 통해서 진행된다. 기존 튜토리얼에선 별다른 설정없이 Render에서 다음 라이브러리를 호출하는 것 같으나 상위 버전에선 불가능하여 찾아보니 BrowserWindow를 생성할 때 다음과 같은 Preferences를 생성해야 한다. webPreferences: { nodeIntegration: true } 이후 Main에서 const { ipcMain } = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { console.log(arg); event.sender.send('asynchronous-reply', 'pong') …

2020년 2월 12일 · 1 min read

Electron : 기본 기능

Notification 윈도우10의 경우 좌측에 알림 메세지가 출력되는 것을 의미한다. renderer.js에 다음과 같은 내용 추가하면 사용할 수 있다. let myNotification = new Notification('Title', { body: 'Lorem Ipsum Dolor Sit Amet' }) // 이건 알림을 클릭했을 때 발생하는 이벤트 myNotification.onclick = () => { console.info('Notification clicked') } Prograss 윈도우의 경우 하단에 아이콘에 …

2020년 2월 12일 · 0 min read