electron-react-boilerplate 템플릿 내에서 명령어를 실행하는 방법에 대해서 서술하였다.
기존 템플릿에서는 뷰 코드에서 node.js의 시스템 명령어를 즉시 사용할 수 있었으나,
최근에 IPC를 통해서 시스템 명령어를 실행할 수 있게 변경해놓아 정리한다.
1. Electron(React, Typescript) 프로젝트 생성2. nodeIntegration 활성화한다.3. preload.d.ts에 메소드 타입을 정의한다.4. preload.ts에 메소드 내용을 구현한다.5. 렌더링 부분에서 명령을 호출한다.
1. Electron(React, Typescript) 프로젝트 생성
코드를 불러오는 중 입니다 ...2. nodeIntegration 활성화한다.
- BrowserWindow의 속성 중 webPreferences > nodeIntegration을 true로 설정해준다.
- 코드를 불러오는 중 입니다 ...
3. preload.d.ts에 메소드 타입을 정의한다.
- 파일은 src/renderer/preload.d.ts에 있다.
- 코드를 불러오는 중 입니다 ...
4. preload.ts에 메소드 내용을 구현한다.
- 파일은 src/main/preload.ts에 있다.
- assets 경로 하위에 scripts/state.py 파일을 실행하는 내용으로 구현하였다.
- assets 내부의 스크립트를 실행하면 경로를 유의해야 한다. (getScriptPath 함수 참고)
- 디버깅 상태에서는 assets 경로 하위로 설정하면 된다.
- 빌드 상태에서는 process.resourcesPath 경로 하위로 설정하면 된다.
5. 렌더링 부분에서 명령을 호출한다.
window.electron.ipcRenderer로 해당 함수를 불러올 수 있다.
- 코드를 불러오는 중 입니다 ...