2022.05.17 TIL

동기와 비동기

• 동기(synchronous) : 요청과 결과가 동시에 나타난다. 결과가 나타날 때 까지 대기해야 한다.
• 비동기(asynchronous) : 결과를 기다리는 동안 다른 작업을 할 수 있어 자원을 효율적으로 사용할 수 있다.

Electron 데스크탑 앱

git repo

electron은 HTML + CSS + Javascript를 사용해 만드는 네이티브 앱이다. 쉽게 말해, 크로미움 + Node.js. 웹 기반 기술을 사용해 .exe 파일을 만든다.

브라우저에서 웹 페이지가 구동되면 윈도우, 리눅스, 맥에서 동일한 모습을 보이는데 electron도 이와 같이 크로스 플랫폼을 지원한다.

또한 아래와 같이 우리에게 익숙한 앱들을 만드는 데 사용됨을 알 수 있다.

Quick Start를 참고하여 간단한 electron app을 실습해 보았다.

electron 설치

• Node.js, npm
  • electron 을 실행시키려면 사전에 Node.js 및 npm이 설치되어야 한다.
    • Node.js
    • 다음과 같이 결과가 나오면 정상 설치 된 것이다.
• electron 설치
  • 다음 명령어로 electron을 설치한다.

    npm install electron
    

electron 프로젝트 생성

• 기본 프로젝트 생성

  mkdir my-electron-app; cd my-electron-app
  npm init -y
  npm install --save-dev electron
  

  명령어 수행 결과, my-electron-app 디렉토리에 프로젝트가 생성되었다.

• 화면 구성 파일 작성하기 electron의 가장 기본적인 화면 구성 요소는 다음과 같다.

    index.html : 메인 화면 html
    main.js : 메인 화면 js
    preload.js : 사전에 로드 되야 하는 라이브러리
    package.json : 링크 구성 (like cmake)
    

  • 각 파일의 작성 내용은 my-electron-app을 참고할 것.

electron 프로젝트 빌드

• 아래 명령어로 실행하면 package.json 내의 “start”에 반응하여 app이 구동된다.

  npm start
  

  

electron 실행파일 만들기

• electron을 통해 실행파일을 만드려면 electron builer가 필요하다. 아래 명령어로 설치할 수 있다.

   npm install --save-dev electron-builder
   

• preload.json 파일에서 script, build 옵션을 수정한다. 하단의 “directories”의 “output”에 최종 파일이 설치된다.

  {
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "devDependencies": {
    "electron": "^18.2.4",
    "electron-builder": "^23.0.3"
  },
  "scripts": {
    "start": "electron .",
    "deploy": "electron-builder --windows nsis:ia32"
  },
  "build": {
    "productName": "test",
    "appId": "com.electron.hello",
    "asar": true,
    "protocols": {
      "name": "test",
      "schemes": [
        "test"
      ]
    },
    "win": {
      "target": [
        "zip",
        "nsis"
      ],
      "icon": "./resources/installer/Icon.ico"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "directories": {
      "buildResources": "./resources/installer/",
      "output": "./exeResult/",
      "app": "."
    }
  },
  "keywords": [],
  "author": "dasol kang",
  "license": "ISC",
  "description": ""
  }
  

• 빌드
  • 아래 명령어로 .exe 파일을 만들도록 빌드해 보자.

    npm run deploy
    

    

  • output 옵션에서 지정됬던 exeResult 디렉토리에 설치 파일을 확인할 수 있다.

여담

C/C++ 기반의 어플리케이션 배포와 비교했을 때, 다양한 도구들을 지원받을 수 있어 쉽게 만들 수 있는 것 같다. (삽질이 비교적 없을 듯 하다.) 다음에는 C/C++ 모듈을 붙여서 Electron 앱을 만들어 봐야겠다.