본문 바로가기
프로그램

[electron 01] javascript 로 데스크톱 애플리케이션을 만들어 보려합니다.

by Dog_발자 2022. 12. 14.
반응형
알고 있는 프로그램은 웹 개발 ( JavaScript, HTML, CSS, PHP ) 언어가 전부인데 욕심은 데스크톱에서 운영되는 프르그램 같은 애플리케이션을 만들고 싶었습니다. 간단하게 데스크톱 애플리케이션을 만들 수 있는 방법을 찾던 도중 JavaScript, HTML, CSS의 기본적인 웹 개발 언어(?) 로도 데스크톱 애플리케이션을 만들 수 있는 프레임 워크를 발견했습니다. 바로 Electron는 프레임 워크입니다.

 

일렉트론(Electron) 이란

일렉트론(electron)이란 데스크톱 애플리케이션을 구축하는 도구라고 하네요. 좀 더 구체적으로 설명해 보자면 Chromium과 Node.js를 사용하여 여러분이 HTML, CSS, 그리고 자바스크립트를 이용해 애플리케이션을 만들수 있도록 해줍니다. 또한 일렉트론은 맥, 윈도, 리눅스화 호환되며 Electron 애플리케이션은 세 개의 플랫폼에서 빌드되고 동작한다고 합니다. 일렉트론(electron) 하나만 알면 맥, 윈도우, 리눅스에서 작동되는 애플리케이션을 html, css, javascript의 지식 만으로 만들 수 있다니 놀랍네요.

일렉트론(electron)으로 만든 애플린케이션

일렉트론(electron)으로 어떤 프로그램까지 만들 수 있을까요? 지금까지 일렉트론으로 만든 프로그램들을 알아보겠습니다. 와! 진짜로 이런 애플리케이션을 일렉트론으로 만들었는지는 저도 이제 알아가는 입장에서 반신반의 하지만 진짜라면 정말 대단하네요. 우리가 잘 아는 MicroSoft Teams부터   Notion, 디스코드 등 일렉트론 공식 홈페이지의 쇼케이스에서 자랑하는 것이니 거짓말은 아니겠지요. 진짜 html, css, javascript의 지식만으로 이게 가능한가요?

일렉트론으로 만든 애플리케이션
일렉트론으로 만든 애플리케이션들

 

오케이 일렉트론(electron)으로 애플리케이션 만들어 봅시다.

위에 있는  애플리케이션이 정도가 아니더라도 윈도우 메모장 정도만 되는 데스크톱 애플리케이션이라도 가능하다면 한번 해봅시다. 뭐부터 해야 할까요? 일단 개발을 하려면 코딩을 하는 에디터 프로그램을 설치 등 각 종 개발 환경을 세팅해야겠지요. 뭐가 필요한지 공식 홈페이지에 가서 알아봐야겠습니다.

 

일렉트론 홈페이지
일렉트론 홈페이지

 

Build cross-platform desktop apps with JavaScript, HTML, and CSS

Web Technologies

Electron embeds Chromium and Node.js to enable web developers to create desktop applications.

Cross Platform

Compatible with macOS, Windows, and Linux, Electron apps run on three platforms across all supported architectures.

Open Source

Electron is an open source project maintained by the OpenJS Foundation and an active community of contributors.


영어 잘한다고 영어로 쓴 것은 아닙니다. 위에 이미 말씀드린 내용이네요 맥, 윈도, 리눅스에서 작동할 수 있고, 이미 개발된 소스들이 많아서 필요한 거 찾았으면 되고... 웹 테크놀로지의 Node.js.. 어린아이 Node.js 는 뭘까요? 확장자가 js 인 것을 보면 자바스크립트 파일인 것 같긴는한데요. 우선 일렉트론을 시작하기 전에 간단히 node.js 가 뭔지도 알아봐야겠습니다.

node.js 

진짜 간단히 "예전에는 자바스크립트 런타임이 브라우저밖에 존재하질 않았다. 하지만 그러한 한계를 극복하려고 Node.js가 나왔다." 고하네요 쉽게 풀어서 이야기하자면 인터넷 익스플로러에서만 작동하던 자바스크립트 언어를 로컬 시스템 내부에도 사용할 수 있도록 런타임 환경을 만들었다는 내용인 것 같습니다.  또한 node.js는 npm이라는 세계에서 가장 큰 오픈 소스 라이브러리에 접근할 수 있다고 합니다. 이것도 이미 다른 개발자들이 만들어 놓은 소스를 검색만 잘해서 찾아 쓴다면 손안대고 코픈다는 이야기 인것 같습니다.

 

nodejs 개발에 유용한 노드 버전관리 프로그램 nvm 애 대하여 알아보기

 

[electon 03] NodeJs 개발에 유용한 nvm 간단히 알아보고 갑시다

nvm 이란 Node Version Manager라는 말 그대로 Nodejs의 버전을 관리해주는 프로그램입니다. 개발자가 한 계정에 여러 버전의 Nodejs을 설치하고 원하는 버전을 선택하여 사용할 수 있도록 합니다. electron

codezone.tistory.com

 

저도 알아가면서 정리 중인 포스팅입니다. 틀린 내용이 있으면 댓글에 남겨주시기 바라며 초보 개발자의 개인적인 기록이오니 맹신하지 말아 주시고 참고만 해주시기 바랍니다. 

 

다음에는 본격적인 electron 개발에 대하여 포스팅을 진행하겠습니다. 

 

일렉트론 홈페이지 (Build cross-platform desktop apps with JavaScript, HTML, and CSS)

 

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

Build cross-platform desktop apps with JavaScript, HTML, and CSS

www.electronjs.org

 

 

반응형

댓글