정보실

웹학교

정보실

javascript NodeGUI 시작하기

본문

NodeGUI는 JavaScript 및 CSS와 같은 스타일을 사용하여 크로스 플랫폼 기본 데스크탑 애플리케이션을 빌드하기 위한 오픈 소스 라이브러리입니다.


이 기사에서는 NodeGUI를 시작하고 실행하는 방법을 보여 드리겠습니다. 개발 환경을 설정하고 라이브러리의 몇 가지 기본 개념을 살펴본 다음 간단한 비밀번호 생성기 앱을 만들어 마무리하겠습니다.


https://hibbard.eu/node-gui/ 


우리가 무엇을 끝내고 싶은지 궁금하다면 완성 된 코드는 GitHub에서 찾을 수 있습니다.


그리고 이것은 앱의 모습입니다 :


Screenshot of app 


왜 Electron가 아닌가? 


들어가기 전에 Electron과 같은 인기 있는 Chromium 기반 솔루션 중 하나와 달리 NodeGUI를 사용해야 하는 이유를 살펴 보겠습니다.


Electron 앱이 과장된 경우 


Electron 앱의 주요 비판은 부풀어 오르고 너무 많은 메모리가 필요하다는 것입니다. 이는 각 Electron 앱이 Chromium 브라우저 버전과 함께 제공되며 기본 앱처럼 리소스를 공유 할 수 있는 위치에 있지 않기 때문입니다.


고성능 컴퓨터의 더 큰 앱의 경우에는 문제가 없습니다. 그러나 글을 쓸 가능성이 높은 경우 전체 브라우저를 제공하여 내 앱이 속임수처럼 느껴지도록 합니다.


반면 NodeGUI는 Qt 프레임 워크에 의해 구동됩니다. 이는 위젯이 기본적으로 렌더링 되며 UI를 렌더링 하기 위해 브라우저 인스턴스를 열 필요가 없음을 의미합니다. 이것은 CPU / 메모리를 효율적으로 만들고 내 요구에 훨씬 더 적합합니다.


개인 정보 보호 문제 


언급 한 바와 같이 Electron 앱은 Chrome의 오픈 소스 버전을 기반으로 하며 개인 정보 보호 측면에서 이는 이상적이지 않습니다. Google은 지난 몇 년 동안 데이터가 굶주리게 되었으며, 제 생각에는 Chromium은 어떤 방식이나 형태로도 집에 전화를 걸지 않는다고 믿을 수 없습니다.


NodeGUI를 사용하면 문제가 되지 않습니다.


NodeGUI가 아닌 이유 


NodeGUI가 현재 개발 중이지만 프로젝트가 아직 초기 단계에 있으며 관리자는 현재 프로덕션 환경에서 사용하지 말 것을 권고합니다.


또한 지금까지 Qt 모듈 중 일부만 구현되었음을 알고 있어야 합니다. 이것은 아직 이식 되지 않은 위젯이 필요하다는 것을 의미합니다. 이 경우 수행 할 작업은 이 문서의 도움말 및 기고 섹션에서 설명합니다.


그리고 앱을 빌드 / 배포 할 때 몇 가지 문제가 있습니다. 이것들도 기사의 끝 부분에서 다룹니다.


요컨대, 세련된 턴키 솔루션을 찾고 있다면 현재 Electron을 사용하는 것이 좋습니다.


개발 환경 설정 


그 방법으로 NodeGUI를 시작하고 실행 해 봅시다.


Node.js 


NodeGUI에는 노드 버전 12.x 이상이 필요하므로 먼저 설치하십시오.


프로젝트 홈 페이지로 이동하여 시스템에 적합한 바이너리를 다운로드하거나 nvm과 같은 버전 관리자를 사용하십시오. 가능한 경우 버전 관리자를 사용하는 것이 좋습니다. 다른 노드 버전을 설치하고 원하는 대로 전환 할 수 있습니다. 또한 잠재적 권한 오류를 무시합니다.


node -v를 입력하여 실행중인 버전을 확인하여 설치 프로세스가 제대로 진행되었는지 확인할 수 있습니다.


추가 종속성 


Linux를 실행하고 있으므로 이 섹션의 설치 지침에 해당 내용이 반영됩니다. 다른 운영 체제의 경우 설명서를 확인하십시오.


NodeGUI가 작동하게 하려면 Make, GCC v7 및 CMake를 설치해야 합니다. 이것은 다음과 같이 할 수 있습니다 :


sudo apt-get install make gcc cmake


