개인 프로젝트를 여러 방식으로 해보다 Electron을 이용해볼까 하는 약간의 욕심이 생겼다. 그래서 공부를 하던 중 웹 UI 프레임워크를 알아두면 좋을 것 같아서 찾아보다 Svlete의 평이 좋을 것을 보고 이것을 이용해 앱 개발을 시작해 보려고 했다. 이 글은 개발 환경을 셋업 하면서 검색했던 자료들과 함께 개인적으로 겪은 약간의 삽질의 결과가 섞여있다.
Svelte 프로젝트 생성하기
Electron은 웹 페이지를 로컬 크로미움을 통해 보여주는 용도이기 때문에 프로젝트의 시작점에는 맞지 않는다. 여기서는 Svelte 프레임워크를 이용해 웹 페이지를 구현할 것이기 때문에 Svelte 프로젝트로 시작한다.
Svelte 프로젝트 템플릿은 npx로 간단하게 가져올 수 있었다.
npx degit sveltejs/template PROJECT_NAME
cd PROJECT_NAME
yarn # or npm installElectron 의존성 추가하기
개인적으로 오해했던 게 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)를 열어서 콘솔의 메시지를 살펴보면 도움이 될 때가 있다.
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에서 iframe 사용하기(?)
Electron에서 iframe 태그를 사용할...수 없다. 이 무슨 시작부터 글 제목이랑 반대되는 이야기를 하는 건가 싶을 텐데, 사실 Electron이 보안상의 문제로 iframe 을 이용한 외부 사이트 접근을 기본적으
seorenn.tistory.com
Electron의 app 정보를 얻기 위한 삽질기
개인적으로 Electron으로 공부 겸 사이드 프로젝트를 시작하고 있었다. 그 과정에서 앱의 데이터를 데이터베이스에 저장하기 위해 몇 가지 정보를 찾아보다 데이터베이스 파일을 저장할 위치에
seorenn.tistory.com
Electron에서 타이틀 바 숨기기 및 창 이동 문제
최근의 macOS 앱들은 전통적인 타이틀 바 대신 타이틀 바 영역까지 툴바나 콘텐츠로 꽉꽉 채우는 것이 유행인 것 같다. 개인적으로도 이런 디자인이 유려하고 쓸모가 많은 것 같아 선호하기도 한
seorenn.tistory.com
'기술적인 이야기 > 웹 개발' 카테고리의 다른 글
| 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 |
댓글