[Electron] 00. Electron

우연히 멜론 업데이트 창에서 발견한 Electron이라는 이름에 이끌려 예쁜 데스크톱 애플리케이션을 만들어 보고 싶다는 생각에 공부를 시작하게 되었습니다.
저는 이 블로그에 평소 강의를 듣는 곳인 Udemy에서 할인 + 크레딧 덕에 무료로 구한
https://www.udemy.com/course/master-electron/ ← 이 강의를 토대로 공부한 것들을 정리하려고 합니다!

Electron이란

Electron은 Cheng Zhao라는 분이 Atom Shell이라는 이름으로 개발을 시작해, 많은 발전을 걸쳐 현재는 OpenJS Foundation에 의해 유지보수되고 있는 데스크톱 애플리케이션 프레임워크입니다.

 

Chromium과 Node.js 기반으로 HTML, CSS, JS를 이용해 Window, Mac, Linux 모두에서 동작하는 앱을 제작할 수 있습니다.

 

Electron으로 제작된 앱을 어마어마하게 많은데, 그중에서도 유명한 것들을 뽑아보자면,

디스코드, 피그마, 노션, VSCode, 스카이프, 슬랙 등등 수많은 앱이 있습니다.

Electron Apps | Electron

다른 앱들이 궁금하시다면 위 링크를 참고하시길 바랍니다.

 

Electron 앱 실행해보기

GitHub - stackacademytv/master-electron: Master Electron Course Demos

체험삼아 앱을 실행해보기 위해 저는 강의에서 제공한 데모 프로젝트를 다운로드 했습니다.

VSCode에서 프로젝트를 열어보니, 구조는 위와 같이 구성되어 있네요.

 

실행을 위해 일단 프로젝트 폴더에서 터미널을 열어 Electron을 설치하겠습니다.

PS D:\Coding\Electron\master-electron> npm install

PS D:\Coding\Electron\master-electron> npm list --depth=0

위와 같이 실행했을 때 package.json 내부의 devDependencies의 항목들과 일치하면 잘 설치가 된 것이라고 하네요.

 

PS D:\Coding\Electron\master-electron> npm start

이제 실행을 위해서 npm start를 실행해줍니다.

이렇게 애플리케이션이 실행되네요.

 

다음 글에서는 Electron Application의 구조에 대해 알아보겠습니다.