[프로젝트 설계] electron과 Vue.js로 CUI프로그램에 GUI넣기(1)

시작하며

그동안 문제를 검수하면서 친구가 짜준 프로그램을 사용했는데, 정말 편리하게 잘 사용했지만 가장 중요한 단점이 있었다.
그것은 바로 CUI로 동작하며 뭔가 파일명을 수정하거나 추가를 하기 위해서는 코드 자체를 수정해야 한다는 것이었다.
물론 검수는 끝나서 이 프로그램을 당분간 더 사용할 일은 없긴 하지만…
나중에 친구한테 전달해주면 다른 사람이 검수할 때 더 편할 수도 있고..
electron을 이용하면 내가 그동안 사용했던 Vue.js를 이용해 CUI프로그램을 편하게 작동시킬 수 있도록 씌울 수 있을거라는 조언을 듣고 소소하게 프로그램을 만들어보고 싶다는 생각이 들었다.
그러니까.. 내가 만들 것은, 이미 만들어진 CUI 프로그램을 작동만 시켜주는 프로그램인 것이다 ^^
말하자면 electron을 써보기 위한 아주아주 작은 프로젝트라고나 할까..

앞으로 뭘 해야할까?

1. 표준입출력을 통해 프로그램이 작동되도록 친구 코드 수정
   • 표준 입출력을 통해 testcase Maker, 출력결과를 비교할 코드 제목 등을 받도록 한다.
     • 가능하다면 파일 위치를 열어 파일을 넣는 느낌으로 구현하고, 내부에서는 파일 절대 경로를 받아서 전달해주는 방식으로 하면 좋지 않을까?
     • 또한 드래그 앤 드롭으로 파일을 넣을 수도 있도록 하고싶은데, 이 경우 파일 자체를 업로드 하는것이 아닌 절대경로를 전달받을 방법이 없다면 기능 구현이 어려울 것 같다.
   • 비교 할 코드의 갯수는 추가, 삭제 버튼을 통해 갯수를 사용자가 자유로이 결정할 수 있도록 하고 싶다.
   • TC를 만들 때 주는 인자의 경우.. 사용자가 인자의 갯수와 랜덤여부(랜덤일 경우 범위 지정)를 지정하도록 하고 싶은데.. 내부적으로 어떻게 작동시킬지 고민을 좀 해야 할 것 같다.
     • for문을 통해 인자의 개수 만큼 함수를 불러오고, 함수 내부에서 랜덤 여부를 인자로 받아 랜덤일 경우 랜덤한 값을, 그렇지 않을 경우 전달받은 값을 str형태로 덧붙여주는 방식으로 하면 될 것 같다.

2. Vue.js로 레이아웃을 만든다.

3. electron을 이용해 변환을 하나?
   • 여기부터는 잘 모르겠다. 무한 구글링의 영역.
4. python 코드를 실행하며 나오는 출력 결과를 실시간으로 표시해주었으면 좋겠다.
   • 그리고 생성된 파일 위치를 바로 열 수 있도록 하고싶다. 이런 식으로.
     • 오류가 발생했습니다! (폴더 열기 버튼)
5. 추가로 원하는 사항
   • 마지막으로 실행했을 때 기록이 저장되어있었으면 좋겠다.
   • 여러개의 슬롯에 원하는 세팅값을 저장할 수 있었으면 좋겠다.
     • 슬롯 개수는 추가/삭제로 자유로이 조절이 가능
     • 각 슬롯을 통해 저장해둔 세팅값을 불러올 수 있다.
     • 막연히 생각해보자면, vuex를 통해 구현을 할 수 있었으면 좋겠다. 서버까지 만들어야 하면.. 또 플라스크로 어떻게 해야겠지 뭐..
     • 근데 그정도까지 가면 친구 코드를 쓰는 의미가 있나? 나중에 최적화 할 방법까지 생각하면 좋을 듯 하다.

사용할 기술은?

• Vue.js
• Vuetify
• electron