표준 Linux 설치에서는 Make 및 GCC가 이미 설치되어있을 가능성이 있습니다. 완료되면 다음을 사용하여 버전을 확인할 수 있습니다.


make -v
$ GNU Make 4.1

gcc -v
$ gcc version 7.4.0 (Ubuntu 7.4.0-1ubuntu1~18.04.1)

cmake --version
$ cmake version 3.10.2


마지막으로 pkg-config 및 build-essential 패키지를 설치하는 것이 좋습니다 (아마도 필수는 아님). 다음을 사용하여 이 작업을 수행 할 수 있습니다.


sudo apt-get install pkg-config build-essential


그리고 그게 다입니다.


스타터 레포 복제 


다음으로 nodegui-starter repo를 복제 해 봅시다. 이를 통해 개발을 시작하는 데 필요한 최소 설정을 제공 할 수 있습니다.


git clone https://github.com/nodegui/nodegui-starter
cd nodegui-starter
npm install


npm install을 실행하면 NodeGUI가 기반으로 하는 Qode라는 사용자 정의 노드 바이너리가 다운로드 됩니다. 그런 다음 이전에 설치 한 도구를 사용하여 라이브러리를 구성하는 C ++ 파일을 컴파일합니다.


이 작업이 완료되면 프로젝트 루트에서 npm run start를 실행하여 표준“Hello, World!”예제를 볼 수 있습니다. 이 명령은 webpack을 시작하여 src / index.ts의 내용을 dist / index.js로 변환 한 다음 Qode를 사용하여 제공됩니다.


결과는 다음과 같습니다. 예쁜가요?


Hello, World! 


데모 앱 검사 


직접 무언가를 만드는 것으로 넘어 가기 전에 몇 가지 NodeGUI 개념을 강조하기 위해 데모 앱을 살펴 보겠습니다.


선택한 편집기에서 src / index.ts를 엽니 다. TypeScript 파일이므로 아직 구문 강조 표시를 설치하지 않을 수 있습니다. Sublime Text의 경우 TypeScriptSyntax 패키지를 사용합니다.


TypeScript에 대한 경험이 없어도 걱정하지 마십시오. NodeGUI는 일류 TypeScript 지원을 제공하지만 일반 JavaScript에서도 잘 작동합니다. 나중에 빌드 할 비밀번호 생성기는 TypeScript가 아니라 JavaScript로 작성됩니다.


필요한 위젯 가져 오기 


index.ts의 처음 몇 줄은 다음과 같습니다.


const {
  QMainWindow,
  QWidget,
  QLabel,
  FlexLayout
} = require("@nodegui/nodegui");


이 작업은 GUI에 필요한 모듈을 가져 오기만 하면 됩니다.


프로젝트의 훌륭한 문서에서 사용 가능한 모든 모듈 목록을 찾을 수 있습니다. 이 목록은 꾸준히 증가하고 있으며 아직 구현되지 않은 모듈이나 기능이 필요한 경우 NodeGUI 저장소에서 문제를 열어 추가 여부를 물을 수 있습니다.


창 만들기 및 레이아웃 추가 


다음 줄은 기본 응용 프로그램 창을 만들어 표시합니다. NodeGUI의 모든 위젯은 QMainWindow의 하위 또는 하위 하위여야 합니다.


const win = new QMainWindow();
...
win.show();
(global as any).win = win;

마지막 줄은 파일에서 TypeScript의 유일한 비트입니다. global.win = win;으로 컴파일 됩니다. JavaScript로. 이 줄의 목적은 win의 가비지 수집을 방지하는 것입니다. 그렇지 않으면 몇 분 후에 창이 사라집니다.


위젯을 기본 애플리케이션 창에 추가하려면 중앙 위젯 세트가 있어야 합니다. 다른 위젯을 캡슐화하고 구조를 제공하는 데 사용할 수 있는 QWidget입니다. 그것은 웹 세계에서 div와 비슷한 역할을 합니다.


const centralWidget = new QWidget();
...
win.setCentralWidget(centralWidget);


NodeGUI의 가장 좋아하는 기능 중 하나는 flexbox 레이아웃을 완벽하게 지원한다는 것입니다. 이것을 메인 어플리케이션 윈도우에 추가하기 위해 FlexLayout 모듈이 사용됩니다.


const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);


flexbox에 익숙하지 않은 경우 SitePoint에서 이 친숙한 소개를 확인하여 신속하게 정보를 얻으십시오.


자식 위젯 및 스타일링 추가 


