목차

  1. 도입배경
  2. Electron 이란?
  3. Hybrid vs Native
  4. 결론

도입배경

  1. Internet Explorer를 사용하는 다수의 기업담당자들이 경험하는 에러 및 스타일 깨지는 현상을 줄이고 통일성 있는 사용자 경험을 제공.
  2. 기업회원에게 더 편하게 대시보드에 접근 할 수 있는 통로 제공.
    (별다른 설치된 어플만 실행하면 대시보드 접근가능)
  3. Slack의 Notification처럼 Wanted Dashboard에서도 필요할때 Notification을 주기위해.
    (ex: 새로운 지원서가 접수될때)
  4. 원티드 대시보드가 ATS(Applicant Tracking System)으로 가기위한 큰 그림
  5. 개인적인 신기술 욕심

위와 같은 이유로 원티드 대시보드에 Electron을 도입하기로 결정함.

Electron으로 만들어진 잘 알려진 Desktop Applications

  • Slack
  • VSCode
  • Atom
  • etc…

Electron 이란?

“Build cross platform desktop apps with JavaScript, HTML, and CSS” 공식사이트
프런트앤드 기술(HTML, JS, CSS)로 Desktop app을 만들수 있도록 도와주는 프레임워크

  1. Node.js 기반
    • Node.js로 OS(Win/Mac/Linux)에 접근하여 OS에서 제공하는 인터페이스와 연계를 통해 파일 I/O, OS Notification등 다수 API를 지원
  2. Chromium 기반 (V8 Engine)
    • HTML & CSS를 rendering하여 GUI를 구성
    • JavaScript는 V8 Engine으로 실행함으로 표준 JS API 다 사용가능

Hybrid App vs Native App

Hybrid App

Web Browser와 Desktop App에서 보이는게 동일 (ex: Slack)

  • 장점
    • 새로운 js app 배포가 쉬움(서버에서 제공하는 Static 파일만 업데이트되면 됨)
  • 단점
    • XSS를 통한 OS제어를 막기위한 보안에 신경써야함
      ex: require('child_process').exec('rm -rf /*')

Native App

Desktop App으로만 존재 (ex: VSCode)

  • 장점
    • 빠른 구동 (Mobile App처럼 모든 소스를 같이 번들링해서 js app을 네트워크를 통해 다운받을 필요없음)
  • 단점
    • js app 업데이트가 필요한 경우 App 자체적 업데이트가 필요(Mobile App과 동일)

결론

빈번하게 업데이트 되는 js app을 항상 업데이트를 통해 사용자에게 전달하는 방법은 사용자가 불편할 뿐만 아니라 버전관리의 어려움도 동반한다고 판단하여 Hybrid App의 형태로 개발하고 Web Browser와 Desktop App에서 실행이 가능하도록 함.