상당히 크리티컬했으나 해결했음. 보통의 개발 적성자들은 이런 선행기술연구를 시간가는 줄 모르고 재밌어 할 지 모르나, 사실 이런거 한다고 시간 다 털려서 지연배상금 한번 물어보면 쉽게 시도하기 어려운 행동임.

그래서 관급 계약을 할 땐 무조건 레퍼런스를 확보한 기술만 쓰는게 국룰임.

php 넥사크로 웹스퀘어 전자정부프레임워크

리액트를 브라우저 라우터를 활용해서 빌드하면, 일렉트론 빌드 단계에서 라우터의 링크들을 인식하지 못하는 문제가 있음.

이를 이유로 해쉬 라우터를 활용하면, 리액트와 백엔드 간 통신이 안 됌. (해쉬 특성상 어쩔 수 없음.)

상기의 이유로 당초(2024.01.31)에는 리액트와 일렉트론을 완전히 분리하려 했음. 관련된 레퍼런스도 찾을 수 없었거니와 기존의 일렉트론 레퍼런스들(discord, vscode 등)은 애초에 리액트 기반이 아니라서(심지어 우리는 Vite 프로젝트라는 제약사항까지 있음.) 레퍼런스로 삼기에는 다소 우리 프로젝트와 거리가 있었음.

결과적으로 발상의 전환을 통해 해결할 수 있었음. 리액트 빌드 파일을 일렉트론으로 래핑하지 않고, 리액트를 배포한 최종 url을 일렉트론으로 래핑하여 빌드를 진행하는 방법임.

시도하는 당시에는 프론트 멤버들의 학습과 개발 병행으로 인해 사실 리액트 빌드가 불가한 상황이긴 했으나, 본인이 개인적으로 Testing build가 가능한 수준까지 Polishing을 진행하여 선제적 배포 후 일렉트론의 배포 url 래핑 테스트를 진행하였음. (이거 하는데도 시간 엄청 빨렸음)

큰 고비가 여러가지 있었는데, 리액트만 개별 빌드할 때 이 친구가 브라우저 환경에서만 작동해야 하므로 일렉트론에서 작동하는 코드를 내포하고 있을 시에는 빌드가 안됌. 그래서 리액트와 일렉트론 간 통신은 리액트에는 일렉트론 관련 코드를 작성하지 않고, 웹소켓 혹은 SSE를 활용해야한다는 점임. 사실상 일렉트론 로직 또한 일종의 백엔드가 되버린 셈임.

추가적으로 일렉트론은 다소 ES 버전에 보수적인 편임. 작금 JS 생태계는 ES6를 필두로 한 모듈 기반의 자바스크립트 문법이 보편적인 듯 함. 그런데 일렉트론은 commonJS를 기준으로 한 ES5 자바스크립트 문법이 아직까지 default다보니, 리액트에서 활용하는 라이브러리를 일렉트론에서 Import할 때,

import xxx from 'xxx'