electron.js4

• 

  Electron에서 React의 특정 페이지를 로드하는 방법 오늘은 제가 electron.js와 react를 연동하는 어플리케이션을 만들면서 여러번 삽질했던 내용 중 하나인, react의 특정 페이지를 electron.js내에서 불러온 뒤 팝업시키는 방법에 대해 포스팅 해보겠습니다. 아래서도 언급하겠지만 hash router를 사용하는 것이 핵심입니다.    electron.js와 react를 연동하는 초기 세팅 방법에 대해서는 아래 링크를 참조하세요. electron.js와 react 연동하기  이후 나올 내용은 리액트와 Electron.js를 사용하여 특정 페이지를 팝업으로 띄우는 방법입니다.    1. React Router 설정우선 저희는 리액트에서 HashRouter를 사용해야 합니다.리액트에서 라우트를 설정할 때 HashRouter를 사용하여 다음과 같.. 개발 이야기/frontend 2024. 8. 6.

• 

  Electron.js에서 HTTP 대신 TCP 서버 사용하기 Electron.js에서 HTTP 서버가 아닌 TCP 서버로 구동할 필요성이 생겼습니다. 이에 Electron.js에서 TCP 서버를 어떻게 연결하는지에 대한 순서 및 TCP 서버의 개념을 정리해보려고 합니다. 이 글은 TCP 서버의 기본 개념부터 시작하여 Electron 환경에서의 구현 방법까지 설명할 것입니다. Electron 환경 설명Electron은 웹 기술을 사용하여 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. 기존의 Electron 애플리케이션은 주로 HTTP 통신을 사용하여 외부 서버와 데이터를 주고받습니다. 이는 웹 애플리케이션과 유사한 방식으로, 웹 서버가 필요한 모든 리소스를 처리하고 클라이언트 측에서는 그 결과를 받아 사용자에게 보여주는 형식입니다. 하지만 Electron.. 개발 이야기/backend 2024. 5. 10.

• 

  Electron 이벤트값을 다르게 설정하여 리액트 컴포넌트 재사용하기 Electron.js와 React.js를 이용해 채팅 팝업창을 만들면서, 이전에 만들어둔 TitleMenuBar라는 컴포넌트를 재사용하고 싶어졌다. 일렉트론은 원래 디폴트로 제공해주는 상단 메뉴바가 있는데, 내가 원하는 UI로 디자인하기 위해 아래처럼 상단 메뉴바를 없앴다. 그리고 TitleMenuBar를 리액트에서 새로 만들어 일렉트론에서 기본으로 제공해주는 이벤트인 minimize()라던지 close()등에 연결하였다. BrowserWindow 코드 mainWindow = new BrowserWindow({ //생략 frame: false, // 여기서 default menu값을 없앰 }); // TitleMenuBar.js에서 발신한 ipcMain값을 읽은 뒤 이벤트 발생시킴 ipcMain.on('.. 개발 이야기/frontend 2023. 10. 13.

• electron.js에 react.js 연동하기 - 초기 프로젝트 설치 과정 electron.js에 react.js를 연동해서 채팅앱을 만들고 싶어 초기 세팅을 진행해보았다. 거두절미하고 과정 바로 시작. 1. Node.js와 npm 설치 및 새 프로젝트 폴더 생성 - electron.js 폴더가 위치하게 될 것이다. 나는 /electron.js라는 폴더를 만들었다. 2. /electron.js 디렉토리에 아래 명령어로 package.json 생성 npm init 3. 같은 디렉토리에서 아래 명령어로 electron 설치 npm install electron --save-dev 4. package.json에 아래처럼 적는다. main파일은 main.js가 될 것이다. main.js는 electron.js에서 가장 근간이 되는 파일로 생명주기 흐름을 관리할 예정. { "name":.. 개발 이야기/frontend 2023. 9. 27.