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

Day 31 : Client를 일렉트론으로

정글러 2022. 3. 6. 09:57

전날의 무수한 삽질이 그래도 성과가 있어서, 어떻게 잘 개발하면 가능은 하다는 검증은 됐다.

그걸 내가 할수 있을지는 다른 문제지만...

 

 

개발은 일단 크게 두단계로 나눠야 할 것 같다

1. CRA 클라이언트를 전부 electron으로 옮기기

2. electron에 서버단의 파이썬 로직까지 이식하기

 

먼저 1.

이렇게 빈 CRA를 빌드하는게 성공했으니, 여기다가 우리 개발해둔 컴포넌트를 다 갖다붙이면 되지 않을까

라는 생각

 

 

많은 일이 있었지만 결국 잘 된다

에러메세지 하나하나 구글링하면서 에러가 안나올때까지 해결하면 언젠가 된다

인디언식 기우제 최고

 

 

그럼 이걸 빌드해서 나온 exe도 잘 될까?

 

안된다ㅋㅋ

에러라도 나오면 좋을텐데... 빌드한 뒤에는 개발환경도 뭐도 아니고 그냥 exe라서 그저 흰화면

 

또다시 무수한 삽질을 반복하던중

https://2ssue.github.io/programming/electron-react-router/

 

electron에서 react router 사용하기 (Hash Router)

Electron에선 BrowserRouter가 안된다구? electron 앱을 만들면서, 사실상 electron 위에 react를 올리는거나 다름 없었기 때문에 개발을 대부분 electron을 켜보면서 한 것이 아니라 react dev서버를 켜놓고 테스

2ssue.github.io

이런 글을 발견

 

빌드한 뒤의 앱은 로컬에서 실행되는 exe니까

주소가 전부 C://로 시작하는 로컬주소로 바뀌고

리액트 라우터로 정해둔 경로(/editor 등등)를 붙이면 로컬에서 파일을 찾는데

당연히 디스크엔 그런 파일이 없으니 흰화면이 나온다고 한다

 

듣고보니 그럴듯하네...

 

해시라우터라는 것으로 대체하니 경로에 전부 #/이 붙었는데, 이러니까 빌드한 exe도 잘 작동한다

근데 경로에 이거하나 붙였다고 주소를 잘 붙여주는건 신기하다...

로컬에서 경로를 읽다가 #/이 붙은 뒤부턴 파일이 아니라 라우팅인걸 아는걸까

 

 

아무튼 그래서 브라우저 대신 동작하는 exe 만듦

 

근데 CRA 클라이언트만 갖다붙인거라 여전히 우리 flask랑 통신을 한다

= 웹 뷰어만 달라졌지 서버는 똑같이 고생한다

 

이제 여기에 flask 서버에 있는 python 로직들을 갖다붙여야 서버없이도 잘 돌아가는 exe파일이 될것

 

근데 시간이 이상하다

왜 10시지...