Electron 무작정 시작하기

Electron을 시작해보려고한다 :)

공식 홈페이지에서 빠른 시작을 보다가, npx electorn . 으로 설치하는 줄 알고 꽤나 애를 먹었다 ㅠ

일단 무작정 투토리얼부터 보고 따라해보려고한다..!

1. 사용할 workspace 생성 및 npm 패키지 초기화

내가 임시로 사용할 디렉토리를 만들고 해당 디렉토리로 이동한다.

mkdir [directory] && cd [directory]

사용할 디렉토리로 이동 후, npm 패키지를 초기화해준다.
아래처럼 entry point와 license는 우리가 따로 설정해주지 않는다면 괄호() 안에 있는 값으로 초기값이 설정된다.

다 설정한 후 마지막에 OK를 엔터 처리해주면 1단계는 끝이 난다.

npm init

위 상태에서 sample workspace를 열어보면 아래와 같이 package.json이 생성된다.

2.devDependency 설치

튜토리얼에는 프로덕션에 필요하지 않은 외부 개발 전용 패키지 종속성 목록이라고하는데, 우선 따라해보겠다 ㅎㅎ..

npm install electron --save-dev

설치되고나니, package-lock.json 과 node_modules이 추가 된 것을 볼 수 있다.

3. Electron 시작하기

1번에서 우리는 entry point를 기본인 index.js가 아닌 main.js로 설정했다.
여기에서 main.js는 그럼 우리의 진입지점인 것 을 알 수 있다.

3-1. 루트 폴더에 main.js 만들기

루트 폴더에 진입지점인 main.js를 만들고 간단하게 터미널에 출력하고 싶은 console을 적는다.

console.log("sample completed");

3-2. package.json에 script 추가하기

package.json에 script를 추가하면 우리가 electron . 을 매번 작성하지 않고, start라고 간편하게 사용할 수 있다. 따라서 script에 start 부분을 추가한다.

"start": "electron ."

3-3. npm run start로 시작하기

터미널에 아래와 같은 명령어를 입력하면, main.js에 작성한 console이 터미널에 출력되는 것을 확인할 수 있다.

npm run start

이렇게하면 일단 터미널에 출력하기까지는 끝이 났다..!!!

더 자세한 내용들은 계속 공부하면서 추가해 볼 예정이다..ㅎㅎ