Electron 사용기

• Electron의 구조

메인 프로세스(NodeJS 환경)에서 BrowserWindow 인스턴스를 생성해 웹 페이지를 보여줄 수 있는 것이 주요 원리이다.

• 환경 구성

  1. electron 라이브러리를 이용해 환경을 구성한다.

  2. electron의 메인 프로세스를 실행하는 파일을 하나 만든다 (우리는 electron.js)

  3. BrowserWindow 인스턴스에서 홈페이지 주소를 통해 서비스를 제공한다.

     (개발 시에는 https://localhost:3000)

     (배포 시에는 https://plandar.o-r.kr)

• 배포 시 알아야 할 사항 - asar (참조)

  • 애플리케이션의 리소스 (배포할 때 우리가 만든 내용)을 asar 아카이브로 패키징한다.
  • Node API와 Web API 두 가지 API를 사용할 수 있도록 지원하기 위해 asar 아카이브를 사용한다.
  • 만약 배포 후에 소스 코드를 보고싶다면 asar 라이브러리를 이용해 extract(unpack)해 확인하면 된다.

• 배포 시 알아야 할 사항 - 아이콘 (참조)

  • 권장 사항 - 크기는 512x512로 진행할 수 있도록 한다.

UX 개선을 위한 필요한 작업

• client나 server에서 env에 대해서 다른 이름 사용하도록 설정하기

• Header

  • Header에 있는 버튼이 아니면 창을 움직일 수 있도록 해야한다.

    CSS 속성을 각자 줌으로서 이를 해결할 수 있다. (버튼에 select 할 수 있도록 따로 속성 지정)

    user-select: none;
    -webkit-app-region: drag;
    

  • Custom Header 작업이 필요하다.

    • Window를 resize, move 여부를 결정하는 자물쇠 아이콘

    • Window를 widget으로 사용할 것인지, 어플리케이션으로 사용할 것인지에 대한 여부

      electron의 app.on event를 통해 movable, resizable, frame 등 속성을 변경해야하며

      어플리케이션의 View도 개선해야 할 것. (sidebar 간소화 등)

• Widget 달력

  • View를 단순화시킬 필요가 있다.

    • Sidebar 같은 경우 간소화 할 수 있는지에 대한 여부 (hidden, visible 등은 기본)

  • Transparent 기능을 넣고 싶다? ⇒ background-color에 transparent on/off 넣고, BrowserWindow에 transparent: true 속성을 주어야 한다.

    (혹은 속성만 주고 background-color on/off 만 주어도 된다.)

• Menu 기능 추가

  • 위젯, 어플 등 기능 무엇 사용할 지 토글
  • 로그인/로그아웃
  • 앱 종료
  • 잠금, 잠글 풀기 (앱 위치나 크기 등)
  • 알람 On/Off (후에 개발한다는 전제하에)

• Cross Platform 항상 생각하기.