블라블라 피자돌이

만들 프로젝트명 : test-project

mkdir test-project

cd test-project

sudo npx create-next-app@latest . --typescript

 -> nextjs 기반으로 typescript를 사용

sudo npm install --save-dev electron electron-builder concurrently

sudo npm install electron-serve

Process[] processes = null;

string strCurrentProcess = Process.GetCurrentProcess().ProcessName.ToUpper();

processes = Process.GetProcessesByName(strCurrentProcess);

if (processes.Length > 1)

{

         MessageBox.Show(string.Format("'{0}' 프로그램이 이미 실행 중입니다.", rocess.GetCurrentProcess().ProcessName));

         return;

}

※ Packaging을 위해서는 Node.js 4.x 이상의 버전을 권장함

LTS를 기본으로 진행하면 될듯 합니다.

1. electron-packager 모듈을 이용한 프로젝트 Package

 - 설치 : npm install --save-dev electron-packager (전역으로 설치하고 싶으면 --save-dev -> -g옵션)

 - "prune" : 반드시 포함시켜야 개발시에만 사용하는 모듈이 제외 된다.

               포함시켜서 패키징할 경우 용량이 엄청 커진다.

 - 명령어 : .\node_modules\.bin\electron-packager ./ testApp --platform win32 --arch x64 --out dist --prune

  참고 링크 : electron-packager   옵션 설명 : electron 옵션설명

2. asar 를 이용한 압축(암호화가 아닌 tar와 비슷한 포맷이기 때문에 코드 유출 가능)

 - 설치 : npm install asar (전역:npm install -g asar)

 - packager를 통해서 나온 dist폴더의 resource/app 폴더를 보면 소스 코드가 그대로 노출됩니다.

 - app 폴더를 app.asar 파일로 만들어 주는 역할을 합니다.

 - app.asar 파일이 생성된 후에는 app 폴더는 삭제 해도 됩니다.

 - 명령어 : .\node_modules\.bin\asar pack ./dist/testApp-win32-x64/resources/app ./dist/testApp-win32-x64

/resources/app.asar

 - 명령어 한번에 사용 : .\node_modules\.bin\electron-packager ./ testApp --asar --platform win32 --arch x64 --out dist --prune   -> 옵션에 --asar를 추가해주면 package와 asar를 한번에 가능합니다.

3. 프로젝트를 Installer로 만드는 과정

 - electron-installer-squirrel-windows : 윈도우용 Electron Installer Build Module

 - 설치 방법 01 : npm install --save-dev electron-installer-squirrel-windows (사용) 사이트

 - 설치 방법 02 : npm install --save-dev electron-winstaller (둘중 하나만 설치하면 된다) 사이트

 - installer.js : 인스톨 설정 파일

 - 명령어 : node installer.js (npm 아니고 node임)

그럼 일단 실행파일(exe), 모듈압축, 인스톨 설치파일의 과정이 종료

※ Prebuilt : 미리 컴파일된 Electron 바이너리 패키지

1. 프로젝트 폴더 생성

 - 작업할 공간을 만든다

2. electron-prebuilt 설치 (로컬설치)

 - npm install --save-dev electron-prebuilt

 - 전역으로 설치할 경우 : npm install -g electron-prebuilt

3. package.json 생성

 - 설정파일

4. main.js 생성

 - package.json에 설정된 시작 javascript 파일

5. index.html 생성

 - main.js에서 로드하여 보여줄 시작 html 파일

6. 프로그램 시작

 방법 1) 프로젝트 폴더의 cmd 창에서 "npm start"

 방법 2)

   ⅰ. 전역으로 prebuilt를 설치했다면 -> electron /프로젝트path

       폴더를 지정하였기 때문에 package.json의 "main" 항목을 읽어서 실행한다

   ⅱ. 로컬로 설치했다면 -> 해당 프로젝트 폴더에서 ./node_modules/.bin/electron .

※ Prebuilt : 미리 컴파일된 Electron 바이너리 패키지

1. 프로젝트 폴더 생성

 - 작업할 공간

2. npm install --save-dev electron-prebuilt

 - Electron 바이너리 설치(로컬)

 - 전역으로 설치하려면 -> npm install -g electron-prebuilt

3. package.json 생성

 - 설정

4. main.js 생성

 - 시작 javascript 파일

5. index.html 생성

 - main.js 파일에서 시작 html 파일을 로드한다

6. 프로그램 시작

 - 프로젝트 폴더 cmd창에서 "npm start"

1. Node.JS 설치하기

 - 노드 설치하기

2. Git 설치하기

 - 링크 : https://git-scm.com/

3. 프로젝트 폴더 생성

 - ex) d:\project\electron_test

4. 프로젝트 폴더(electron_test)에 Electron 기본 템플릿 다운

 - cmd 창에서 실행

 - git clone https://github.com/electron/electron-quick-start

 - cd electron-quick-start

 - npm install

5. 프로그램 시작

 - 프로젝트 폴더 cmd창에서 "npm start"

Visual Studio 2015에서 Switch Header/Source, Header/CPP 설정

2015버전에서는 기본 기능에 포함 되어있으니, 괜히 매크로나 갤러리에서 찾을 필요가 없습니다.

단축키만 변경해서 사용하시면 됩니다.

한글판이라 영문버전에서는 어떻게 나오는지 모르겠네요^^

1. Windows

   - Windows 7 부터 지원

   - x86, x64 지원, ARM은 미지원

2. Mac

   - 64 bit

   - 10.9(Mavericks) 이상 지원

3. Linux

   - Ubuntu 12.04 버전 ia32(i686), x64(amd64)

지원 플랫폼은 다소 부족한 면이 있지 않나 싶습니다.

Chrome V8 JavaScript 엔진이 도입되어 ES6(ECMA Script 6)의 기능을 사용할 수 있습니다.

ES6 : 자바 스크립트의 최신 버전(이전 버전인 ES3까지만 지원하는 브라우저일 경우 이슈)

※ 오픈소스 프로젝트

개발을 위한 Node.js, NPM 설치

공식 사이트 한글 문서

https://github.com/electron/electron/blob/master/docs-translations/ko-KR/tutorial/quick-start.md

https://electronjs.org/docs

데스크탑 프로그램을 개발하기 위해서는 다양한 프레임웍을 사용할 수 있습니다.

일반적으로 가장 많은 User를 보유하고 있는 Windows 응용 프로그램을 개발한다면, 

크로스 플랫폼 따위 신경쓰지 않아도 됩니다.

하지만 우린(?) 갈수록 늘어만 가는 Mac, Linux 사용자를 무시할 수 없습니다.

그래서 크로스 플랫폼을 고려한 프레임웍을 고민해 볼 수 있습니다.

이미 오래전부터 사용되어 온 Qt, wxWidgets은 제외하고 최근 뜨고 있는(?) Electron을

사용해 보기로 했습니다.

보다 쉽게 개발이 가능하다고 하는데 직접 경험해 보도록 하겠습니다.

참고로 전 웹개발자가 아닙니다. ㅠㅠ

Electron은 데스크탑 프로그램을 위한 프레임웍이지만, 웹베이스라서

저에게는 다소 어려운 부분일듯합니다. 갈길이 멀어요...