Electron + Svelte App 시작하기
≡ 목차 (Table of Contents)
이 글은 Svelte 프레임워크를 이용해 Electron 앱을 개발하기 위한 가장 기본적인 부분들을 만들어가는 과정을 설명한다.
Svelte 프로젝트 생성하기
Svelte 프로젝트 템플릿은 npx로 간단하게 설정할 수 있다.
npx degit sveltejs/template PROJECT_NAME cd PROJECT_NAME yarn # or npm install
Electron 추가하기
의존성 추가는 Electron 셋업하기 글을 참고하자. 의존성을 추가하고 index.js 파일을 추가하고 start 스크립트를 수정하는 모든 부분이 필요하다.
의존성을 추가한 후 Svelte 템플릿을 설치할 때 생긴 public/index.html 파일을 열어서 각 리소스 및 스크립트 파일들 경로를 상대 경로로 수정해주자. globa.css, build.css, bundle.js 파일의 경로에서 제일 앞의 / 를 빼주기만 하면 된다. 수정된 내용은 아래와 같은 식이다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>Seonews</title> <link rel='icon' type='image/png' href='/favicon.png'> <!-- 수정된 코드 1 --> <link rel='stylesheet' href='global.css'> <!-- 수정된 코드 2 --> <link rel='stylesheet' href='build/bundle.css'> <!-- 수정된 코드 3 --> <script defer src='build/bundle.js'></script> </head> <body> </body> </html>
시험해보기
가장 기본적인 부분이 셋업되었기 때문에 이제 실행이 가능하다. 아래 커맨드로 실행시켜보자.
yarn run start # or npm run start
Hello World 느낌이 나는 화면이 뜨면 정상이다. 혹시나 빈 화면이 뜨면 Inspector(Command+Option+I)를 열어서 콘솔의 메시지를 살펴보면 도움이 될 때가 있다.
electron-reload 지원해보기
파일을 수정할 때마다 Electron을 띄우는 것은 귀찮다. 물론 Command+R 이나 F5 키로 리프레시가 가능하다지만 이조차도 귀찮다면 electron-reload 를 설정하는 것도 한 방법이다.
yarn add -D electron-reload # or npm install --save-dev electron-reload
당연하겠지만 개발시에만 사용하므로 프로던션 의존성에는 들어가지 않도록 설치하는 명령이다.
이제 이를 로드하도록 index.js 를 열어서 코딩해보자. 아래 코드를 상단 적절한 위치에 넣어두자. 개인적으로는 import(require) 이후에 넣는걸 선호한다.
var devMode = process.env.DEV_MODE ? (process.env.DEV_MODE.trim() == "true") : false; if (devMode) { require('electron-reload')(__dirname, { electron: upath.toUnix(upath.join(__dirname, 'node_modules', '.bin', 'electron')) }); }
이 코드는 DEV_MODE 라는 환경변수가 true 로 세팅되어야 electron-reload 가 작동하도록 하는 코드다. 따라서 이 부분도 적용되어야 할 것이다. package.json 을 열어서 scripts 항목의 start 부분을 수정해주자.
"start": "DEV_MODE=true electron ."
이러면 실행시킬 때 electron-reload 가 동작한다. 물론 원하는 이름의 스크립트에 넣어도 관계는 없다.
자동 빌드 문제 해결하기
불행히도 electron-reload 만으론 리로드가 완벽하게 되지 않는다. 일부 코드는 빌드가 필요하기 때문이다. 그렇다면 자동으로 빌드가 되게 만들어야 한다. 기본적으로 dev 스크립트가 빌드를 하는 명령이니 이걸 호출할 수 있게 해야 한다.
우선 wait-on 과 concurrently 의존성을 개발 전용으로 설치한다.
yarn add -D wait-on concurrently # or npm install --save-dev wait-on concurrently
그리고 package.json 의 scripts 들에서 아래와 같은 항목들을 수정한다.
"start": "sirv public --no-clear", "electron": "wait-on http://localhost:5000 && electron .", "electron-dev": "DEV_NODE=true concurrently \"yarn run dev\" \"yarn run electron\"",
이제 개발용으로 쓸 새로운 electron-dev 스크립트 명령을 만들었다. 아래와 같이 실행시켜서 시험해보자.
yarn run electron-dev # or npm run electron-dev
개인적으론 대부분의 자동화가 잘 되었지만 간혹 뭔가 빠지는 느낌인데 그럴땐 어쩔 수 없이 Electron 창에서 Command+R 키 등을 눌러서 직접 리프레시를 해주어야 한다. 그래도 네이티브 앱 개발 시에 비하면 순식간에 재로딩이 되니 큰 불만은 없다.
vscode에서 간편하게 실행시키기
launch.json 파일을 생성해서 아래와 같이 코딩해 줄 수 있다.
{
"version": "0.2.0",
"configurations": [{
"name": "Debug Electron",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "yarn",
"program": "electron-dev"
}]
}
이후 vscode의 실행 및 디버그 탭에서 해당 실행 프로파일이 생성된 것을 확인할 수 있고 실행시켜 볼 수 있다. 사실 별로 이상할 것도 없이 위에서 작성한 electron-dev 스크립트를 실행시키는 명령이다. 재실행도 잘 되고 생각보다는 편했다.