준비하기

일렉트론은 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 구축하기 위한 프레임워크입니다. 일렉트론은 크로미움과 노드를 단일 이진 파일에 포함하여 하나의 자바스크립트 코드베이스로 윈도우, 맥OS, 리눅스에서 작동하는 플랫폼 간 앱을 만들 수 있습니다.

이 자습서는 일렉트론으로 데스크톱 앱을 개발하고 최종 사용자에게 배포하는 과정을 안내합니다.

목표

이 자습서는 최소한의 일렉트론 앱을 구성하는 과정을 안내하는 것으로 시작하여, 일렉트론 포지를 사용하여 패키징하고 사용자에게 배포하는 방법을 알려줍니다.

하나의 명령 상용구로 프로젝트를 시작하려면 일렉트론 포지의 create-electron-app 명령으로 시작하는 것이 좋습니다.

가정

일렉트론은 웹 앱용 네이티브 래퍼 계층이며 노드 환경에서 실행됩니다. 따라서 이 자습서에서는 여러분이 노드와 프런트엔드 웹 개발의 기초에 익숙하다고 가정합니다. 계속하기 전에 배경 지식이 필요하다면 다음 자원을 확인하는 것을 권장합니다.

• 웹 시작하기 (MDN 웹 문서)
• 노드 소개

필요한 도구

코드 편집기

코드를 작성하려면 텍스트 편집기가 필요합니다. 원하는 것을 선택할 수 있지만 비주얼 스튜디오 코드를 사용하는 것이 좋습니다.

명령줄

자습서 전반에 걸쳐 다양한 명령줄 인터페이스(CLI)를 사용합니다. 다음과 같은 시스템 기본 터미널에서 명령을 입력할 수 있습니다.

• 윈도우 - 명령 프롬프트 또는 파워셸
• 맥OS - 터미널
• 리눅스 - 배포 버전에 따라 다름 (예: 그놈 터미널, 콘솔)

대부분의 코드 편집기에서 함께 제공되는 통합 터미널을 사용할 수도 있습니다.

깃과 깃허브

깃은 소스 코드에 일반적으로 사용되는 버전 관리 시스템이며, 깃허브는 이를 기반으로 구축된 협업 개발 플랫폼입니다. 일렉트론 앱을 구축하는 데 반드시 필요한 것은 아니지만, 자습서 후반부에서 깃허브 릴리스를 사용하여 자동 업데이트를 설정할 것입니다. 따라서 다음 작업을 수행할 필요가 있습니다.

• 깃허브 계정 만들기
• 깃 설치하기

깃의 작동 방식이 익숙하지 않다면, 깃허브의 깃 안내서를 읽어보는 것이 좋습니다. 명령줄보다 시각 인터페이스를 선호한다면 깃허브 데스크톱 앱을 사용할 수도 있습니다.

자습서를 시작하기 전에 로컬 깃 저장소를 만들어 깃허브에 게시하고 모든 단계 후에 코드를 커밋하는 것이 좋습니다.

깃허브 데스크탑으로 깃 설치하기

깃이 아직 설치되어 있지 않은 경우, 깃허브 데스크탑은 시스템에 최신 버전의 깃을 설치합니다.

노드와 npm

일렉트론 앱 개발을 시작하려면 노드 런타임과 번들로 제공되는 npm 패키지 관리자를 시스템에 설치해야 합니다. 최신 장기 지원(LTS) 버전을 사용하는 것이 좋습니다.

팁

여러분의 플랫폼에 해당하는 설치 프로그램을 사용하여 노드를 설치하세요. 그렇지 않으면 다른 개발 도구와 호환되지 않는 문제가 발생할 수 있습니다. 맥OS를 사용하는 경우, 홈브루 또는 nvm과 같은 패키지 관리자를 사용하여 디렉터리 권한 문제를 방지하는 것이 좋습니다.

노드가 올바르게 설치되었는지 확인하려면, node 및 npm 명령을 실행할 때 -v 플래그를 사용하면 됩니다. 설치된 버전이 출력될 것입니다.

sh
$ node -v
v16.14.2
$ npm -v
8.7.0

sh
$ node -v
v16.14.2
$ npm -v
8.7.0

주의

일렉트론 프로젝트의 기초를 세우려면 노드를 로컬에 설치해야 합니다. 하지만 일렉트론은 시스템의 노드 설치를 사용하여 코드를 실행하지 않습니다. 대신 자체 노드 런타임이 번들로 제공됩니다. 즉, 최종 사용자는 앱을 실행하기 위해 노드를 직접 설치할 필요가 없습니다.

앱에서 실행 중인 노드의 버전을 확인하려면, 주 프로세스나 사전 로드 스크립트에서 전역 process.versions 변수에 접근할 수 있습니다. https://releases.electronjs.org/releases.json을 참고할 수도 있습니다.