[Frontend] Vue.js - Electron에서 간단한 Python 실행 해결기

---

개요

작년 하반기에 진행한 프로젝트에서 윈도우 시스템의 정보를 가져오는 프로그램을 개발하여야 되는 상황이 있었습니다.

윈도우 시스템의 정보는 Python을 사용하여 가져왔고, 저는 제가 주로 개발하던 웹 개발 기술과 일렉트론을 사용하여 윈도우 클라이언트 프로그램을 개발할 생각이었습니다. 해당 과정을 진행하며 Vue.js로 개발한 일렉트론 클라이언트 프로그램에서 Python을 실행하는 경험을 작성해 보겠습니다.

 

이번 글에서 사용할 라이브러리와 프레임워크는 아래와 같습니다.

Python-Shell : https://github.com/extrabacon/python-shell

Quasar Framework : https://quasar.dev/

Vue.js : https://kr.vuejs.org/

---

Node.js 에서 Python 실행 테스트

일렉트론에서 Python을 적용하기 전에 JavaScript 환경에서 Python 파일 실행이 제대로 되는지 Node.js로 테스트를 진행하였습니다.

 

우선 Python 파일과 Nodes.js 파일을 생성합니다.

test.py

index.js

이후 index.js 를 실행해보면 아래와 같이 출력이 됩니다.

하단에 배열로 출력되는 모습을 확인 가능

print가 배열의 형식으로 출력 됩니다.

 

다음으로 Node.js에서 Python으로 파라미터를 넘겨주는 법 입니다.

test.py

index.js

Python파일에서 받아오는 파라미터 출력

자세히 확인하면 배열 형식으로 파라미터가 Node.js 에서 Python으로 전달 되는제, 첫번째 요소는 파이썬 파일의 이름인 것을 확인 가능합니다.

 

해당 방법을 사용하여 간단한 계산 함수를 실행해보겠습니다.

test.py

index.js

파라미터로 1, 2를 전달하였고, 파이썬 코드에서 int 타입으로 바꾸어 add 함수를 실행한 경우 정상적으로 작동되는 모습을 확인할 수 있습니다.

 

이렇게 python-shell 라이브러리를 사용하여 Node.js 환경에서 Python 코드를 실행 가능합니다.

파일 구조

---

Electron에서 Python 실행

저는 Vue.js를 이용해 프론트엔드 개발에 주로 Quasar 프레임워크를 사용하였습니다.

해당 프레임워크에 일렉트론으로 개발하고 빌드하는 기능이 있어 사용하였습니다.

 

Quasar CLI를 사용해 프론트엔드 프로젝트를 생성하고, 실행하였습니다. 프로젝트에서는 /src/pages/index.vue 파일만 수정하겠습니다.

index.vue

프로젝트 초기 설정 후 실행 화면

index의 mounted 함수에서 Python 코드를 실행해 보겠습니다.

 

/src/python/ 폴더안에 아까 만들어 놨던 Python 파일을 붙여넣었습니다.

index.vue

Node.js 에서와는 다르게 options에 scriptPath가 추가되었습니다.

 

Python 코드를 실행하려 하니 TypeError가 출력됩니다.

해당 오류를 검색해보니 브라우저에서 실행을 할 수 없다는 식의 답변이 있었습니다.

 

다시 터미널로 돌아와 Quasar 프레임워크에 있는 일렉트론 개발 기능을 사용해 보겠습니다.

quasar dev -m electron을 입력해 줍니다. 관련 커맨드는 Quasar 문서에 자세히 나와 있습니다.

 

일렉트론으로 실행

일렉트론으로 실행되어 브라우저가 프로그램처럼 새 창이 열렸습니다.

콘솔을 열어보니 "3"이 출력되는 것을 확인 가능합니다.

---

결론

이번 글에서는 Vue.js와 Quasar 프레임워크 환경에서의 Python 파일 실행을 진행해보았습니다.

Python에서 함수를 실행할때 파라미터 전달과 JavaScript로 반환되는 형식이 String 배열임을 고려하여, JSON형식으로 데이터를 주고 받으면 원활한 함수 실행이 가능합니다.

 

해당 프로젝트에서 사용한 python-shell 라이브러리에서는 run 함수 외 다양한 함수를 지원하니 문서를 확인해 보셔도 좋을 것 같습니다.