Framework/Electron

다중 접속 편집 기능을 만들기 위해 소켓을 사용해보고자간단한 채팅을 만들어보려고한다. 로그인 후, 사용자가 채팅방을 입력하면 새로운 윈도우에 채팅방을 열어준다. 첫 번째 메인 윈도우를 닫으면 모든 윈도우를 닫아버릴지 고민하다가.레퍼런스는 카카오톡으로 잡았으며, 채팅창이 열린 상태에서 메인 윈도우(채팅창 관리 윈도우)가 꺼져도 채팅창은 살아있다. 위 내용을 보면❓소켓만 테스트하지 왜?질문을 할 수 있지만, 나는 뭔가 완벽함(?)을 추구하여서 하나를 만들더라도 제대로 만져보고싶다. 🏗️ WindowManager우선 윈도우를 관리하기 위해서 매니저를 만들어준다. 내가 만든 매니저의 인터페이스는 다음과 같다.글을 안 보고 직접 구현해보고 싶은 사람은 인터페이스를 보고 직접 구현해보아도 좋다.export ..

나만의 데스크 앱을 만드려는데 고전적인 스타일의 상단 타이틀 바가 마음에 들지 않는다. Youtube Music의 데스크탑 앱만 보더라도 뭔가 다양하다. ( 유튜브 대기업 치고는 못 생긴 거 같다...) 우리도 커스텀해보자. 🗑️ 타이틀바 프레임 제거 우선 기존 TitleBar는 사라지도록 📄electron/main.ts 에서 웹 브라우저가 생성될 때 타이틀바와 메뉴바가 없는 상태로 변경한다.unction createWindow() { win = new BrowserWindow({ icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"), webPreferences: { preload: path.join(__dirname, ..

⚙️구조Electron-vite 프로젝트를 설치하면 다음과 같이 폴더가 구성된다.🏭 메인 프로세스📄electron/main.ts import { app, BrowserWindow } from 'electron'import { createRequire } from 'node:module'import { fileURLToPath } from 'node:url'import path from 'node:path'✅ app : Electron앱의 생명주기 제어✅ BrowserWindow: 창(윈도우) 생성 클래스✅ createRequire/fileURLtoPath: ES Module 환경에서 __dirname, require 사용을 위한 설정 process.env.APP_ROOT = path.join(__di..

기존 작업하던 프로젝트에서 일렉트론을 적용하고 싶은 분들은제 velog electron을 참고해주세요. [ Electron ] 로컬에서 일렉트론 실행[ Electron ] 로컬에서 일렉트론 실행에 대해 알아보자velog.io 작성자는 vite와 electron을 사용할 것이므로 한 번에 설치할 것이다. ⬇️ 설치npm create electron-vite 다음 명령어를 입력하여 프로젝트를 생성한다. > npx> cev .? Project tempalte: // 원하는 템플릿 선택> Vue> React> VanillaScaffolding Project in Done. Now run: 원하는 템플릿을 설정하면 준비는 끝난다. 폴더에 접근하여npm install을 통해 필요한 모듈들을 다운 받아준다. 🏃?..

⚡Electron이란?Electron(이하, 일렉트론)은 웹 기술(HTML, CSS, JavaScript)을 이용하여 데스크톱 어플리케이션을 만들 수 있는 오픈 소스 프레임워크이다.Chrome 기반의 렌더러 + Node.js 런타임을 묶어 제공하므로 웹 개발자는 별도의 언어를 배우지 않고도 데스크탑 앱을 만들 수 있다. 공식 홈페이지에는 다음과 같이 정리되어 있다.⚙️ 구조🏭 Main Process앱의 생명주기, 메뉴, 파일 시스템 접근 같은 네이티브 기능을 관리한다. 🎨 Renderer ProcessChrominum 기반으로 돌아가는 UI 영역 (웹 페이지처럼 동작)즉, "Node.js + 웹브라우저 엔진을 함께 번들링한 데스크톱 앱 런타임"이라고 보면 된다. 👍🏻 장점✅ 웹 기술만으로 Wind..