데모 앱은 두 개의 하위 위젯을 사용하여 인사말을 표시합니다. 이 중 첫 번째는 다음과 같습니다.


const label = new QLabel();
...
label.setText("Hello");
...
rootLayout.addWidget(label);


여기서 너무 흥미로운 일은 없습니다. QLabel 위젯이 생성되고 "Hello"텍스트가 추가됩니다. 위젯이 앱에 표시되도록 하려면 위에서 언급 한 FlexLayout에 위젯을 추가해야 합니다.


두 번째 위젯은 약간 더 흥미 롭습니다. 대부분 첫 번째와 동일하지만 setInlineStyle 메서드는 스타일을 적용하는 데 사용됩니다.


const label2 = new QLabel();
label2.setText("World");
label2.setInlineStyle(`
  color: red;
`);
...
rootLayout.addWidget(label2);


setStyleSheet 메소드를 사용하여 위젯 스타일을 지정할 수도 있습니다. 이것이 작동하려면 setObjectName 메소드를 사용하여 위젯에 오브젝트 이름을 지정해야 합니다. 객체 이름은 웹 세계의 ID와 유사하며 스타일 규칙으로 위젯을 대상으로 할 수 있습니다.


centralWidget.setObjectName("myroot");
...
label.setObjectName("mylabel");
...
win.setStyleSheet(
  `
    #myroot {
      background-color: #009688;
      height: '100%';
      align-items: 'center';
      justify-content: 'center';
    }
    #mylabel {
      font-size: 16px;
      font-weight: bold;
    }
  `
);


보시다시피 중앙 위젯의 항목은 align-items justify-content 속성을 사용하여 정렬됩니다.


이것이 데모 앱입니다. 다음 섹션으로 넘어 가기 전에 코드를 이해하도록 잠시 시간을 내십시오.


비밀번호 생성기 구축 


NodeGUI 개념에 익숙해 졌으므로 더 흥미로운 무언가, 즉 비밀번호 생성기를 만들어 보도록 하겠습니다. 이 응용 프로그램은 사용자가 암호 길이를 입력 한 다음 해당 길이의 임의의 암호를 생성 할 수 있어야 합니다. 또한 비밀번호에 특수 문자를 포함해야 하는지 여부를 지정할 수 있어야 합니다.


다음 섹션에서는 이 앱을 단계별로 작성하지만 함께 제공되는 GitHub 리포지토리에서 완성 된 코드를 가져올 수 있습니다.


앱 스켈레톤 생성 


위에서 언급했듯이 TypeScript가 아닌 JavaScript를 사용하여 앱을 만듭니다. 결과적으로 src / index.ts의 이름을 src / index.js로 바꾸고 다음 코드를 포함하는지 확인하십시오.


const {
  QMainWindow,
  QWidget,
} = require('@nodegui/nodegui');

const win = new QMainWindow();
win.setWindowTitle('Password Generator');
win.resize(400, 200);

// Root view
const rootView = new QWidget();

win.setCentralWidget(rootView);
win.show();

global.win = win;


여기에는 놀라운 것이 없습니다. 기본 응용 프로그램 창을 만들고 제목과 크기를 설정합니다. 그런 다음 루트보기를 작성하고 이를 중앙 위젯으로 설정하여 다음 단계에서 하위 위젯을 추가 할 수 있습니다.


루트 디렉토리에서 npm run start를 실행하면 다음과 같이 표시됩니다.


The app skeleton 


앱 레이아웃 디자인 


다음으로 앱의 구조를 고려해야 합니다. 더 쉽게 시각화 하기 위해 레이아웃을 묘사 한 다이어그램을 만들었습니다.


위젯의 번호는 1-10입니다. 위젯 유형과 참조 할 변수 이름을 지정합니다.


App layout 


이것은 다음과 같이 분류됩니다.

  1. Main application window
  2. Main window’s central widget
  3. Container for password options
  4. Container for first row of password options
  5. Label and text input to enter desired password length
  6. Checkbox to specify if special characters should be used
  7. Text area to display generated password
  8. Container for buttons
  9. Button to generate a password
  10. Button to copy the generated password to the clipboard

이제 코드로 변환 해 봅시다. 비밀번호 옵션부터 시작하겠습니다.


참고 : ... 이전 섹션에서 언급 한 코드를 나타내며 매번 반복하지는 않습니다. 완성 된 파일과 비교하려면 여기를 확인하십시오.


const {
  ...
  FlexLayout,
  QCheckBox,
  QLabel,
  QLineEdit,
} = require('@nodegui/nodegui');

