Electron

Electron

• electron은 자바스크립트로 pc앱을 만들 수 있는 좋은 프레임워크 중 하나로 디슼코드, 슬랙등이 일렉트론으로 만들어졌다.
  하지만 웹이아닌 pc앱이여서 npm라이브러리들이 한계가 있어서 dll파일의 외부라이브러리를 활용해서 써준다. 이걸 지원해주는 라이브러리가 바로 ffi이다.

      let dllLib;
      try{
          dllLib = ffi.Library('dll파일명',{
              'dll파일의 함수명':['리턴타입',[파라미터타입]]
          })
      }catch(e){
  
      }
      
      

이런 형태로 외부 동적라이브러리를 호출하여 electron에서 사용할 수 있으며 dll외에도 ini파일을 접근하고 수정할수있으며, pc의 레지스트리에 접근을
도와주는 windows 라이브러리등이 있다.

    *  ** Electron의 구조는 Main Process와 Renderer Process로 구성되어 있습니다.**
    -Main Process
    Node.js을 기반으로 os의 파일 시스템에 접근하여 작업을 수행합니다. 따라서 Node.js만 알아도 쉽게 데스크탑 어플리케이션을 만들 수 있습니다. 
    백 엔드의 영역이며 웹페이지의 GUI에 해당되는 부분입니다. pakage.json파일의 main 스크립트가 실행되는 것이고 하나의 어플리케이션에 하나의 
    Main Process만 존재가 가능합니다.
    -Renderer Process
    주로 Chromium을 기반으로 Html, CSS, Javascript로 이루어진 영역이며 프론트엔드 영역에 속합니다. 웹페이지를 보여주는 역할을 합니다.
    

• Electron의 구조
  1) Main Process
  Node.js을 기반으로 os의 파일 시스템에 접근하여 작업을 수행합니다. 따라서 Node.js만 알아도 쉽게 데스크탑 어플리케이션을 만들 수 있습니다.
  백 엔드의 영역이며 웹페이지의 GUI에 해당되는 부분입니다. pakage.json파일의 main 스크립트가 실행되는 것이고 하나의 어플리케이션에 하나의
  Main Process만 존재가 가능합니다.
  2) Renderer Process
  주로 Chromium을 기반으로 Html, CSS, Javascript로 이루어진 영역이며 프론트엔드 영역에 속합니다. 웹페이지를 보여주는 역할을 합니다.

• 로그인 기능과 그 외 기능 및 후기
  최근 검색 목록기능과 여러가지 화면기능, 아티스트기능등 모바일과 웹브라우저에서 제공하는 기능을 전부 제공해주며 전체재생되는 기능이 가장 편리하다.

electron 설치

• brew install -s git
  : git과 node를 설치해준다.
• npm init
  : 경로를 지정해준다.
• npm install --save-dev electron
  : electron을 설치해준다.
• npm start
  : 컴파일을 실행해준다.
• npm i -D electron-builder
  : electron 빌드 툴을 설치해준다.
• npm run pack

      {
    // ..
    "build": {
      "productName": "Electron-Application",
      "appId": "myApp"
    }
  }
  {
    // ..
    "scripts": {
      "start": "electron .",
      "pack": "electron-builder"
    }
  }
: package.json과 npm command를 수정해준다.