본문 바로가기

What would life be If we had no courage to attemp anything?

Development/Electron8

[Electron] electron앱 화면이 랜더링이 되지 않는 문제 문제점 2023.06.17 - [Development/Electron] - [Electron] SyntaxError: Cannot use import statement outside a module 위의 오류를 해결 후 electron앱을 실행했을 때, electron 앱은 켜지지만 화면이 랜더링 되지 않는 상태가 발생. 해결과정 Failed to compile. Module not found: Error: Can't resolve './App' in 'D:\\2023\\march\\realPractice\\login\\src' Did you mean 'App.js'? BREAKING CHANGE: The request './App' failed to resolve only because it was r.. 2023. 6. 18.

[Electron] SyntaxError: Cannot use import statement outside a module 오류 다음과 같은 오류들이 뜨면서(경고창) electron 앱이 실행되지 않음. (node:29788) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `electron --trace-warnings ...` to show where the warning was created) App threw an error during load D:\\2023\\march\\realPractice\\login\\public\\electron.js:1 import * as operator from './script/operator.js' ^^^^^^ SyntaxError: Canno.. 2023. 6. 17.

[Electron] ipcRenderer.invoke & ipcMin.handle IpcRenderer.invoke 💡 Electron에서 주로 사용되는 메서드 중 하나. ipcRenderer 객체는 렌더러 프로세스에서 사용되며, 주로 메인 프로세스와의 비동기적인 통신을 위해 사용. ipcRenderer.invoke는 메인 프로세스에 비동기적인 요청을 보내고 결과를 받기 위해 사용. 이 메서드는 Promise를 반환하며, 메인 프로세스에서 처리되고 완료된 후에 Promise 결과가 렌더러 프로세스에 전달. ipcRenderer.invoke 를 사용할 때는 메인 프로세스에서 해당 요청을 처리할 때 ipcMain.handle을 사용하여 요청을 처리하고 결과를 반환 예제 // 렌더러 프로세스에서의 예제 코드 const { ipcRenderer } = require('electron'); a.. 2023. 6. 15.

[Electron] dialog.showOpenDialog() dialog.showOpenDialogSync() 💡 Electron 프레임워크에서 제공되는 메서드 사용자에게 파일 선택 대화 상자를 표시하고 파일을 선택할 수 있음 주로 메인 프로세스에서 사용 사용 예시 const { dialog } = require('electron'); // 파일 선택 대화 상자 옵션 설정 const options = { title: 'Open File', // 대화 상자 제목 defaultPath: '/path/to/default', // 기본 경로 buttonLabel: 'Open', // 확인 버튼 레이블 filters: [ { name: 'Text Files', extensions: ['txt'] }, // 파일 필터 { name: 'All Files', extensions.. 2023. 6. 15.

[Electron] electron 아이콘 넣기 //디렉토리에 아이콘 파일을 넣은 뒤 설정 //electron.js - 메인프로세서 파일 const {app, BrowserWindow,ipcMain} = require('electron') const path = require('path') // const fs = require("fs"); function createWindow () { const mainWindow = new BrowserWindow({ width: 528, height: 791, resizable:false, //size 고정 useContentSize :true, //가운데 설정 center:true, //앱 실행시 윈도우를 화면 정중앙에 위치 **icon:path.join(__dirname,'[로고 path]'), //일렉트론.. 2023. 1. 25.

[Electron] Electron + React 연동하기 1. React에 electron 적용하기 https://2ssue.github.io/programming/electron-react/ #create-react-app후 electron 집어넣기 npm init npm install create-react-app --save npx create-react-app {project_name} cd {project_name} npm install electron --save-dev 디렉토리 구조 {project_name} ├── public # 정적 파일. react를 사용하기 때문에 특별히 변경할 내용은 없다. ├── src # javascript 파일. react routing, electron로딩 등의 작업을 진행. │ ├── App.js │ ├── in.. 2023. 1. 13.

[Electron]Electron-forge Publishing a GitHub release Electorn-Forge electron forge는 publisher 플러그인 Github access token 생성하기 electorn forge는 github permission 없이 어떤 repository에도 publish 할 수 없음 Forge의 github releases 허가를 위해 authenticated token이 필요함 가장 쉬운 방법은 public_repo와 함께 PAT를 생성해 public repo에 접근해 쓸 수 있게 함 발급 받은 비밀로 유지되어야만 함! forge에서 github publisher 세팅하기 먼저 forge의 github publisher 설치 npm install --save-dev @electron-fo.. 2023. 1. 12.

[Electron]Electron Electron 이란? 💡 - JavaScript, HTML 및 CSS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크 Chromium 과 Node.js 를 바이너리에 내장 Electron을 사용하면 하나의 JavaScript 코드 베이스를 유지하고 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있음 핵심 구성 요소 💡 프론트엔드 : 크로미움 백엔드 : 노드JS 크로미움 렌더링 라이브러리를 노드JS와 결합 - V8을 공유 △오픈소스 웹브라우저 크로미움(Chromium) △브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 노드JS △오픈소스 자바스크립트 엔진 V8 활용 사례 Atom Editor VScode Slack 장점 낮은 진입 장벽 JavaSc.. 2023. 1. 11.

이전 1 다음

티스토리툴바