Electron 으로 나의 주식종목 관리 프로그램을 만들어보자

본업으로 인해 매일 주식창을 들여다 보는 것이 불가능하며, 다종목 순환매를 위주로 하는 장기투자자로서, 많은 종목에 대한 대응 전략을 기억하기가 쉽지 않다.

따라서, 본인이 추구하는 기계적인 매수/매도 시점과 및 포트폴리오 전략을 자동으로 관리해주는 프로그램과 나의 투자전략을 평가해줄 시뮬레이션 도구가 필요하다. 키움증권 외 기타증권사 HTS, 트레이딩뷰 등 시뮬레이션 기능을 제공하지만, 그들만의 스크립트를 학습하는 것 외에도 내가 원하는 기능을 만족시키기가 어렵다.

최근 트레이딩 뷰 전략시뮬레이터는 맘에 들긴 하지만, 유료 전환하고 싶지않다. 이에 나는 4년전에 만져본 electron을 이용해서 마지막으로 다시 한번 도전한다. 사실 만들다 중도포기한 어플이 수십개다. 의지, 실행력, 육아, 본업 등 댈 수 있는 핑계가 많다.

 

Electorn 이란?

"Electron"은 웹 기술을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있도록 도와주는 오픈 소스 프레임워크이다.  Electron은 웹 기술인 HTML, CSS 및 JavaScript를 사용하여 애플리케이션의 사용자 인터페이스를 구축하고, Node.js를 이용하여 백엔드 기능을 구현할 수 있다. 이러한 접근 방식으로, 개발자들은 웹 개발 경험을 활용하여 데스크톱 애플리케이션을 개발할 수 있다. Electron은 Chromium 렌더링 엔진을 기반으로 하여 데스크톱 애플리케이션과 비슷한 UI 및 기능을 제공한다.

Electron의 장점

1. 크로스 플랫폼 지원: Electron은 Windows, macOS, Linux 등 다양한 운영 체제에서 실행되며, 개발자들은 한 번의 코드 작성으로 여러 플랫폼을 대상으로 애플리케이션을 배포가능
2. 웹 기술 활용: 웹 기술인 HTML, CSS 및 JavaScript를 사용하여 개발하므로, 웹 개발 경험이 있는 개발자들은 쉽게 학습하고 적용할 수 있다.
3. 생태계: Electron은 강력한 생태계를 가지고 있으며, 다양한 플러그인과 라이브러리를 활용하여 개발을 빠르게 진행할 수 있다.

Electron의 단점

1. 자원 소비: Electron 애플리케이션은 Chromium 기반으로 동작하기 때문에 자원 소비가 비교적 크다. 작은 규모의 애플리케이션에는 불필요한 오버헤드일 수 있다.
2. 파일 크기: Electron 애플리케이션은 자체 런타임을 포함하므로 파일 크기가 크고 다운로드 시간이 오래 걸릴 수 있다.
3. 성능: 일부 복잡한 애플리케이션에서는 웹 기반 프레임워크의 한계로 인해 성능 이슈가 발생할 수 있다.

Other framework와 비교

1. Electron vs. Native 앱 개발:
   • Electron은 웹 기술을 활용하므로 웹 개발자들이 쉽게 사용할 수 있지만, Native 앱 개발에 비해 성능이 떨어지고 자원 소비가 크다.
   • Native 앱은 운영 체제에 최적화되어 있어 빠른 성능과 효율적인 자원 관리를 할 수 있지만, 플랫폼별로 별도의 코드를 작성해야 하며, 크로스 플랫폼 개발에 비용과 시간이 더 소요된다.
2. Electron vs. React Native:
   • Electron은 데스크톱 애플리케이션을 위한 것이고, React Native는 모바일 애플리케이션을 위한 것이다.
   • Electron은 웹 기술을 사용하여 크로스 플랫폼 데스크톱 앱을 개발하는 반면, React Native는 JavaScript를 사용하여 네이티브 모바일 앱을 개발할 수 있다.
   • React Native는 네이티브 컴포넌트와 더 가깝게 상호작용하여 성능면에서 장점이 있지만, 네이티브 앱과의 차이가 있을 수 있다.
3. Electron vs. Qt:
   • Qt는 C++ 기반의 크로스 플랫폼 애플리케이션 개발 프레임워크이다.
   • Electron은 웹 기술을 사용하고 Node.js를 통합하여 개발하는 반면, Qt는 C++ 언어를 사용한다.
   • Qt는 네이티브 컴파일된 코드를 생성하므로 성능 면에서 Electron보다 우수할 수 있지만, 학습 곡선이 더 가파르고, 개발에 시간과 노력이 더 소요될 수 있다.

Electron을 활용사례

1. Visual Studio Code (VS Code):
   • VS Code는 Microsoft에서 개발한 무료 소스 코드 편집기로서, 개발자들에게 널리 사용되고 있다. VS Code는 Electron을 기반으로 하며, 웹 기술을 사용하여 사용자 인터페이스를 구현하고 Node.js를 이용하여 편집기의 기능을 제공한다. VS Code는 Windows, macOS, Linux 등 다양한 운영 체제에서 동작한다.
2. Slack:
   • Slack은 팀 커뮤니케이션과 협업을 위한 인기 있는 메시징 플랫폼이다. Electron을 활용하여 데스크톱 클라이언트를 개발하였으며, 사용자들은 데스크톱 앱을 통해 쉽게 Slack을 이용할 수 있다.
3. Discord:
   • Discord는 게이머들을 위한 음성 및 텍스트 채팅 플랫폼으로서, Electron을 사용하여 데스크톱 클라이언트를 개발했다. 사용자들은 Discord 앱을 통해 다양한 채팅 및 음성 기능을 이용할 수 있다.
4. Atom:
   • Atom은 GitHub에서 개발한 무료 소스 코드 편집기로서, Electron을 이용하여 데스크톱 앱을 개발했습니다. Atom은 다양한 플러그인과 확장 기능을 제공하여 사용자들이 개인적으로 커스터마이징하여 사용할 수 있다.
5. Postman:
   • Postman은 API 개발 및 테스트를 위한 도구로서, Electron을 활용하여 데스크톱 애플리케이션을 제공한다. Postman은 사용자들이 API를 편리하게 테스트하고 관리할 수 있도록 도와준다.

프로젝트 생성

mkdir all-of-stock && cd all-of-stock
npm init

electron 설치

npm install electron --save-dev

electron 실행

npm run start