...

// Root view
...
const rootViewLayout = new FlexLayout();
rootView.setObjectName('rootView');
rootView.setLayout(rootViewLayout);

// Fieldset
const fieldset = new QWidget();
const fieldsetLayout = new FlexLayout();
fieldset.setObjectName('fieldset');
fieldset.setLayout(fieldsetLayout);

// Number characters row
const numCharsRow = new QWidget();
const numCharsRowLayout = new FlexLayout();
numCharsRow.setObjectName('numCharsRow');
numCharsRow.setLayout(numCharsRowLayout);

const numCharsLabel = new QLabel();
numCharsLabel.setText('Number of characters in the password:');
numCharsRowLayout.addWidget(numCharsLabel);

const numCharsInput = new QLineEdit();
numCharsInput.setObjectName('numCharsInput');
numCharsRowLayout.addWidget(numCharsInput);

const checkbox = new QCheckBox();
checkbox.setText('Include special characters in password');

// Add the widgets to the respective layouts
fieldsetLayout.addWidget(numCharsRow);
fieldsetLayout.addWidget(checkbox);
rootViewLayout.addWidget(fieldset);

// Styling
const rootStyleSheet = `
  #rootView {
    padding: 5px;
  }
  #fieldset {
    padding: 10px;
    border: 2px ridge #bdbdbd;
    margin-bottom: 4px;
  }
  #numCharsRow, #buttonRow {
    flex-direction: row;
  }
  #numCharsRow {
    margin-bottom: 5px;
  }
  #numCharsInput {
    width: 40px;
    margin-left: 2px;
  }
`;

rootView.setStyleSheet(rootStyleSheet);

...


여기서 주목할 점은 각 QWidget (웹 용어의 div 요소와 유사 함)마다 새로운 FlexLayout을 생성한다는 것입니다. 이를 통해 flexbox를 사용하여 QWidget의 하위 위젯을 배치 할 수 있습니다.


addWidget 메소드를 사용하여 위젯을 해당 레이아웃에 추가하는 방법도 주목하십시오.


이 시점에서 npm run start를 사용하여 앱을 실행하면 다음이 표시됩니다.


App displaying password generation options 

다음으로 생성 된 비밀번호를 표시하기 위해 위젯을 추가하겠습니다. 우리는 목적을 위해 QPlainTextEdit 위젯을 사용할 것입니다. 그것을 요구하여 시작하자 :


const {
  ...
  QPlainTextEdit,
} = require('@nodegui/nodegui');


다음으로 레이아웃을 만듭니다.


// Generated password output
const passOutput = new QPlainTextEdit();
passOutput.setObjectName('passOutput');
passOutput.setReadOnly(true);
passOutput.setWordWrapMode(3);


우리는 읽기 전용으로 만들고 단어 줄 바꿈 모드를 3으로 설정했습니다. 이렇게 하면 특수 문자가 포함 된 경우 위젯이 비밀번호에 줄 바꿈을 삽입하지 못하게 됩니다.


마지막으로, 위젯을 루트보기 레이아웃에 추가하고 스타일을 추가하십시오.


// Add the widgets to the respective layouts
...
rootViewLayout.addWidget(passOutput);

// Styling
const rootStyleSheet = `
  ...
  #passOutput {
    height: 85px;
    margin-bottom: 4px;
  }
`;


이제 앱을 실행하면 다음과 같이 표시됩니다.


App with widget to display generated password 


마지막으로 버튼을 추가하여 비밀번호를 생성하고 클립 보드에 복사 해 보겠습니다. 이를 위해 QPushButton 위젯을 사용합니다.


const {
  ...
  QPushButton,
} = require('@nodegui/nodegui');

...

// Button row
const buttonRow = new QWidget();
const buttonRowLayout = new FlexLayout();
buttonRow.setLayout(buttonRowLayout);
buttonRow.setObjectName('buttonRow');

// Buttons
const generateButton = new QPushButton();
generateButton.setText('Generate');
generateButton.setObjectName('generateButton');

const copyButton = new QPushButton();
copyButton.setText('Copy to clipboard');

// Add the widgets to the respective layouts
...
buttonRowLayout.addWidget(generateButton);
buttonRowLayout.addWidget(copyButton);
rootViewLayout.addWidget(buttonRow);

// Styling
const rootStyleSheet = `
  ...
  #buttonRow{
    margin-bottom: 5px;
  }
  #generateButton {
    width: 120px;
    margin-right: 3px;
  }
  #copyButton {
    width: 120px;
  }
`;


