Electron에서fetch를 사용하여main 프로세스와 통신하는 방법

이 보도에 관하여

이 글은 Electron에서render 프로세스Fetch API를 사용하여main 프로세스와 통신하는 방법을 소개합니다.

소스 코드

대략적인 절차

대략적인 절차는 아래와 같다.

인코딩

동작 확인

부호화

터미널에서 다음 명령을 실행하여 인코딩을 준비합니다.

mkdir electron-fetch
cd electron-fetch
npm init -y
npm install --save express
npm install --save-dev electron
touch index.html main.js renderer.js

main.js

편집기에서main.js를 열고 다음 내용을 입력하십시오.
요점은 아래와 같다.

createWindow 함수에서 Express를 사용하여 웹 서버를 만듭니다.

/의 GET에 index를 요청합니다.나는 >의 문서 내용을 돌려보낼 것이다.

/render.js의 GET에 render가 필요합니다.js의 파일 내용을 보냅니다.

fetch를 사용하여 통신하는 API(이 샘플은 GET/appi/status)를 설정합니다.

router.listen 메서드를 호출하여 웹 서버를 시작합니다.

mainWindow.loadURL 메서드를 호출하여 웹 서버에 액세스합니다.

index.html

편집기에서 index.를 열고 다음을 입력합니다.

renderer.js

편집기의rendererer입니다.js를 열고 다음 내용을 입력하십시오.

package.json

편집기에서 package를 선택합니다.json을 열면main 속성을 다음과 같이 수정합니다.

  "main": "main.js",

동작 확인

터미널에서 다음 명령을 실행하여 컨트롤러에 출력되었는지 확인하십시오: "ok": 진짜}.

npx electron .

끝말

Electron에서는 프로세스 간 통신(IPC)의 API가 준비되어 있기 때문에render 프로세스에서main 프로세스로 통신할 때fetch를 특별히 사용할 필요가 없습니다.단, 통신 모델은 메시지 수신이기 때문에 요청/응답형 통신의 경우 await를 위해 Promise를 쓰고 여러 요청을 동시에 보내는 경우 독특한 ID를 발행하는 등 요청을 지정해야 한다.이에 비해fetch의 경우 await를 위해 Promise를 쓰지 않아도 되고 요청과 응답의 대응을 자동으로 관리하기 쉬워요.단점은 TCP 포트를 열어야 하는 동시에 같은 PC가 이 TCP 포트에 접근할 수 있기 때문에 안전에 대한 걱정이 있다는 것이다.
IPC와fetch의 차이로 사용되지만 같은 목적을 위해 여러 가지 수단이 있으면 인코딩할 때 미혹될 수 있기 때문에 다음과 같은 규칙을 정했습니다.

원칙적으로fetch

사용

메뉴와 같은 Electron 고유의 기능을 사용하는 경우 IPC

사용

main 프로세스에서render 프로세스로 통신하는 경우 IPC

사용
Electron을 사용한 Windows용 데스크톱 앱은 버전 업그레이드 때 C##로 이식하는 작업을 했지만, XAML 등에 시달렸던 고된 추억이 있다.드디어 완성 단계까지 그렸지만, 버그가 가득해 쓰지 못했기 때문에 결국 일렉트로 돌아가 만족스러운 것을 다시 만들었다.웹 기술을 활용해 데스크톱 애플리케이션을 개발할 수 있는 일렉트론이 정말 훌륭하다고 생각해요(C#언어 자체도 훌륭한데...).
이 기사를 읽은 독자 중 윈도 앱 개발을 위해 고생한 경험이 있거나 노하우를 알고 있는 분들은 마음대로 댓글을 남겨주세요.끝까지 읽어주셔서 감사합니다!

관련 보도

Electron에서 표준 입력 출력을 사용하여 C 언어 프로그램을 호출하는 방법