Quick Start

---

이 가이드는 Electron 에서 electron/electron-quick-start와 유사한 Hello World 앱의 뼈대를 만드는 과정을 소개합니다.

이 튜토리얼을 끝내면, 앱을 실행 중인 Chromium, Node.js와 Electron의 버전 정보를 표시하는 브라우저 창을 열 수 있습니다.

전제 조건

---

Electron을 사용하기 위해서는 Node.js를 설치해야합니다. 우리는 최신 버전의 LTS 버전을 사용하는 것을 추천드립니다.

Node.js를 플렛폼에 미리 빌드 된 installer로 설치해주세요. 그렇지 않으면 다른 개발 도구와 비호환성 문제가 발생할 수 있습니다.

다음 명령어를 따라 현재 설치된 Node.js의 버전을 확인해주세요.

node -v
npm -v

이 명령어들은 Node.js와 npm의 버전을 출력하게됩니다.

참고: Electron은 Node.js를 바이너리에 포함하기 때문에, 코드에서 동작하는 Node.js의 버전은 시스템에서 작동하는 버전과 관련이 없습니다.

Application 생성하기

---

Scaffold the Project

Electron 앱은 일반적인 다른 Node.js 프로젝트와 동일한 구조를 따릅니다. 먼저 폴더를 생성하고 npm 패키지를 초기화하세요

mkdir my-electron-app && cd my-electron-app
npm init

대화식 init 명령어는 일부 필드를 설정하라는 메세지를 표시합니다. 이 자습서의 목적을 위해 따라야 할 몇 가지 규칙이 있습니다.

• entry point는 main.js가 되어야 합니다.
• author과 description는 아무 내용이 들어갈 수 있지만, 앱 패키징에 필요합니다.

package.json은 다음과 같아야합니다.

 {
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

그 다음, electron 패키지를 앱의 devDependencies에 설치해야 합니다.

npm install --save-dev electron

참고 : 만약 Electron을 설치하던 중 어떤 문제를 맞이한다면, Advanced Installation 가이드를 참조하세요.

마지막으로, Electron을 실행하고 싶을 겁니다. package.json 설정 파일에서 scripts 필드에 start 명령어를 다음과 같이 추가하세요.

{
  "scripts": {
    "start": "electron ."
  }
}

이 start 명령어는 당신의 앱을 개발자 모드로 실행하게 될 것입니다.

npm start

참고 : 이 script는 Electron이 프로젝트의 루트 폴더에서 실행하도록 지시합니다. 이 단계에서는 당신의 앱이 실행할 앱이 없다는 오류를 표시할 것입니다.