이 프로세스는 이제 익숙할 것입니다. 위젯이 필요하고 레이아웃을 작성하고 위젯을 레이아웃에 추가 한 다음 스타일을 추가하십시오.


이제 앱을 실행하면 다음과 같아야 합니다.


The finished layout 

다른 것이 보이면 GitHub에서 index.js를 확인하여 잘못된 부분을 찾으십시오.


앱에 기능 추가 


이제 레이아웃을 완성했습니다. 이제 앱에서 무언가를 할 차례입니다. 이벤트 리스너를 생성 버튼에 연결하여 사용자가 입력 한 모든 값을 기록합니다.


버튼이 무엇이든 하게 하려면 QPushButtonEvents 모듈이 필요합니다.


const {
  ...
  QPushButtonEvents,
} = require('@nodegui/nodegui');

// Event handling
generateButton.addEventListener(QPushButtonEvents.clicked, () => {
  const passwordLength = numCharsInput.text();
  const includeSpecialChars = checkbox.isChecked();

  passOutput.setPlainText(`
    You entered: ${passwordLength}
    Special characters: ${includeSpecialChars? 'yes' : 'no'}
  `);
});


보시다시피, 텍스트 메소드를 사용하여 QLineEdit의 값과 isChecked 메소드를 사용하여 QCheckbox의 값에 액세스 할 수 있습니다. QPlainTextEdit의 setPlainText 메소드를 사용하여 이 위젯의 ​​값을 설정할 수도 있습니다.


이제 앱을 실행하고 무언가를 입력하고 생성을 누르면 입력 한 값이 비밀번호 필드에 기록 된 것을 볼 수 있습니다.


App displaying user input 


비밀번호 생성 


마지막으로 앱의 목적인 비밀번호를 생성합니다.


이것이 작동하는 방식은 문자 집합 a-z, A-Z 및 0-9를 나타내는 배열을 선언하는 것입니다. 또한 이들 모두를 특수 문자와 결합하는 네 번째 배열을 선언합니다.


코드를 간결하고 간결하게 유지하기 위해 몇 가지 lodash 메소드를 사용하겠습니다.


설치를 시작하겠습니다 :


npm install lodash


그런 다음 문자 세트를 선언하십시오.


const _ = require('lodash');

...

const NUMBERS = _.range(0, 10).map(num => num.toString());
const ALPHABET_LOWER = _.range(97, 123)
                        .map(chr => String.fromCharCode(chr));
const ALPHABET_UPPER = _.range(65, 91)
                        .map(chr => String.fromCharCode(chr));
const ALL_POSSIBLE_CHARS = _.range(33, 127)
                            .map(chr => String.fromCharCode(chr));


여기에서는 lodash의 범위 방법을 사용하여 시작부터 끝까지는 포함하지 않는 숫자의 배열을 만듭니다. 첫 번째 배열 (0-9) 이외의 모든 항목에 대해 ASCII 숫자 집합을 사용하여 두 번째 문자 배열을 생성하기 위해 이 숫자를 매핑 합니다.


다음으로, 숫자와 문자를 모두 포함하는 두 개의 배열과 사용할 모든 문자를 포함하는 두 개의 배열을 포함하는 다섯 번째 배열을 추가해야 합니다. 사용되는 배열 중 하나는 사용자가 특수 문자 사용 확인란을 선택했는지 여부에 따라 다릅니다.


const CHARSETS = [
  ALL_POSSIBLE_CHARS,
  [...NUMBERS, ...ALPHABET_LOWER, ...ALPHABET_UPPER]
];


이러한 배열에 포함 된 내용을 직접 확인하려면 콘솔에 기록하고 앱을 다시 시작하십시오.


이벤트 핸들러 추가 


이제 두 가지 기능을 선언하겠습니다. 하나는 관련 문자 집합을 잡고 다른 하나는 암호를 생성합니다.


// Logic
function getCharSet(includeSpecialCharacters) {
  return includeSpecialCharacters? CHARSETS[0] : CHARSETS[1];
}

function generatePassword(passwordLength, charSet) {
  return _.range(passwordLength).map(() => _.sample(charSet)).join('');
}


그리고 이벤트 리스너를 연결하여 활용하십시오.


// Event handling
generateButton.addEventListener(QPushButtonEvents.clicked, () => {
  const passwordLength = numCharsInput.text();
  const includeSpecialChars = checkbox.isChecked();
  const charSet = getCharSet(includeSpecialChars);

  passOutput.setPlainText(
    generatePassword(passwordLength, charSet)
  );
});


