Github Actions는 예전부터 사용할 수 있었지만 마땅히 사용할 곳이 없었다. Tistory Editor는 travis-ci로 멀쩡히 잘 동작하고 있어서 굳이 바꾸면서 고생하기는 싫고 이걸 위해서 따로 뭔가를 만들기도 뭣하고 해서 사용을 안하고 있었다. Github Actions로 변경한 이유 script: - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then npm run build; npm run dist -- -l; fi - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then npm run build; npm run dist -- -mw; fi그럼 왜 변경했느냐? Tistory Editor는 travis에서 이렇게 2번의 빌드로 3개의 플랫..

TistoryEditor의 아이콘을 변경했다. 뭔가 동그라미가 너무 큰 것 같기도 하고 밋밋한 느낌이라 약간의 그림자를 주고 크기를 줄였다. 내 머리는 입체느낌도 추가하기를 원했지만 내 손과 기술이 따라주지 못했다. 그래서 이렇게 됐다. 변경하는 중간에 하나마나 같은 느낌이 들었지만 애써 무시하고 앱에 아이콘을 넣기 시작했다. 첫번째 난관 하다보니 리눅스에서는 앱 전환바에 아이콘이 표시가 안되는게 눈에 들어온다. 앱 아이콘은 잘 지정되어 있고 거길 아무리 변경해도 소용이 없었다. 여기저기 찾아보니 BrowserWindow에 icon을 지정해야한다고 한다. 내가 네이티브 앱에 대한 이해가 별로 없어서 그랬던 것 같다. 앱 아이콘과 각 윈도우는 아이콘을 별도로 사용할 수 있다. 어찌보면 당연한 것이긴 하다...

그동안 TistoryEditor는 리눅스 환경에서 모든 빌드를 했었다. 맥에서 리눅스 빌드를 왠지 모르겠지만 계속 에러가 났고 그걸 해결하려는 의지가 좀 부족했던 것 같다. 'electron-builder가 언젠간 쉽게 되도록 해주겠지'라는 안일한 마음도 있었다. 지금은 맥에서 별다른 문제없이 빌드가 된다. 어쨌든 빌드는 여간 귀찮은 일이 아니었다. 리눅스, 맥, 윈도우 모두 빌드를 한 후에 github에 release를 만들고 거기에 파일을 업로드하고 github page에서 버전을 업데이트 해줘야 한다. 자동으로 해주는 프로그램이 있으면 참 좋겠다 생각한 그때 travis가 그걸 해준다는 것을 알았다. Travis 설정 electron app을 travis에서 배포하도록 하려면 먼저 travis re..

간단한 형태로라도 앱이 만들어졌으니 패키징하고 배포를 해보도록 한다. Electron을 패키지하는 방법은 소스코드를 asar로 압축해서 electron, node와 함께 실행파일로 묶으면 된다. 사실 개발하면서 electron .로 앱실행하는 거랑 별반 다를 것이 없다. 그럼 그냥 zip으로 압축해서 배포하면 되는거 아닌가 싶지만... 그렇게 하면 다운로드 받아서 실행하기 불편하기도 하고 모양새도 좋지 않다. 공식문서에 이에 대한 설명이 잘 나와있다. 이렇게 이걸 얼렁뚱땅 넘어가는 이유는 이 방법은 너무 복잡하고 어렵기 때문이다. 역시나 잘 만들어진 툴을 통해서 쉽게 해결하자. electron-builder 대표적인 패키지 라이브러리는 electron-packager와 electron-builder가 있..

Browser도 만들었고 OAuth 연결도 했으니 이제 UI를 만들어본다. UI는 당연하게도 html/css로 다 만들면된다. 물론 canvas로 그려도 되고 web-gl로도 그려도 된다. 중요한 것은 electron에서 사용하는 Chromium버전에만 동작하면 되니 다른 브라우저 신경쓰지 않고 맘껏 만들 수 있다는 점이다. 그동안 잉여력으로 테스트해온 Chromium의 극단을 끄집어낼 기회다. Electron으로 앱을 만들면서 가장 좋았던 점이 이 점이었다. polyfill도 필요없고 변환작업없이 ES6를 사용할 수도 있다. React 여러 UI 라이브러리 중에서 React를 선택했다. 이전에 사용해봐서 익숙하기도 하고 사용자가 많아서 귀찮은 작업을 대신해 줄 외부 라이브러리도 많다. 초반에 webpa..