Electron + Svelte로 데스크톱 앱 개발 시작해보기

개인 프로젝트를 여러 방식으로 해보다 Electron을 이용해볼까 하는 약간의 욕심이 생겼다. 그래서 공부를 하던 중 웹 UI 프레임워크를 알아두면 좋을 것 같아서 찾아보다 Svlete의 평이 좋을 것을 보고 이것을 이용해 앱 개발을 시작해 보려고 했다. 이 글은 개발 환경을 셋업 하면서 검색했던 자료들과 함께 개인적으로 겪은 약간의 삽질의 결과가 섞여있다.

Svelte 프로젝트 생성하기

Electron은 웹 페이지를 로컬 크로미움을 통해 보여주는 용도이기 때문에 프로젝트의 시작점에는 맞지 않는다. 여기서는 Svelte 프레임워크를 이용해 웹 페이지를 구현할 것이기 때문에 Svelte 프로젝트로 시작한다.

Svelte 프로젝트 템플릿은 npx로 간단하게 가져올 수 있었다.

npx degit sveltejs/template PROJECT_NAME
cd PROJECT_NAME
yarn  # or npm install

Electron 의존성 추가하기

개인적으로 오해했던 게 Electron 패키지 자체는 개발할 때 주로 필요하다는 점이었다. 뭔가 했더니 Electron 자체는 크로미움을 가져와 node.js 기반의 환경을 잡아주는 프레임워크에 가깝다는 점이다. 쉽게 말해서 프로덕션용 패키지는 필요 없다. 프로덕션 과정에서 앱 패키징 시에 알아서 바이너리가 포함되기 때문이다.

따라서 Electron 자체는 아래와 같이 개발 의존성으로만 포함하면 된다.

yarn add -D electron
# or
npm install --save-dev electron

엔트리포인트(Entrypoint)

시작 스크립트 용도로 index.js라는 이름으로 파일을 생성하고 대충 아래와 같은 - 구글링으로 쉽게 찾을 수 있는 - 코드를 채웠다.

const { app, BrowserWindow, screen } = require('electron');

const createWindow = () => {
    const { width, height } = screen.getPrimaryDisplay().workAreaSize;

    window = new BrowserWindow({
        width: width / 1.25,
        height: height / 1.25,
        webPreferences: {
            nodeIntegration: true
        }
    });

    window.loadFile('public/index.html');
};

let window = null;

app.whenReady().then(createWindow)
app.on('window-all-closed', () => app.quit());

이 코드가 앱이 실행되면 제일 먼저 실행될 코드다. 보다시피 Electron 앱의 가장 기본적인 동작을 정의하는 파일이다.

파일 이름은 꼭 index.js일 필요는 없지만 이외의 이름을 지을 경우 실행 시 해당 파일명을 옵션으로 넘겨줘야 한다는 점을 참고하자.

Electron 시작 스크립트

프로젝트 디렉터리의 package.json 파일을 보면 scripts 항목을 찾을 수 있는데 여기 아래에서 start 항목을 추가하자. 혹은 이미 존재한다면 아래처럼 수정하자.

"start": "electron ."

이렇게 세팅해주면 이제 아래와 같은 명령으로 앱을 띄워볼 수 있다.

yarn run start
# or
npm run start

다만 아직은 문제가 있어서 제대로 동작하지 않는다. 콘솔을 열어보면 몇몇 파일을 못 찾는다는 오류가 발생한다. 아직 셋업이 끝나지 않았다는 말이다. 계속해보자.

시작 HTML 파일 수정

문제는 Svelte 템플릿을 설치할 때 생긴 public/index.html 내용에서 가져오려고 하는 파일들의 경로가 Electron 하고는 맞지 않아서 발생한다. 웹 서비스일 때의 루트는 네이티브 앱의 루트 디렉터리와는 당연히 다른 곳을 가리키는 차이가 있기 때문이다. 따라서 이 파일을 열어서 각 리소스 및 스크립트 파일들 경로를 상대 경로로 수정해주자. global.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>

시험해보기

가장 기본적인 부분이 셋업 되었기 때문에 이제 실행이 가능하다. 다만 HTML 파일을 수정했기 때문에 빌드를 새로 해야 한다.

yarn run build
# or
npm run build

이후 앞서 세팅했던 start 커맨드로 실행시켜보자.

yarn run start
# or
npm run start

이 글 상단의 스크린샷과 같이 Hello World 화면이 뜨면 정상이다. 혹시나 빈 화면이 뜨면 Inspector(Command+Option+I)를 열어서 콘솔의 메시지를 살펴보면 도움이 될 때가 있다.

728x90

vscode에서 간편하게 실행시키기

vscode의 디버그 탭에서 간편하게 실행시키고 싶다면 프로젝트 디렉터리에서 .vscode/launch.json 파일을 아래와 같은 내용으로 만들어주자.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Debug Electron",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "yarn",
        "runtimeArgs": ["run", "start"]
    }]
}

여기서는 yarn을 사용했는데 기호에 따라 npm으로 바꿔도 무방하다.

이후 vscode의 실행 및 디버그 탭에서 해당 실행 프로파일이 생성된 것을 확인할 수 있고 실행시켜 볼 수 있다. 사실 별로 이상할 것도 없이 위에서 작성한 start 스크립트를 실행시키는 명령이다. 재실행도 잘 되고 생각보다는 편했다.

마무리

이 정도면 Svelte를 이용한 Electron 앱 개발 환경 시작은 되는 것 같다.

사실 끝난 것은 아니고 이후 electron-reload 등을 이용해 자동으로 빌드되는 환경 구축과 배포용 패키지 빌드까지 해보긴 했는데 뭔가 마음에 들지가 않아서 정리하지는 않았다. 만약 추후에 좀 더 발전이 된다면 따로 정리할 계획이다.

Electron의 app 정보를 얻기 위한 삽질기 (259)	2022.01.30
Electron에서 iframe 사용하기(?) (264)	2022.01.23
HTML, CSS, Javascript 압축하기 (1038)	2020.06.15
비동기 웹 서버 C 구현체 httpserver.h (0)	2019.12.17
연산자(Operators) \| JS & ES6 공부 노트 #6 (275)	2019.08.21

Electron + Svelte로 데스크톱 앱 개발 시작해보기

Svelte 프로젝트 생성하기

Electron 의존성 추가하기

엔트리포인트(Entrypoint)

Electron 시작 스크립트

시작 HTML 파일 수정

시험해보기

vscode에서 간편하게 실행시키기

마무리

관련된 글들

'기술적인 이야기 > 웹 개발' 카테고리의 다른 글

댓글

티스토리툴바

Electron + Svelte로 데스크톱 앱 개발 시작해보기

Svelte 프로젝트 생성하기

Electron 의존성 추가하기

엔트리포인트(Entrypoint)

Electron 시작 스크립트

시작 HTML 파일 수정

시험해보기

vscode에서 간편하게 실행시키기

마무리

관련된 글들

'기술적인 이야기 > 웹 개발' 카테고리의 다른 글

관련글

댓글

티스토리툴바