보시다시피, 사용자가 생성 버튼을 클릭하면 암호 길이, 특수 문자가 필요한지 여부 및 사용할 문자 세트가 결정됩니다.


그런 다음 generatePassword 함수를 호출하여 원하는 비밀번호 길이에 해당하는 숫자 배열을 만듭니다. 그런 다음 이 배열을 매핑하고 lodash의 샘플 방법을 사용하여 전달 된 문자 세트에서 임의의 문자를 가져옵니다. 그런 다음이 배열에서 join()을 호출하여 문자열로 변환합니다.


마지막으로 이 리턴 값은 QPlainText 위젯의 값으로 설정됩니다.


이 시점에서 암호 생성기가 작동합니다.


App generating a 66 digit password 

클립 보드에 사본 추가 


반올림하기 위해 클립 보드에 복사 기능을 구현해 보겠습니다. 애플리케이션의 제어 흐름과 기본 설정을 관리하는 QApplication 모듈을 사용하여 몇 줄의 코드로 수행 할 수 있습니다.


const {
  QApplication,
  ...
} = require('@nodegui/nodegui');

// Clipboard
const clipboard = QApplication.clipboard();

// Event handling
...

copyButton.addEventListener(QPushButtonEvents.clicked, () => {
  clipboard.setText(passOutput.toPlainText(), 0);
});


여기 QApplication.clipboard()는 클립 보드와 상호 작용하기 위한 객체를 반환합니다. 이 객체의 setText 메소드를 사용하여 실제 클립 보드의 내용을 변경할 수 있습니다.


앱을 실행하고 작동한다는 것을 만족 시키려고 노력하십시오.


Distribution 


하루에 전화하기 전에 앱을 패키징하고 배포하는 방법을 살펴 보겠습니다. 이렇게 하려면 Packer라는 추가 종속성을 설치해야 합니다.


npm install --save-dev @nodegui/packer


다운로드 및 설치되면 프로젝트 루트에서 init 명령을 실행해야 합니다.


npx nodegui-packer --init PasswordGenerator


템플릿이 포함 된 배포 디렉토리가 생성됩니다. 아이콘을 추가하거나 이름 / 설명을 변경하거나 다른 기본 기능을 추가하여 필요에 맞게 이 템플릿을 수정할 수 있습니다.


마지막으로 pack 명령을 실행하십시오.


npx nodegui-packer --pack dist


이 명령은 플랫폼 별 독립형 실행 파일이 포함 된 deploy 디렉토리 내에 빌드 디렉토리를 작성합니다.


크로스 플랫폼이라고 생각 했어요?! 


네, 미안 해요


NodeGUI는 젊은 프로젝트이며 불행히도 크로스 플랫폼 지원은 아직 이루어지지 않았습니다. 즉, 크로스 플랫폼 빌드가 필요한 경우 각기 다른 OS 환경에서 패커를 실행해야 합니다.


또한 우리가 작업하는 동안 기사 상단에 Electron bloated라고 불렀습니다. 그러나 Linux에서 생성 된 AppImage 파일을 검토하면 45MB 크기라는 것을 알 수 있습니다! 그것은 정확히 슬림하지 않습니다 ...


이 두 가지 사항은 모두 향후 릴리스에서 해결 될 Packer 로드맵에 있습니다. 그럼에도 불구하고 그들은 여기서 언급합니다.


도움 받기 및 기부 


비밀번호 생성기 앱을 빌드하는 동안 몇 가지 문제가 발생했습니다. 예를 들어, QCheckBox의 상태를 확인하는 방법을 잘 모르므로 프로젝트 홈페이지에서 문제를 열었습니다. 보시다시피 나중에 프로젝트 관리자로부터 매우 친절하고 도움이 되는 답변을 받았습니다.


NodeGUI를 사용하는 동안 문제가 발생하면 문제 섹션에서 도움을 요청하십시오.


결론 


이 기사에서는 NodeGUI를 시작하고 실행하는 방법을 설명했습니다. 몇 가지 기본 라이브러리 개념을 소개하고 간단한 앱을 빌드하고 패키징 하는 방법을 보여주었습니다.


다음 단계로, 자신 만의 멋진 것을 만들어 보시기 바랍니다.


가능하면 프로젝트에 다시 기여하십시오. NodeGUI가 약간의 견인력을 얻는다면 놀랍습니다.



페이지 정보

조회 89회 ]  작성일19-10-22 16:57

웹학교