나만의 무기 : HIGHLIGHTING/개발 일지

Day 32 (1) : electron IPC, pythonShell 사용 연습

정글러 2022. 3. 6. 11:01

분명 잠을 안잤는데 Day가 바뀜...

 

주말안에 다 해야 발표자료랑 세션에도 넣고... AWS에 배포할것도 줄이고... 이것저것 하는데

갈길이 너무 멀다

 

https://medium.com/heuristics/electron-react-python-part-1-introduction-b228ccf8e889

 

Electron + React + Python (Part 1) — Introduction

From Development to Production

medium.com

참고한 내용

 

원리 : 

일단 눈에 보이는 쪽(CRA)은 electron이 뷰어로 보여준다

근데 여기에 hide된 프로세스를 하나 더 생성해서, 거기에는 pythonShell로 필요한 모든 .py 로직을 실행하는 스크립트를 담는다 (scripts만 있는 html파일)

(원래 서버에 요청했던) py 로직들이 필요할 때마다 IPC로 hide된 프로세스에 요청

 

기존 CRA 클라이언트- flask서버간  REST API 통신이

 

클라이언트 -> electron이 보여주는 show된 프로세스

서버 -> 서버에 있던 것과 동일한 로직의 로컬 .py 스크립트를 실행시킬수있게 구현된 hide 프로세스

axios-flask간 API -> IPC

 

이렇게 대체된것이라 볼수있다

 

링크의 예제에서는 위의 3자간 통신이 App.js, electron.js, hide된 백그라운드 html파일 셋 간에 이루어지는데,

저중 App.js가 class 컴포넌트의 componentDidMount로 구현되어 있었다

 

App이 처음 렌더링될때 componentDidMount에 의해 최초의 send콜을 날리고,

그 send로부터 electron.js가 반응하여 hide된 백그라운드를 깨우고,

백그라운드는 간단한 .py를 실행시켜 그 결과값을 electron에 주고,

그걸 다시 App이 받는 로직이다.

 

아 이런거구나, 하고 알만하니까 직접 해봤다

근데 늘 그래왔듯이 당연히 안됨ㅋㅋ

 

단하나의 차이점이라고는 우리 App은 function이라 useEffect []로 대체한거였는데

이거때문에 안되는듯

 

왜...

거의 비슷한거 아니야...?

useEffect가 문제인가 싶어서 그냥 버튼하나 만들고 온클릭 함수에 똑같이 복붙을 해서 수동으로 IPC를 날려봤지만

그래도 안됨...

 

그래서 결국 우리 App.js를 class로 바꾸고 componentDidMount 안에서 채우니까 된다...

1234를 보내주니 electron의 중계를 거쳐서 .py가 *10된 값을 return한게 args로 돌아옴

 

심지어 아까 열어두고 안치워둔 버튼도 작동한다

 

????

이게맞나?

 

버튼 온클릭 함수는 여전히 하나도 안건드린 함수형인데,

상위 컴포넌트만 class로 바꿨다고 자식 안의 버튼까지 잘 응답하는걸 보면

뭔가 맨 위의 부모가 class여야만 동작하는건가 싶은데

왠진 모르겠다...

 

우리의 서버요청은 전부다 버튼의 온클릭으로 시작되다보니 버튼이 안되면 망하는거였는데

아무튼 버튼이 잘 작동해서 다행이다.

 

 

현재의 구조는 electron이 백그라운드 열렸다는 send를 받으면 바로 .py를 run하는 로직을 가진 리스너에게 콜을 날린다

= 첫 렌더의 componentDidMount 단계에서 py가 실행된다.

 

즉 여기서 reply를 하지 않게 바꾼다면, componentDidMount의 백그라운드를 깨우는 단계에서 리스너만 열고 .py는 실행되지 않고 대기하는 상태가 될 것

 

그렇다면 위의 new pythonShell을 실행하는 리스너를 서버 라우팅 하나하나마다 만들고,

우리 CRA 각각의 버튼은 원래 요청을 날리던 addr 해당하는 리스너를 깨우도록 구현한다면

서버와 통신하는것과 같은 효과를 낼 수 있을 것이다.

 

비동기니까 성능상으로는 오히려 좋아

 

 

원리는 이해했으니 이제 실구현을 해보자.

일단 잠부터 자고...