필수 조건
이 문서는 Electron 튜토리얼의 1부입니다.
Electron은 JavaScript, HTML, CSS를 사용해 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. Chromium과 Node.js를 단일 바이너리 파일로 통합해, 하나의 JavaScript 코드베이스로 Windows, macOS, Linux에서 동작하는 크로스 플랫폼 앱을 만들 수 있습니다.
이 튜토리얼은 Electron을 사용해 데스크톱 애플리케이션을 개발하고 최종 사용자에게 배포하는 과정을 단계별로 안내합니다.
목표
이 튜토리얼은 가장 기본적인 Electron 애플리케이션을 처음부터 조립하는 과정을 안내하는 것으로 시작한다. 그런 다음 Electron Forge를 사용해 애플리케이션을 패키징하고 사용자에게 배포하는 방법을 가르친다.
단일 커맨드로 프로젝트를 시작하는 것을 선호한다면, Electron Forge의 create-electron-app 커맨드를 사용해 보기를 권장한다.
기본 가정
Electron은 웹 앱을 위한 네이티브 래퍼 레이어이며 Node.js 환경에서 실행된다. 따라서 이 튜토리얼은 독자가 Node.js와 프론트엔드 웹 개발 기초에 어느 정도 익숙하다고 가정한다. 만약 추가적으로 배경 지식이 필요하다면, 다음 자료를 참고하는 것을 권장한다:
필요한 도구
코드 에디터
코드를 작성하려면 텍스트 에디터가 필요하다. Visual Studio Code를 사용하는 것을 추천하지만, 여러분이 선호하는 에디터를 선택해도 무방하다.
이 튜토리얼에서는 다양한 커맨드라인 인터페이스(CLI)를 사용할 것이다. 여러분은 시스템의 기본 터미널에 이 커맨드들을 입력하면 된다:
- Windows: 명령 프롬프트(Command Prompt) 또는 PowerShell
- macOS: 터미널(Terminal)
- Linux: 배포판에 따라 다름 (예: GNOME Terminal, Konsole)
대부분의 코드 편집기에는 통합 터미널이 포함되어 있으며, 이를 사용할 수도 있다.
Git과 GitHub
Git은 소스 코드 버전 관리를 위해 널리 사용되는 시스템이며, GitHub는 이를 기반으로 한 협업 개발 플랫폼이다. Electron 애플리케이션을 만드는 데 꼭 필요한 것은 아니지만, 이 튜토리얼 후반부에서 자동 업데이트를 설정할 때 GitHub 릴리즈를 사용할 예정이다. 따라서 다음 사항을 준비해야 한다:
Git의 동작 방식을 잘 모른다면 GitHub의 [Git 가이드][]를 읽어보는 것을 추천한다. 또한 커맨드라인보다 시각적 인터페이스를 선호한다면 GitHub Desktop 앱을 사용할 수도 있다.
튜토리얼을 시작하기 전에 로컬 Git 저장소를 만들고 GitHub에 퍼블리시한 후, 각 단계마다 코드를 커밋하는 것을 권장한다.
GitHub Desktop은 시스템에 Git이 설치되어 있지 않다면 최신 버전의 Git을 자동으로 설치한다.
Node.js와 npm
Electron 앱 개발을 시작하려면 먼저 시스템에 Node.js 런타임과 함께 제공되는 npm 패키지 매니저를 설치해야 한다. 최신 장기 지원(LTS) 버전을 사용하는 것을 권장한다.
Node.js가 제대로 설치되었는지 확인하려면 node와 npm 명령어를 실행할 때 -v 플래그를 사용한다. 이 명령어들은 설치된 버전을 출력한다.
$ node -v
v16.14.2
$ npm -v
8.7.0
Electron 프로젝트를 구성하려면 로컬에 Node.js가 설치되어 있어야 하지만, Electron은 시스템의 Node.js 설치를 사용하지 않고 자체 Node.js 런타임을 포함한다. 따라서 최종 사용자는 앱을 실행하기 위해 Node.js를 별도로 설치할 필요가 없다.
앱에서 실행 중인 Node.js 버전을 확인하려면 메인 프로세스나 프리로드 스크립트에서 전역 process.versions 변수에 접근하면 된다. 또한 https://releases.electronjs.org/releases.json를 참조할 수 있다.