TS+Electron+React 세팅법

방법

Electron-Forge이용

1. $npm init electron-app@latest <프로젝트명(새폴더생성됨)> -- --template=webpack-typescript
   를 치면 webpack이 설정된 ts전용 일렉트론까지 완료됨.

2. tsconfig.json파일에 compilerOptions섹션에 "jsx": "react-jsx" 를 추가

3. 아래 종속성 추가

   npm install --save react react-dom
   npm install --save-dev @types/react @types/react-dom

4. src/app.tsx에 다음코드로 확인

   import { createRoot } from 'react-dom/client';
   
   const root = createRoot(document.body);
   root.render(<h2>Hello from React!</h2>);

   src/renderer.ts에 다음코드로 확인

   // Add this to the end of the existing file
   import './app';

Electron-Forge라는 일렉트론을 간단하게 배포 및 실행을 할 수 있게 하는 all-in-one-tool이다.

깨달은점

• webpack으로 인해 ts를 js로 번역한 결과를 파일로 저장하지 않고 핫리로딩까지 가능하다. 그러한 설정을 한번에 해줌
• ipcRenderer 모듈을 tsx파일에서 사용할때는 반드시 window의 require를 쓴
  const { ipcRenderer } = window.require("electron");
  로 해야한다. const { ipcRenderer } = require("electron"); 나 import {ipcRenderer} from "electron"은 안된다.
• ipcMain부분에서 console.log를 하면 터미널에 출력, ipcRenderer부분에서 console.log를 하면 일렉트론어플리케이션 개발자도구 콘솔에 출력된다.