TistoryEditor가 거의 끝나간다. 쓸만해지니 어서 패키징해서 배포를 해보고 싶어졌다. 예전에 electron-packager로 한번 해봤는데 여러가지 설정을 추가로 해줘야해서 electron-builder를 써보기로 했다.
get started
설정을 하는거나 시작하는건 packager에 비해서 쉽다. 일단 여러가지 옵션을 쓰지 않고 build만 실행하면 OS에 맞는 버전으로 빌드를 해준다. 다른 OS용 빌드를 할때만 옵션을 준다. 그리고 가장 좋았던 것은 앱 아이콘을 /build에 넣어두기만 하면되고 asar도 기본 옵션으로 들어가 있다.
맥의 경우는 dmg파일도 만들어주고 리눅스의 경우는 deb, rpm도 만들어준다. packager보다 이런 부분에서는 정말 좋은 것 같다. 그 외에도 기본 옵션이 더 있는 것 같은데 아직 다 보지는 못했다. 지금 확인한 바로는 복붙이 안된다. 키보드 이벤트가 막힌건 아닌 것 같고 클립보드가 못쓰게 막힌 것 같다.
문제
빌드가 안되거나 빌드 후에 앱이 정상동작하지 않는 문제가 있어서 몇가지 정리를 해보려고 한다.
Not allowed local resource
빌드된 앱을 실행했더니 화면에 아무 것도 표시되지 않았다. devtool을 임시로 열어서 확인해보니 Not allowed local resource라는 메시지가 보였다. app.asar/build/index.html을 열 수가 없다고 한다. 소스코드를 아무리봐도 잘못된 부분이 없다. 만약 잘못된 부분이 있다면 빌드하기 전에 알았을 것이다. 너무 이상해서 app.asar를 extract해봤다.
asar는 electron의 코드 묶음이다. 빌드할 때 electron.asar와 현재 프로젝트가 app디렉토리에 복사되어 resource로 들어가고 앱을 실행할때 실제로는 이를 electron이 실행한다. electron-builder는 기본 옵션으로 프로젝트를 app.asar로 묶는다. 그래서 오류가 발생했을때 app.asar/build/index.html이 없다는 오류가 나온 것이다.
app.asar를 extract해보고 나서야 문제를 알 수 있었다. app을 위한 코드를 넣어두었던 build 디렉토리가 없었다. 아마도 build 디렉토리는 build 결과물을 넣어놓는 곳이라서 제외한 것 같았다. 어쩔 수 없이 app 디렉토리를 만들어서 build 디렉토리 안에 있던 것들을 옮겼다. 다시 실행해보니 이제는 잘 된다.
아이콘
electron-packager는 icon을 자동으로 처리해주지 않아서 그런지 문제없이 다 빌드가 되었는데 electron-builder는 icon을 자기가 알아서 만들어준다고 하면서 에러를 내뱉는다. -_- 이 문제는 사실 아직 해결하지 못했다. 맥용 아이콘만 만들어진 상태고 windows icon도 256x256로 다시 만들어야 하고 linux icon도 크기별로 변환이 가능하도록 다시 만들어야 한다. 이런 부분에 대해서는 별다른 설명이 없어서 조금 아쉽다.
해결했다. electron-builder는 icon파일이 없는 경우 맥용 아이콘을 기반으로 다른 아이콘을 만든다. 그 과정에서 오류가 발생하면 빌드 실패한다. 내가 첫번째 본 오류는 icns to png 변환이 실패한다는 거였는데 알고보니 icns에 적어도 5가지 크기의 아이콘을 묶어서 넣어야 하는 거였다. 그래서 모두 넣었더니 첫번째 오류는 더이상 발생하지 않았다.
두번째 오류는 특정 크기의 이미지가 없어서 다른 것으로 변환을 못한다는 거였다. 이 부분은 도저히 해결이 되지 않았다. 분명이 그 파일이 있어야 하는데 없다고 한다. 한참을 고민하다 결론에 다다랐다. 처음부터 이미지를 변환할 필요없이 모든 아이콘 이미지를 만들어두면 된다. 바로 이렇게!
build에는 icon.icns, icon.ico를 넣어두고 build/icons에 linux용 아이콘을 크기별로 넣어주면 된다. 이렇게 하니 빌드가 잘 된다. ㅠㅠ 이걸 하기까지 너무 힘들었다. 나같은 초심자를 위한 가이드가 있었더라면 이렇게 힘들지 않았을터인데...
메뉴바
복붙을 해결하기 위해서는 단축키를 직접 지정해야한다. 간단히 메뉴바를 만드는 것으로 해결할 수 있는데 맥에서는 메뉴가 앱 프레임에 무관하게 메뉴바에 추가되니 문제가 없지만 리눅스나 윈도우에서는 앱 프레임안에 메뉴바가 만들어진다. 리눅스에서 gnome3나 unity의 메뉴바를 지원하면 좋겠지만 그렇게는 안해준다. 이 문제도 진행 중이다. 일단은 메뉴바가 보이는 상태로 유지하고 있다.
링크
티스토리 에디터를 만들다보니 본문 내의 링크를 클릭하는 경우가 생긴다. 이건 앱이니까 당연히 기본 브라우저에서 열릴 것 같지만 그렇지 않다. 앱이지만 사실상 크로미움 브라우저이기 때문에 그냥 열린다. 앱이 브라우저로 변신한다. 뒤로가기를 안만들었다면 뒤로가기도 안된다. 어쩔 수 없이 링크가 클릭되는 행위를 감지해서 외부 브라우저로 열도록 해야한다.
var handleRedirect = (e, url) => {
if(url != mainWindow.webContents.getURL()) {
e.preventDefault()
require('electron').shell.openExternal(url)
}
}
mainWindow.webContents.on('will-navigate', handleRedirect)
mainWindow.webContents.on('new-window', handleRedirect)
여기저기 찾아봤지만 webContents에서 will-navigate, new-window 이벤트를 잡아서 처리하는 것이 제일 좋은 것 같다. (pravdomil의 해결방법)
TistoryEditor 0.1.1
0.1을 공개하기도 전에 0.1.1버전이 만들어졌다. 지금 글을 쓰는 것도 이 버전이다. 일단은 요기서 끊고 다음을 기약해야겠다. 지금은 다른 할 일이 너무 많다. 아! 소개 페이지만 만들고 끊자.
