Merge pull request #5473 from preco21/korean-docs-3
docs: Update Korean docs as upstream
This commit is contained in:
Cheng Zhao
commit
d0b39bc4fe
43 changed files with 560 additions and 436 deletions
|
|
@ -20,6 +20,7 @@ Electron에 대해 자주 묻는 질문이 있습니다. 이슈를 생성하기
|
|||
## 개발 가이드
|
||||
|
||||
* [지원하는 플랫폼](tutorial/supported-platforms.md)
|
||||
* [보안](tutorial/security.md)
|
||||
* [어플리케이션 배포](tutorial/application-distribution.md)
|
||||
* [Mac 앱스토어 어플리케이션 제출 가이드](tutorial/mac-app-store-submission-guide.md)
|
||||
* [어플리케이션 패키징](tutorial/application-packaging.md)
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
밑의 예시는 마지막 윈도우가 종료되었을 때, 어플리케이션을 종료시키는 예시입니다:
|
||||
|
||||
```javascript
|
||||
const app = require('electron').app;
|
||||
app.on('window-all-closed', function() {
|
||||
const {app} = require('electron');
|
||||
app.on('window-all-closed', () => {
|
||||
app.quit();
|
||||
});
|
||||
```
|
||||
|
|
@ -41,7 +41,7 @@ Electron은 먼저 모든 윈도우의 종료를 시도하고 `will-quit` 이벤
|
|||
않습니다.
|
||||
|
||||
**역주:** 이 이벤트는 말 그대로 현재 어플리케이션에서 윈도우만 완전히 종료됬을 때
|
||||
발생하는 이벤트 입니다. 따라서 어플리케이션을 완전히 종료하려면 이 이벤트에서
|
||||
발생하는 이벤트입니다. 따라서 어플리케이션을 완전히 종료하려면 이 이벤트에서
|
||||
`app.quit()`를 호출해 주어야 합니다.
|
||||
|
||||
### Event: 'before-quit'
|
||||
|
|
@ -60,7 +60,7 @@ Returns:
|
|||
|
||||
* `event` Event
|
||||
|
||||
모든 윈도우들이 종료되고 어플리케이션이 종료되기 시작할 때 발생하는 이벤트 입니다.
|
||||
모든 윈도우들이 종료되고 어플리케이션이 종료되기 시작할 때 발생하는 이벤트입니다.
|
||||
`event.preventDefault()` 호출을 통해 어플리케이션의 종료를 방지할 수 있습니다.
|
||||
|
||||
`will-quit` 와 `window-all-closed` 이벤트의 차이점을 확인하려면 `window-all-close`
|
||||
|
|
@ -114,8 +114,26 @@ Returns:
|
|||
* `event` Event
|
||||
* `hasVisibleWindows` Boolean
|
||||
|
||||
어플리케이션이 활성화 되었을 때 발생하는 이벤트 입니다.
|
||||
이 이벤트는 어플리케이션의 dock 아이콘을 클릭했을 때 주로 발생합니다.
|
||||
어플리케이션이 활성화 되었을 때 발생하는 이벤트입니다. 이 이벤트는 사용자가
|
||||
어플리케이션의 dock 아이콘을 클릭했을 때 주로 발생합니다.
|
||||
|
||||
### Event: 'continue-activity' _OS X_
|
||||
|
||||
Returns:
|
||||
|
||||
* `event` Event
|
||||
* `type` String - Activity를 식별하는 문자열.
|
||||
[`NSUserActivity.activityType`][activity-type]을 맵핑합니다.
|
||||
* `userInfo` Object - 다른 기기의 activity에서 저장된 앱-특정 상태를 포함합니다.
|
||||
|
||||
다른 기기에서 받아온 activity를 재개하려고 할 때 [Handoff][handoff] 하는 동안
|
||||
발생하는 이벤트입니다. 이 이벤트를 처리하려면 반드시 `event.preventDefault()`를
|
||||
호출해야 합니다.
|
||||
|
||||
사용자 activity는 activity의 소스 어플리케이션과 같은 개발자 팀 ID를 가지는
|
||||
어플리케이션 안에서만 재개될 수 있고, activity의 타입을 지원합니다. 지원하는
|
||||
activity의 타입은 어플리케이션 `Info.plist`의 `NSUserActivityTypes` 키에 열거되어
|
||||
있습니다.
|
||||
|
||||
### Event: 'browser-window-blur'
|
||||
|
||||
|
|
@ -124,7 +142,7 @@ Returns:
|
|||
* `event` Event
|
||||
* `window` BrowserWindow
|
||||
|
||||
[browserWindow](browser-window.md)에 대한 포커스가 사라졌을 때 발생하는 이벤트 입니다.
|
||||
[browserWindow](browser-window.md)에 대한 포커스가 사라졌을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'browser-window-focus'
|
||||
|
||||
|
|
@ -133,7 +151,7 @@ Returns:
|
|||
* `event` Event
|
||||
* `window` BrowserWindow
|
||||
|
||||
[browserWindow](browser-window.md)에 대한 포커스가 발생했을 때 발생하는 이벤트 입니다.
|
||||
[browserWindow](browser-window.md)에 대한 포커스가 발생했을 때 발생하는 이벤트입니다.
|
||||
|
||||
**역주:** _포커스_ 는 창을 클릭해서 활성화 시켰을 때를 말합니다.
|
||||
|
||||
|
|
@ -144,7 +162,7 @@ Returns:
|
|||
* `event` Event
|
||||
* `window` BrowserWindow
|
||||
|
||||
새로운 [browserWindow](browser-window.md)가 생성되었을 때 발생하는 이벤트 입니다.
|
||||
새로운 [browserWindow](browser-window.md)가 생성되었을 때 발생하는 이벤트입니다.
|
||||
|
||||
### Event: 'certificate-error'
|
||||
|
||||
|
|
@ -164,9 +182,9 @@ Returns:
|
|||
기본 동작을 방지하고 인증을 승인할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
app.on('certificate-error', function(event, webContents, url, error, certificate, callback) {
|
||||
if (url == "https://github.com") {
|
||||
// Verification logic.
|
||||
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
|
||||
if (url === 'https://github.com') {
|
||||
// 확인 로직.
|
||||
event.preventDefault();
|
||||
callback(true);
|
||||
} else {
|
||||
|
|
@ -187,7 +205,7 @@ Returns:
|
|||
* `issuerName` String - 발급자의 공통 이름
|
||||
* `callback` Function
|
||||
|
||||
클라이언트 인증이 요청되었을 때 발생하는 이벤트 입니다.
|
||||
클라이언트 인증이 요청되었을 때 발생하는 이벤트입니다.
|
||||
|
||||
`url`은 클라이언트 인증서를 요청하는 탐색 항목에 해당합니다.
|
||||
그리고 `callback`은 목록에서 필터링된 항목과 함께 호출될 필요가 있습니다.
|
||||
|
|
@ -195,10 +213,10 @@ Returns:
|
|||
것을 막습니다.
|
||||
|
||||
```javascript
|
||||
app.on('select-client-certificate', function(event, webContents, url, list, callback) {
|
||||
app.on('select-client-certificate', (event, webContents, url, list, callback) => {
|
||||
event.preventDefault();
|
||||
callback(list[0]);
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Event: 'login'
|
||||
|
|
@ -226,10 +244,10 @@ Returns:
|
|||
`callback(username, password)` 형태의 콜백을 호출하여 인증을 처리해야 합니다.
|
||||
|
||||
```javascript
|
||||
app.on('login', function(event, webContents, request, authInfo, callback) {
|
||||
app.on('login', (event, webContents, request, authInfo, callback) => {
|
||||
event.preventDefault();
|
||||
callback('username', 'secret');
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Event: 'gpu-process-crashed'
|
||||
|
|
@ -383,15 +401,13 @@ npm 모듈 규칙에 따라 대부분의 경우 `package.json`의 `name` 필드
|
|||
|
||||
이 API는 내부적으로 Windows 레지스트리와 LSSetDefaultHandlerForURLScheme를 사용합니다.
|
||||
|
||||
### `app.removeAsDefaultProtocolClient(protocol)` _Windows_
|
||||
### `app.removeAsDefaultProtocolClient(protocol)` _OS X_ _Windows_
|
||||
|
||||
* `protocol` String - 프로토콜의 이름, `://` 제외.
|
||||
|
||||
이 메서드는 현재 실행파일이 지정한 프로토콜(URI scheme)에 대해 기본 핸들러인지를
|
||||
확인합니다. 만약 그렇다면, 이 메서드는 앱을 기본 핸들러에서 제거합니다.
|
||||
|
||||
**참고:** OS X에서는 앱을 제거하면 자동으로 기본 프로토콜 핸들러에서 제거됩니다.
|
||||
|
||||
### `app.isDefaultProtocolClient(protocol)` _OS X_ _Windows_
|
||||
|
||||
* `protocol` String - `://`를 제외한 프로토콜의 이름.
|
||||
|
|
@ -418,7 +434,7 @@ Windows에서 사용할 수 있는 JumpList의 [Tasks][tasks] 카테고리에 `t
|
|||
`Task` Object:
|
||||
* `program` String - 실행할 프로그램의 경로.
|
||||
보통 현재 작동중인 어플리케이션의 경로인 `process.execPath`를 지정합니다.
|
||||
* `arguments` String - `program`이 실행될 때 사용될 명령줄 인자.
|
||||
* `arguments` String - `program`이 실행될 때 사용될 명령줄 인수.
|
||||
* `title` String - JumpList에 표시할 문자열.
|
||||
* `description` String - 이 작업에 대한 설명.
|
||||
* `iconPath` String - JumpList에 표시될 아이콘의 절대 경로.
|
||||
|
|
@ -470,9 +486,9 @@ OS X에선 사용자가 Finder에서 어플리케이션의 두 번째 인스턴
|
|||
인스턴스의 윈도우를 활성화 시키는 예시입니다:
|
||||
|
||||
```javascript
|
||||
var myWindow = null;
|
||||
let myWindow = null;
|
||||
|
||||
var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
|
||||
const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {
|
||||
// 어플리케이션을 중복 실행했습니다. 주 어플리케이션 인스턴스를 활성화 합니다.
|
||||
if (myWindow) {
|
||||
if (myWindow.isMinimized()) myWindow.restore();
|
||||
|
|
@ -487,10 +503,23 @@ if (shouldQuit) {
|
|||
}
|
||||
|
||||
// 윈도우를 생성하고 각종 리소스를 로드하고 작업합니다.
|
||||
app.on('ready', function() {
|
||||
app.on('ready', () => {
|
||||
});
|
||||
```
|
||||
|
||||
### `app.setUserActivity(type, userInfo)` _OS X_
|
||||
|
||||
* `type` String - 고유하게 activity를 식별합니다.
|
||||
[`NSUserActivity.activityType`][activity-type]을 맵핑합니다.
|
||||
* `userInfo` Object - 다른 기기에서 사용하기 위해 저장할 앱-특정 상태.
|
||||
|
||||
`NSUserActivity`를 만들고 현재 activity에 설정합니다. 이 activity는 이후 다른 기기와
|
||||
[Handoff][handoff]할 때 자격으로 사용됩니다.
|
||||
|
||||
### `app.getCurrentActivityType()` _OS X_
|
||||
|
||||
현재 작동중인 activity의 타입을 반환합니다.
|
||||
|
||||
### `app.setAppUserModelId(id)` _Windows_
|
||||
|
||||
* `id` String
|
||||
|
|
@ -577,3 +606,5 @@ dock 아이콘의 `image`를 설정합니다.
|
|||
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
|
||||
[CFBundleURLTypes]: https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html#//apple_ref/doc/uid/TP40009249-102207-TPXREF115
|
||||
[LSCopyDefaultHandlerForURLScheme]: https://developer.apple.com/library/mac/documentation/Carbon/Reference/LaunchServicesReference/#//apple_ref/c/func/LSCopyDefaultHandlerForURLScheme
|
||||
[handoff]: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Handoff/HandoffFundamentals/HandoffFundamentals.html
|
||||
[activity-type]: https://developer.apple.com/library/ios/documentation/Foundation/Reference/NSUserActivity_Class/index.html#//apple_ref/occ/instp/NSUserActivity/activityType
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
```javascript
|
||||
// 메인 프로세스에서
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
const {BrowserWindow} = require('electron');
|
||||
|
||||
// 또는 렌더러 프로세스에서
|
||||
const BrowserWindow = require('electron').remote.BrowserWindow;
|
||||
const {BrowserWindow} = require('electron').remote;
|
||||
|
||||
var win = new BrowserWindow({ width: 800, height: 600, show: false });
|
||||
win.on('closed', function() {
|
||||
let win = new BrowserWindow({width: 800, height: 600, show: false});
|
||||
win.on('closed', () => {
|
||||
win = null;
|
||||
});
|
||||
|
||||
|
|
@ -97,6 +97,10 @@ win.show();
|
|||
* `webPreferences` Object - 웹 페이지 기능을 설정합니다. 사용할 수 있는 속성은
|
||||
아래를 참고하세요.
|
||||
|
||||
`minWidth`/`maxWidth`/`minHeight`/`maxHeight`를 통해 최소 또는 최대 윈도우 크기를
|
||||
지정한 경우, 이는 사용자만을 제약하며, `setBounds`/`setSize` 또는 `BrowserWindow`의
|
||||
생성자에서 크기 제약을 따르지 않는 윈도우 크기를 전달하는 것은 막을 수 없습니다.
|
||||
|
||||
`type` 속성에서 사용할 수 있는 값과 동작은 다음과 같으며, 플랫폼에 따라 다릅니다:
|
||||
|
||||
* Linux의 경우, `desktop`, `dock`, `toolbar`, `splash`, `notification` 종류를
|
||||
|
|
@ -161,6 +165,8 @@ win.show();
|
|||
활성화합니다. 기본값은 `false`입니다.
|
||||
* `directWrite` Boolean - Windows에서 폰트 렌더링을 위해 DirectWrite를
|
||||
사용하는지를 지정합니다. 기본값은 `true`입니다.
|
||||
* `scrollBounce` Boolean - OS X에서 스크롤 튕기기 효과 (탄성 밴딩)를 활성화 합니다.
|
||||
기본값은 `false`입니다.
|
||||
* `blinkFeatures` String - `CSSVariables,KeyboardEventKey`같은 `,`로 구분된
|
||||
기능 문자열들의 리스트입니다. 지원하는 전체 기능 문자열들은
|
||||
[setFeatureEnabledFromString][blink-feature-string] 함수에서 찾을 수 있습니다.
|
||||
|
|
@ -188,7 +194,7 @@ Returns:
|
|||
|
||||
* `event` Event
|
||||
|
||||
문서의 제목이 변경될 때 발생하는 이벤트 입니다. `event.preventDefault()`를 호출하여
|
||||
문서의 제목이 변경될 때 발생하는 이벤트입니다. `event.preventDefault()`를 호출하여
|
||||
네이티브 윈도우의 제목이 변경되는 것을 방지할 수 있습니다.
|
||||
|
||||
### Event: 'close'
|
||||
|
|
@ -208,7 +214,7 @@ Electron에선 빈 문자열 또는 `false`를 전달할 경우 윈도우 종료
|
|||
예시는 다음과 같습니다:
|
||||
|
||||
```javascript
|
||||
window.onbeforeunload = function(e) {
|
||||
window.onbeforeunload = (e) => {
|
||||
console.log('I do not want to be closed');
|
||||
|
||||
// 반드시 문자열을 반환해야 하고 사용자에게 페이지 언로드에 대한 확인 창을 보여주는
|
||||
|
|
@ -312,7 +318,7 @@ Returns:
|
|||
e.g. `APPCOMMAND_BROWSER_BACKWARD` 는 `browser-backward`와 같이 반환됩니다.
|
||||
|
||||
```javascript
|
||||
someWindow.on('app-command', function(e, cmd) {
|
||||
someWindow.on('app-command', (e, cmd) => {
|
||||
// 마우스의 뒤로가기 버튼을 눌렀을 때 뒤로가기 탐색을 실행합니다
|
||||
if (cmd === 'browser-backward' && someWindow.webContents.canGoBack()) {
|
||||
someWindow.webContents.goBack();
|
||||
|
|
@ -384,7 +390,7 @@ ID에 해당하는 윈도우를 찾습니다.
|
|||
|
||||
```javascript
|
||||
// `win`은 BrowserWindow의 인스턴스입니다
|
||||
var win = new BrowserWindow({ width: 800, height: 600 });
|
||||
let win = new BrowserWindow({width: 800, height: 600});
|
||||
```
|
||||
|
||||
### `win.webContents`
|
||||
|
|
@ -677,7 +683,7 @@ Mac OS X에서 시트를 부착할 위치를 지정합니다. 기본적으로
|
|||
표시하기 위해 사용할 것입니다:
|
||||
|
||||
```javascript
|
||||
var toolbarRect = document.getElementById('toolbar').getBoundingClientRect();
|
||||
let toolbarRect = document.getElementById('toolbar').getBoundingClientRect();
|
||||
win.setSheetOffset(toolbarRect.height);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
명령줄 옵션을 추가로 지정할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const app = require('electron').app;
|
||||
const {app} = require('electron');
|
||||
app.commandLine.appendSwitch('remote-debugging-port', '8315');
|
||||
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');
|
||||
|
||||
app.on('ready', function() {
|
||||
app.on('ready', () => {
|
||||
// Your code here
|
||||
});
|
||||
```
|
||||
|
|
@ -109,8 +109,7 @@ Net log 이벤트를 활성화하고 `path`에 로그를 기록합니다.
|
|||
|
||||
## --ssl-version-fallback-min=`version`
|
||||
|
||||
TLS fallback에서 사용할 SSL/TLS 최소 버전을 지정합니다. ("tls1", "tls1.1",
|
||||
"tls1.2")
|
||||
TLS fallback에서 사용할 SSL/TLS 최소 버전을 지정합니다. (`tls1`, `tls1.1`, `tls1.2`)
|
||||
|
||||
## --cipher-suite-blacklist=`cipher_suites`
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
|
||||
> 시스템 클립보드에 복사와 붙여넣기를 수행합니다.
|
||||
|
||||
다음 예시는 클립보드에 문자열을 쓰는 방법을 보여줍니다:
|
||||
|
||||
```javascript
|
||||
const clipboard = require('electron').clipboard;
|
||||
const {clipboard} = require('electron');
|
||||
clipboard.writeText('Example String');
|
||||
```
|
||||
|
||||
X Window 시스템에선 selection 클립보드도 존재합니다. 이를 사용하려면 인자 뒤에
|
||||
X Window 시스템에선 selection 클립보드도 존재합니다. 이를 사용하려면 인수 뒤에
|
||||
`selection` 문자열을 같이 지정해주어야 합니다:
|
||||
|
||||
```javascript
|
||||
|
|
@ -111,7 +113,7 @@ console.log(clipboard.has('<p>selection</p>'));
|
|||
* `type` String (optional)
|
||||
|
||||
```javascript
|
||||
clipboard.write({text: 'test', html: "<b>test</b>"});
|
||||
clipboard.write({text: 'test', html: '<b>test</b>'});
|
||||
```
|
||||
|
||||
`data`를 클립보드에 씁니다.
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
`chrome://tracing/` 페이지를 열고 생성된 파일을 로드하면 결과를 볼 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const contentTracing = require('electron').contentTracing;
|
||||
const {contentTracing} = require('electron');
|
||||
|
||||
const options = {
|
||||
categoryFilter: '*',
|
||||
traceOptions: 'record-until-full,enable-sampling'
|
||||
};
|
||||
|
||||
contentTracing.startRecording(options, function() {
|
||||
contentTracing.startRecording(options, () => {
|
||||
console.log('Tracing started');
|
||||
|
||||
setTimeout(function() {
|
||||
contentTracing.stopRecording('', function(path) {
|
||||
setTimeout(() => {
|
||||
contentTracing.stopRecording('', (path) => {
|
||||
console.log('Tracing data recorded to ' + path);
|
||||
});
|
||||
}, 5000);
|
||||
|
|
@ -36,7 +36,7 @@ contentTracing.startRecording(options, function() {
|
|||
카테고리 그룹 세트를 가져옵니다. 카테고리 그룹은 도달된 코드 경로를 변경할 수 있습니다.
|
||||
|
||||
모든 child 프로세스가 `getCategories` 요청을 승인하면 `callback`이 한 번 호출되며
|
||||
인자에 카테고리 그룹의 배열이 전달됩니다.
|
||||
인수에 카테고리 그룹의 배열이 전달됩니다.
|
||||
|
||||
### `contentTracing.startRecording(options, callback)`
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
다음 예시는 윈격 서버에 어플리케이션 크래시 정보를 자동으로 보고하는 예시입니다:
|
||||
|
||||
```javascript
|
||||
const crashReporter = require('electron').crashReporter;
|
||||
const {crashReporter} = require('electron');
|
||||
|
||||
crashReporter.start({
|
||||
productName: 'YourName',
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
|
||||
```javascript
|
||||
// 렌더러 프로세스 내부
|
||||
var desktopCapturer = require('electron').desktopCapturer;
|
||||
const {desktopCapturer} = require('electron');
|
||||
|
||||
desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) {
|
||||
desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
|
||||
if (error) throw error;
|
||||
for (var i = 0; i < sources.length; ++i) {
|
||||
if (sources[i].name == "Electron") {
|
||||
for (let i = 0; i < sources.length; ++i) {
|
||||
if (sources[i].name === 'Electron') {
|
||||
navigator.webkitGetUserMedia({
|
||||
audio: false,
|
||||
video: {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
다음 예시는 파일과 디렉터리를 다중으로 선택하는 대화 상자를 표시하는 예시입니다:
|
||||
|
||||
```javascript
|
||||
var win = ...; // 대화 상자를 사용할 BrowserWindow 객체
|
||||
const dialog = require('electron').dialog;
|
||||
console.log(dialog.showOpenDialog({ properties: [ 'openFile', 'openDirectory', 'multiSelections' ]}));
|
||||
let win = ...; // 대화 상자를 사용할 BrowserWindow 객체
|
||||
const {dialog} = require('electron');
|
||||
console.log(dialog.showOpenDialog({properties: ['openFile', 'openDirectory', 'multiSelections']}));
|
||||
```
|
||||
|
||||
대화 상자는 Electron의 메인 스레드에서 열립니다. 만약 렌더러 프로세스에서 대화 상자
|
||||
객체를 사용하고 싶다면, `remote`를 통해 접근하는 방법을 고려해야 합니다:
|
||||
|
||||
```javascript
|
||||
const dialog = require('electron').remote.dialog;
|
||||
const {dialog} = require('electron').remote;
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
|
@ -45,10 +45,10 @@ const dialog = require('electron').remote.dialog;
|
|||
```javascript
|
||||
{
|
||||
filters: [
|
||||
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
|
||||
{ name: 'Movies', extensions: ['mkv', 'avi', 'mp4'] },
|
||||
{ name: 'Custom File Type', extensions: ['as'] },
|
||||
{ name: 'All Files', extensions: ['*'] }
|
||||
{name: 'Images', extensions: ['jpg', 'png', 'gif']},
|
||||
{name: 'Movies', extensions: ['mkv', 'avi', 'mp4']},
|
||||
{name: 'Custom File Type', extensions: ['as']},
|
||||
{name: 'All Files', extensions: ['*']}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
|
@ -102,10 +102,10 @@ const dialog = require('electron').remote.dialog;
|
|||
라벨을 가지고 있을 때 해당 버튼의 인덱스를 반환합니다. 따로 두 라벨이 지정되지
|
||||
않은 경우 0을 반환합니다. OS X와 Windows에선 `cancelId` 지정 여부에 상관없이
|
||||
"Cancel" 버튼이 언제나 `cancelId`로 지정됩니다.
|
||||
* `noLink` Boolean - Windows Electron은 "Cancel"이나 "Yes"와 같은 흔히 사용되는
|
||||
버튼을 찾으려고 시도하고 대화 상자 내에서 해당 버튼을 커맨드 링크처럼 만듭니다.
|
||||
이 기능으로 앱을 좀 더 Modern Windows 앱처럼 만들 수 있습니다. 이 기능을 원하지
|
||||
않으면 `noLink`를 true로 지정하면 됩니다.
|
||||
* `noLink` Boolean - Windows에서 Electron은 ("Cancel"이나 "Yes"와 같은) 흔히
|
||||
사용되는 버튼을 찾으려고 시도하고 대화 상자 내에서 해당 버튼을 커맨드 링크처럼
|
||||
만듭니다. 이 기능으로 앱을 좀 더 현대적인 Windows 앱처럼 만들 수 있습니다. 이
|
||||
기능을 원하지 않으면 `noLink`를 true로 지정하면 됩니다.
|
||||
* `callback` Function (optional)
|
||||
|
||||
대화 상자를 표시합니다. `browserWindow`를 지정하면 대화 상자가 완전히 닫힐 때까지
|
||||
|
|
@ -131,7 +131,7 @@ Linux에서 `ready` 이벤트가 발생하기 전에 이 API를 호출할 경우
|
|||
|
||||
## Sheets
|
||||
|
||||
Mac OS X에선, `browserWindow` 인자에 `BrowserWindow` 객체 참조를 전달하면 대화
|
||||
Mac OS X에선, `browserWindow` 인수에 `BrowserWindow` 객체 참조를 전달하면 대화
|
||||
상자가 해당 윈도우에 시트처럼 표시되도록 표현할 수 있습니다. 윈도우의 객체 참조가
|
||||
제공되지 않으면 모달 형태로 표시됩니다.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,20 +8,20 @@
|
|||
|
||||
```javascript
|
||||
// 메인 프로세스
|
||||
win.webContents.session.on('will-download', function(event, item, webContents) {
|
||||
win.webContents.session.on('will-download', (event, item, webContents) => {
|
||||
// Set the save path, making Electron not to prompt a save dialog.
|
||||
item.setSavePath('/tmp/save.pdf');
|
||||
console.log(item.getMimeType());
|
||||
console.log(item.getFilename());
|
||||
console.log(item.getTotalBytes());
|
||||
item.on('updated', function() {
|
||||
item.on('updated', () => {
|
||||
console.log('Received bytes: ' + item.getReceivedBytes());
|
||||
});
|
||||
item.on('done', function(e, state) {
|
||||
if (state == "completed") {
|
||||
console.log("Download successfully");
|
||||
item.on('done', (e, state) => {
|
||||
if (state === 'completed') {
|
||||
console.log('Download successfully');
|
||||
} else {
|
||||
console.log("Download is cancelled or interrupted that can't be resumed");
|
||||
console.log('Download is cancelled or interrupted that can\'t be resumed');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,16 +14,16 @@ API를 사용하여 작업할 때 선택된 파일의 경로를 알 수 있도
|
|||
</div>
|
||||
|
||||
<script>
|
||||
var holder = document.getElementById('holder');
|
||||
holder.ondragover = function () {
|
||||
const holder = document.getElementById('holder');
|
||||
holder.ondragover = () => {
|
||||
return false;
|
||||
};
|
||||
holder.ondragleave = holder.ondragend = function () {
|
||||
holder.ondragleave = holder.ondragend = () => {
|
||||
return false;
|
||||
};
|
||||
holder.ondrop = function (e) {
|
||||
holder.ondrop = (e) => {
|
||||
e.preventDefault();
|
||||
var file = e.dataTransfer.files[0];
|
||||
const file = e.dataTransfer.files[0];
|
||||
console.log('File you dragged here is', file.path);
|
||||
return false;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ Frameless Window를 만드려면 [BrowserWindow](browser-window.md) 객체의
|
|||
`options` 객체에서 `frame` 옵션을 `false`로 지정하면 됩니다:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
var win = new BrowserWindow({ width: 800, height: 600, frame: false });
|
||||
const {BrowserWindow} = require('electron');
|
||||
let win = new BrowserWindow({width: 800, height: 600, frame: false});
|
||||
```
|
||||
|
||||
### 최신 OS X에서 사용할 수 있는 대안
|
||||
|
|
@ -22,10 +22,10 @@ var win = new BrowserWindow({ width: 800, height: 600, frame: false });
|
|||
OS X 10.10 Yosemite 이후의 최신 버전부터는 테두리가 없는 창을 만들 때 새로운 방법을
|
||||
사용할 수 있습니다. `frame` 옵션을 `false`로 지정하여 제목과 창 구성 요소를 모두
|
||||
비활성화하는 대신 새로운 `titleBarStyle` 옵션을 통해 제목만 숨기고 창 구성 요소
|
||||
("흔히 신호등으로 알고 있는")의 기능과 창 크기를 그대로 유지할 수 있습니다:
|
||||
("신호등 버튼")의 기능과 창 크기를 그대로 유지할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var win = new BrowserWindow({ 'titleBarStyle': 'hidden' });
|
||||
let win = new BrowserWindow({titleBarStyle: 'hidden'});
|
||||
```
|
||||
|
||||
## 투명한 창 만들기
|
||||
|
|
@ -34,7 +34,7 @@ Frameless Window 창의 배경을 투명하게 만들고 싶다면 `transparent`
|
|||
바꿔주기만 하면됩니다:
|
||||
|
||||
```javascript
|
||||
var win = new BrowserWindow({ transparent: true, frame: false });
|
||||
let win = new BrowserWindow({transparent: true, frame: false});
|
||||
```
|
||||
|
||||
### API의 한계
|
||||
|
|
|
|||
|
|
@ -11,13 +11,11 @@
|
|||
사용할 수 없습니다.
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const globalShortcut = electron.globalShortcut;
|
||||
const {app, globalShortcut} = require('electron');
|
||||
|
||||
app.on('ready', function() {
|
||||
app.on('ready', () => {
|
||||
// 'CommandOrControl+X' 단축키를 리스너에 등록합니다.
|
||||
var ret = globalShortcut.register('CommandOrControl+X', function() {
|
||||
const ret = globalShortcut.register('CommandOrControl+X', () => {
|
||||
console.log('CommandOrControl+X is pressed');
|
||||
});
|
||||
|
||||
|
|
@ -29,7 +27,7 @@ app.on('ready', function() {
|
|||
console.log(globalShortcut.isRegistered('CommandOrControl+X'));
|
||||
});
|
||||
|
||||
app.on('will-quit', function() {
|
||||
app.on('will-quit', () => {
|
||||
// 단축키의 등록을 해제합니다.
|
||||
globalShortcut.unregister('CommandOrControl+X');
|
||||
|
||||
|
|
|
|||
|
|
@ -20,13 +20,13 @@
|
|||
|
||||
```javascript
|
||||
// 메인 프로세스
|
||||
const ipcMain = require('electron').ipcMain;
|
||||
ipcMain.on('asynchronous-message', function(event, arg) {
|
||||
const {ipcMain} = require('electron');
|
||||
ipcMain.on('asynchronous-message', (event, arg) => {
|
||||
console.log(arg); // "ping" 출력
|
||||
event.sender.send('asynchronous-reply', 'pong');
|
||||
});
|
||||
|
||||
ipcMain.on('synchronous-message', function(event, arg) {
|
||||
ipcMain.on('synchronous-message', (event, arg) => {
|
||||
console.log(arg); // "ping" 출력
|
||||
event.returnValue = 'pong';
|
||||
});
|
||||
|
|
@ -34,10 +34,10 @@ ipcMain.on('synchronous-message', function(event, arg) {
|
|||
|
||||
```javascript
|
||||
// 렌더러 프로세스 (웹 페이지)
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
const {ipcRenderer} = require('electron');
|
||||
console.log(ipc.sendSync('synchronous-message', 'ping')); // "pong" 출력
|
||||
|
||||
ipcRenderer.on('asynchronous-reply', function(arg) {
|
||||
ipcRenderer.on('asynchronous-reply', (arg) => {
|
||||
console.log(arg); // "pong" 출력
|
||||
});
|
||||
ipcRenderer.send('asynchronous-message', 'ping');
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
* `arg` (optional)
|
||||
|
||||
`channel`을 통해 메인 프로세스에 동기 메시지를 보냅니다. 그리고 필요에 따라 임의의
|
||||
인자를 사용할 수도 있습니다. 인수들은 내부적으로 JSON 포맷으로 직렬화 되며, 이후 함수와
|
||||
인수를 사용할 수도 있습니다. 인수들은 내부적으로 JSON 포맷으로 직렬화 되며, 이후 함수와
|
||||
프로토타입 체인은 포함되지 않게 됩니다.
|
||||
|
||||
메인 프로세스는 `ipcMain` 모듈을 통해 `channel` 이벤트를 리스닝 할 수 있고,
|
||||
|
|
|
|||
|
|
@ -14,16 +14,14 @@
|
|||
```html
|
||||
<!-- index.html -->
|
||||
<script>
|
||||
const remote = require('electron').remote;
|
||||
const Menu = remote.Menu;
|
||||
const MenuItem = remote.MenuItem;
|
||||
const {Menu, MenuItem} = require('electron').remote;
|
||||
|
||||
var menu = new Menu();
|
||||
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
|
||||
menu.append(new MenuItem({ type: 'separator' }));
|
||||
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
|
||||
const menu = new Menu();
|
||||
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked'); }}));
|
||||
menu.append(new MenuItem({type: 'separator'}));
|
||||
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}));
|
||||
|
||||
window.addEventListener('contextmenu', function (e) {
|
||||
window.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
menu.popup(remote.getCurrentWindow());
|
||||
}, false);
|
||||
|
|
@ -34,7 +32,7 @@ window.addEventListener('contextmenu', function (e) {
|
|||
어플리케이션 메뉴를 만듭니다:
|
||||
|
||||
```javascript
|
||||
var template = [
|
||||
const template = [
|
||||
{
|
||||
label: 'Edit',
|
||||
submenu: [
|
||||
|
|
@ -79,33 +77,22 @@ var template = [
|
|||
{
|
||||
label: 'Reload',
|
||||
accelerator: 'CmdOrCtrl+R',
|
||||
click: function(item, focusedWindow) {
|
||||
if (focusedWindow)
|
||||
focusedWindow.reload();
|
||||
click(item, focusedWindow) {
|
||||
if (focusedWindow) focusedWindow.reload();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Toggle Full Screen',
|
||||
accelerator: (function() {
|
||||
if (process.platform == 'darwin')
|
||||
return 'Ctrl+Command+F';
|
||||
else
|
||||
return 'F11';
|
||||
})(),
|
||||
click: function(item, focusedWindow) {
|
||||
accelerator: process.platform === 'darwin' ? 'Ctrl+Command+F' : 'F11',
|
||||
click(item, focusedWindow) {
|
||||
if (focusedWindow)
|
||||
focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Toggle Developer Tools',
|
||||
accelerator: (function() {
|
||||
if (process.platform == 'darwin')
|
||||
return 'Alt+Command+I';
|
||||
else
|
||||
return 'Ctrl+Shift+I';
|
||||
})(),
|
||||
click: function(item, focusedWindow) {
|
||||
accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
|
||||
click(item, focusedWindow) {
|
||||
if (focusedWindow)
|
||||
focusedWindow.webContents.toggleDevTools();
|
||||
}
|
||||
|
|
@ -134,14 +121,14 @@ var template = [
|
|||
submenu: [
|
||||
{
|
||||
label: 'Learn More',
|
||||
click: function() { require('electron').shell.openExternal('http://electron.atom.io') }
|
||||
click() { require('electron').shell.openExternal('http://electron.atom.io'); }
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
if (process.platform == 'darwin') {
|
||||
var name = require('electron').remote.app.getName();
|
||||
if (process.platform === 'darwin') {
|
||||
const name = require('electron').remote.app.getName();
|
||||
template.unshift({
|
||||
label: name,
|
||||
submenu: [
|
||||
|
|
@ -180,7 +167,7 @@ if (process.platform == 'darwin') {
|
|||
{
|
||||
label: 'Quit',
|
||||
accelerator: 'Command+Q',
|
||||
click: function() { app.quit(); }
|
||||
click() { app.quit(); }
|
||||
},
|
||||
]
|
||||
});
|
||||
|
|
@ -196,7 +183,7 @@ if (process.platform == 'darwin') {
|
|||
);
|
||||
}
|
||||
|
||||
var menu = Menu.buildFromTemplate(template);
|
||||
const menu = Menu.buildFromTemplate(template);
|
||||
Menu.setApplicationMenu(menu);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ Electron은 파일 경로 또는 `nativeImage` 인스턴스를 통해 이미지
|
|||
전달하여 이미지를 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var appIcon = new Tray('/Users/somebody/images/icon.png');
|
||||
var window = new BrowserWindow({icon: '/Users/somebody/images/window.png'});
|
||||
const appIcon = new Tray('/Users/somebody/images/icon.png');
|
||||
let win = new BrowserWindow({icon: '/Users/somebody/images/window.png'});
|
||||
```
|
||||
|
||||
이 예시는 클립보드로부터 가져온 `nativeImage`로 트레이 메뉴를 생성합니다:
|
||||
|
||||
```javascript
|
||||
var image = clipboard.readImage();
|
||||
var appIcon = new Tray(image);
|
||||
const image = clipboard.readImage();
|
||||
const appIcon = new Tray(image);
|
||||
```
|
||||
|
||||
## 지원하는 포맷
|
||||
|
|
@ -48,7 +48,7 @@ images/
|
|||
|
||||
|
||||
```javascript
|
||||
var appIcon = new Tray('/Users/somebody/images/icon.png');
|
||||
let appIcon = new Tray('/Users/somebody/images/icon.png');
|
||||
```
|
||||
|
||||
지원하는 DPI 접미사는 다음과 같습니다:
|
||||
|
|
@ -115,8 +115,7 @@ var appIcon = new Tray('/Users/somebody/images/icon.png');
|
|||
|
||||
```javascript
|
||||
const nativeImage = require('electron').nativeImage;
|
||||
|
||||
var image = nativeImage.createFromPath('/Users/somebody/images/icon.png');
|
||||
let image = nativeImage.createFromPath('/Users/somebody/images/icon.png');
|
||||
```
|
||||
|
||||
### `image.toPng()`
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
예시:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
const {app} = require('electron');
|
||||
|
||||
app.on('ready', function() {
|
||||
require('electron').powerMonitor.on('suspend', function() {
|
||||
app.on('ready', () => {
|
||||
require('electron').powerMonitor.on('suspend', () => {
|
||||
console.log('절전모드로 진입합니다!');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
예시:
|
||||
|
||||
```javascript
|
||||
const powerSaveBlocker = require('electron').powerSaveBlocker;
|
||||
const {powerSaveBlocker} = require('electron');
|
||||
|
||||
var id = powerSaveBlocker.start('prevent-display-sleep');
|
||||
const id = powerSaveBlocker.start('prevent-display-sleep');
|
||||
console.log(powerSaveBlocker.isStarted(id));
|
||||
|
||||
powerSaveBlocker.stop(id);
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ Electron의 `process` 객체는 기존의 node와는 달리 약간의 차이점
|
|||
빌드일 땐 `undefined`로 지정됩니다.
|
||||
* `process.windowsStore` Boolean - 만약 앱이 Windows Store 앱 (appx)으로 작동하고
|
||||
있다면, 이 값이 `true`로 지정되며 다른 빌드인 경우엔 `undefined`로 지정됩니다.
|
||||
* `process.defaultApp` Boolean - 어플리케이션이 기본 어플리케이션 형식으로 전달되는
|
||||
인수와 함께 실행됐을 때, 메인 프로세스에서 이 값이 `true`가 되며 다른 경우엔
|
||||
`undefined`가 됩니다.
|
||||
|
||||
## Events
|
||||
|
||||
|
|
@ -26,9 +29,9 @@ Electron 내부 초기화 스크립트의 로드가 완료되고, 웹 페이지
|
|||
|
||||
```javascript
|
||||
// preload.js
|
||||
var _setImmediate = setImmediate;
|
||||
var _clearImmediate = clearImmediate;
|
||||
process.once('loaded', function() {
|
||||
const _setImmediate = setImmediate;
|
||||
const _clearImmediate = clearImmediate;
|
||||
process.once('loaded', () => {
|
||||
global.setImmediate = _setImmediate;
|
||||
global.clearImmediate = _clearImmediate;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,23 +5,22 @@
|
|||
다음 예시는 `file://` 프로토콜과 비슷한 일을 하는 커스텀 프로토콜을 설정합니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const {app, protocol} = require('electron');
|
||||
const path = require('path');
|
||||
|
||||
app.on('ready', function() {
|
||||
var protocol = electron.protocol;
|
||||
protocol.registerFileProtocol('atom', function(request, callback) {
|
||||
var url = request.url.substr(7);
|
||||
app.on('ready', () => {
|
||||
protocol.registerFileProtocol('atom', function (request, callback) {
|
||||
const url = request.url.substr(7);
|
||||
callback({path: path.normalize(__dirname + '/' + url)});
|
||||
}, function (error) {
|
||||
if (error)
|
||||
console.error('Failed to register protocol')
|
||||
console.error('Failed to register protocol');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
**참고:** 이 모듈은 `app` 모듈의 `ready` 이벤트가 발생한 이후에만 사용할 수 있습니다.
|
||||
**참고:** 모든 메서드는 따로 표기하지 않는 한 `app` 모듈의 `ready` 이벤트가 발생한
|
||||
이후에만 사용할 수 있습니다.
|
||||
|
||||
## Methods
|
||||
|
||||
|
|
@ -31,12 +30,40 @@ app.on('ready', function() {
|
|||
|
||||
* `schemes` Array - 표준 스킴으로 등록할 커스텀 스킴 리스트
|
||||
|
||||
표준 `scheme`의 형식은 RFC 3986 [일반 URI 구문](https://tools.ietf.org/html/rfc3986#section-3)
|
||||
표준을 따릅니다. 이 형식은 `file:`과 `filesystem:`을 포함합니다.
|
||||
표준 스킴의 형식은 RFC 3986 [일반 URI 문법](https://tools.ietf.org/html/rfc3986#section-3)
|
||||
표준을 따릅니다. 예를 들어 `http`와 `https` 같은 표준 스킴과 `file`과 같은 표준이
|
||||
아닌 스킴이 있습니다.
|
||||
|
||||
표준 스킴으로 등록하면, 상대, 절대 경로의 리소스를 올바르게 취할 수 있습니다. 다른
|
||||
경우엔 스킴이 상대 경로 URL에 대한 분석 기능이 제외된 `file` 프로토콜과 같이
|
||||
작동합니다.
|
||||
|
||||
예를 들어 다음과 같은 페이지에서 표준 스킴 등록 절차 없이 커스텀 프로토콜을 사용하여
|
||||
이미지를 로드하려 했을 때, 표준 스킴으로 등록되지 않은 상대 경로 URL을 인식하지 못하고
|
||||
로드에 실패하게 됩니다:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<img src='test.png'>
|
||||
</body>
|
||||
```
|
||||
|
||||
따라서 커스텀 프로토콜을 등록하여 `http` 프로토콜을 덮어 쓰려면, 표준 스킴으로
|
||||
등록해야만 합니다:
|
||||
|
||||
```javascript
|
||||
protocol.registerStandardSchemes(['atom']);
|
||||
app.on('ready', () => {
|
||||
protocol.registerHttpProtocol('atom', ...);
|
||||
});
|
||||
```
|
||||
|
||||
**참고:** 이 메서드는 `app` 모듈의 `ready` 이벤트가 발생하기 이전에만 사용할 수
|
||||
있습니다.
|
||||
|
||||
### `protocol.registerServiceWorkerSchemes(schemes)`
|
||||
|
||||
* `schemes` Array - 등록될 서비스 워커를 조작할 커스텀 스키마
|
||||
* `schemes` Array - 서비스 워커를 제어하기 위해 등록될 커스텀 스킴.
|
||||
|
||||
### `protocol.registerFileProtocol(scheme, handler[, completion])`
|
||||
|
||||
|
|
@ -62,12 +89,12 @@ The `uploadData` is an array of `data` objects:
|
|||
* `bytes` Buffer - Content being sent.
|
||||
* `file` String - Path of file being uploaded.
|
||||
|
||||
`request`를 처리할 때 반드시 파일 경로 또는 `path` 속성을 포함하는 객체를 인자에
|
||||
`request`를 처리할 때 반드시 파일 경로 또는 `path` 속성을 포함하는 객체를 인수에
|
||||
포함하여 `callback`을 호출해야 합니다. 예: `callback(filePath)` 또는
|
||||
`callback({path: filePath})`.
|
||||
|
||||
만약 `callback`이 아무 인자도 없이 호출되거나 숫자나 `error` 프로퍼티를 가진 객체가
|
||||
인자로 전달될 경우 `request`는 지정한 `error` 코드(숫자)를 출력합니다. 사용할 수 있는
|
||||
만약 `callback`이 아무 인수도 없이 호출되거나 숫자나 `error` 프로퍼티를 가진 객체가
|
||||
인수로 전달될 경우 `request`는 지정한 `error` 코드(숫자)를 출력합니다. 사용할 수 있는
|
||||
에러 코드는 [네트워크 에러 목록][net-error]에서 확인할 수 있습니다.
|
||||
|
||||
기본적으로 `scheme`은 `http:`와 같이 처리됩니다. `file:`과 같이 "일반적인 URI 문법"
|
||||
|
|
@ -89,11 +116,11 @@ The `uploadData` is an array of `data` objects:
|
|||
예시:
|
||||
|
||||
```javascript
|
||||
protocol.registerBufferProtocol('atom', function(request, callback) {
|
||||
protocol.registerBufferProtocol('atom', (request, callback) => {
|
||||
callback({mimeType: 'text/html', data: new Buffer('<h5>Response</h5>')});
|
||||
}, function (error) {
|
||||
}, (error) => {
|
||||
if (error)
|
||||
console.error('Failed to register protocol')
|
||||
console.error('Failed to register protocol');
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -14,10 +14,9 @@ inter-process 통신을 하지 않고도 간단한 API를 통해 직접 메인
|
|||
다음 예시는 렌더러 프로세스에서 브라우저 창을 만드는 예시입니다:
|
||||
|
||||
```javascript
|
||||
const remote = require('electron').remote;
|
||||
const BrowserWindow = remote.BrowserWindow;
|
||||
const {BrowserWindow} = require('electron').remote;
|
||||
|
||||
var win = new BrowserWindow({ width: 800, height: 600 });
|
||||
let win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('https://github.com');
|
||||
```
|
||||
|
||||
|
|
@ -57,7 +56,7 @@ Remote 객체가 GC 되려면 대응하는 메인 프로세스 내부 객체의
|
|||
받을 수 있습니다. 하지만 이 작업은 반드시 주의를 기울여 사용해야 합니다.
|
||||
|
||||
첫째, 데드락을 피하기 위해 메인 프로세스로 전달된 콜백들은 비동기로 호출됩니다. 이러한
|
||||
이유로 메인 프로세스로 전달된 콜백들의 반환 값을 내부 함수에서 언제나 정상적으로 받을
|
||||
이유로 메인 프로세스에 전달된 콜백의 반환 값을 내부 함수에서 언제나 정상적으로 받을
|
||||
것이라고 예측해선 안됩니다.
|
||||
|
||||
예를 들어 메인 프로세스에서 `Array.map` 같은 메서드를 사용할 때 렌더러 프로세스에서
|
||||
|
|
@ -65,54 +64,50 @@ Remote 객체가 GC 되려면 대응하는 메인 프로세스 내부 객체의
|
|||
|
||||
```javascript
|
||||
// mapNumbers.js 메인 프로세스
|
||||
exports.withRendererCallback = function(mapper) {
|
||||
exports.withRendererCallback = (mapper) => {
|
||||
return [1,2,3].map(mapper);
|
||||
}
|
||||
;
|
||||
|
||||
exports.withLocalCallback = function() {
|
||||
return exports.mapNumbers(function(x) {
|
||||
return x + 1;
|
||||
});
|
||||
}
|
||||
exports.withLocalCallback = () => {
|
||||
return exports.mapNumbers(x => x + 1);
|
||||
};
|
||||
```
|
||||
|
||||
```javascript
|
||||
// 렌더러 프로세스
|
||||
var mapNumbers = require("remote").require("./mapNumbers");
|
||||
const mapNumbers = require('remote').require('./mapNumbers');
|
||||
|
||||
var withRendererCb = mapNumbers.withRendererCallback(function(x) {
|
||||
return x + 1;
|
||||
})
|
||||
const withRendererCb = mapNumbers.withRendererCallback(x => x + 1);
|
||||
|
||||
var withLocalCb = mapNumbers.withLocalCallback()
|
||||
const withLocalCb = mapNumbers.withLocalCallback();
|
||||
|
||||
console.log(withRendererCb, withLocalCb) // [true, true, true], [2, 3, 4]
|
||||
console.log(withRendererCb, withLocalCb); // [true, true, true], [2, 3, 4]
|
||||
```
|
||||
|
||||
보다시피 렌더러 콜백의 동기 반환 값은 예상되지 않은 처리입니다.
|
||||
그리고 메인 프로세스에서 처리한 함수의 반환 값과 일치하지 않습니다.
|
||||
보다시피 동기적인 렌더러 콜백 함수의 반환 값은 예상되지 않은 값입니다. 그리고 메인
|
||||
프로세스에서 처리한 함수의 반환 값과 일치하지 않습니다.
|
||||
|
||||
둘째, 콜백들은 메인 프로세스로 전달, 호출된 이후에도 자동으로 함수의 참조가 릴리즈 되지
|
||||
않습니다. 함수 참조는 메인 프로세스에서 GC가 일어나기 전까지 계속 프로세스에 남아있게
|
||||
됩니다.
|
||||
|
||||
다음 코드를 보면 느낌이 올 것입니다. 이 예시는 remote 객체에 `close` 이벤트 콜백을
|
||||
설치합니다:
|
||||
등록합니다:
|
||||
|
||||
```javascript
|
||||
var remote = require('remote');
|
||||
const remote = require('remote');
|
||||
|
||||
remote.getCurrentWindow().on('close', function() {
|
||||
remote.getCurrentWindow().on('close', () => {
|
||||
// blabla...
|
||||
});
|
||||
```
|
||||
|
||||
하지만 이 코드 처럼 이벤트를 명시적으로 제거하지 않는 이상 콜백 함수의 참조가 계속해서
|
||||
메인 프로세스에 남아있게 됩니다. 만약 명시적으로 콜백을 제거하지 않으면 매 번 창을
|
||||
새로고침 할 때마다 콜백을 새로 설치합니다. 게다가 이전 콜백이 제거되지 않고 계속해서
|
||||
쌓이면서 메모리 누수가 발생합니다.
|
||||
하지만 이 코드와 같이 등록된 이벤트는 명시적으로 제거하지 않는 이상 콜백 함수의 참조가
|
||||
계속해서 메인 프로세스에 남아있게 됩니다. 만약 명시적으로 콜백을 제거하지 않으면 매 번
|
||||
창을 새로고침 할 때마다 콜백을 새로 설치합니다. 게다가 이전 콜백이 제거되지 않고
|
||||
계속해서 쌓이면서 메모리 누수가 발생합니다.
|
||||
|
||||
설상가상으로 이전에 설치된 콜백의 콘텍스트가 릴리즈 되고 난 후(예: 페이지 새로고침)
|
||||
설상가상으로 이전에 등록된 콜백의 콘텍스트가 릴리즈 되고 난 후 (e.g. 페이지 새로고침)
|
||||
`close` 이벤트가 발생하면 예외가 발생하고 메인 프로세스가 작동 중지됩니다.
|
||||
|
||||
이러한 문제를 피하려면 렌더러 프로세스에서 메인 프로세스로 넘긴 함수의 참조를 사용 후
|
||||
|
|
|
|||
|
|
@ -15,40 +15,35 @@
|
|||
다음 예시는 화면 전체를 채우는 윈도우 창을 생성합니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
const {app, BrowserWindow, screen: electronScreen} = require('electron');
|
||||
|
||||
var mainWindow;
|
||||
let win;
|
||||
|
||||
app.on('ready', function() {
|
||||
var electronScreen = electron.screen;
|
||||
var size = electronScreen.getPrimaryDisplay().workAreaSize;
|
||||
mainWindow = new BrowserWindow({ width: size.width, height: size.height });
|
||||
app.on('ready', () => {
|
||||
let {width, height} = electronScreen.getPrimaryDisplay().workAreaSize;
|
||||
win = new BrowserWindow({width, height});
|
||||
});
|
||||
```
|
||||
|
||||
다음 예시는 확장 디스플레이에 윈도우를 생성합니다:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var BrowserWindow = require('browser-window');
|
||||
const {app, BrowserWindow, screen: electronScreen} = require('electron');
|
||||
|
||||
var mainWindow;
|
||||
let win;
|
||||
|
||||
app.on('ready', function() {
|
||||
var electronScreen = require('screen');
|
||||
var displays = electronScreen.getAllDisplays();
|
||||
var externalDisplay = null;
|
||||
for (var i in displays) {
|
||||
if (displays[i].bounds.x != 0 || displays[i].bounds.y != 0) {
|
||||
app.on('ready', () => {
|
||||
let displays = electronScreen.getAllDisplays();
|
||||
let externalDisplay = null;
|
||||
for (let i in displays) {
|
||||
if (displays[i].bounds.x !== 0 || displays[i].bounds.y !== 0) {
|
||||
externalDisplay = displays[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (externalDisplay) {
|
||||
mainWindow = new BrowserWindow({
|
||||
win = new BrowserWindow({
|
||||
x: externalDisplay.bounds.x + 50,
|
||||
y: externalDisplay.bounds.y + 50
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@
|
|||
[`webContents`](web-contents.md)에서 `session` 속성으로 접근할 수도 있습니다.
|
||||
|
||||
```javascript
|
||||
var BrowserWindow = require('browser-window');
|
||||
const {BrowserWindow} = require('electron');
|
||||
|
||||
var win = new BrowserWindow({ width: 800, height: 600 });
|
||||
win.loadURL("http://github.com");
|
||||
let win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('http://github.com');
|
||||
|
||||
var ses = win.webContents.session;
|
||||
let ses = win.webContents.session;
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
|
@ -46,7 +46,7 @@ var ses = win.webContents.session;
|
|||
```javascript
|
||||
const session = require('electron').session;
|
||||
|
||||
var ses = session.fromPartition('persist:name');
|
||||
const ses = session.fromPartition('persist:name');
|
||||
```
|
||||
|
||||
### Instance Events
|
||||
|
|
@ -65,9 +65,9 @@ Electron의 `webContents`에서 `item`을 다운로드할 때 발생하는 이
|
|||
틱부터 `item`을 사용할 수 없게 됩니다.
|
||||
|
||||
```javascript
|
||||
session.defaultSession.on('will-download', function(event, item, webContents) {
|
||||
session.defaultSession.on('will-download', (event, item, webContents) => {
|
||||
event.preventDefault();
|
||||
require('request')(item.getURL(), function(data) {
|
||||
require('request')(item.getURL(), (data) => {
|
||||
require('fs').writeFileSync('/somewhere', data);
|
||||
});
|
||||
});
|
||||
|
|
@ -84,19 +84,19 @@ session.defaultSession.on('will-download', function(event, item, webContents) {
|
|||
|
||||
```javascript
|
||||
// 모든 쿠키를 요청합니다.
|
||||
session.defaultSession.cookies.get({}, function(error, cookies) {
|
||||
session.defaultSession.cookies.get({}, (error, cookies) => {
|
||||
console.log(cookies);
|
||||
});
|
||||
|
||||
// url에 관련된 쿠키를 모두 가져옵니다.
|
||||
session.defaultSession.cookies.get({ url : "http://www.github.com" }, function(error, cookies) {
|
||||
session.defaultSession.cookies.get({url: 'http://www.github.com'}, (error, cookies) => {
|
||||
console.log(cookies);
|
||||
});
|
||||
|
||||
// 지정한 쿠키 데이터를 설정합니다.
|
||||
// 동일한 쿠키가 있으면 해당 쿠키를 덮어씁니다.
|
||||
var cookie = { url : "http://www.github.com", name : "dummy_name", value : "dummy" };
|
||||
session.defaultSession.cookies.set(cookie, function(error) {
|
||||
const cookie = {url: 'http://www.github.com', name: 'dummy_name', value: 'dummy'};
|
||||
session.defaultSession.cookies.set(cookie, (error) => {
|
||||
if (error)
|
||||
console.error(error);
|
||||
});
|
||||
|
|
@ -284,8 +284,8 @@ window.webContents.session.enableNetworkEmulation({offline: true});
|
|||
`setCertificateVerifyProc(null)`을 호출하면 기본 검증 프로세스로 되돌립니다.
|
||||
|
||||
```javascript
|
||||
myWindow.webContents.session.setCertificateVerifyProc(function(hostname, cert, callback) {
|
||||
if (hostname == 'github.com')
|
||||
myWindow.webContents.session.setCertificateVerifyProc((hostname, cert, callback) => {
|
||||
if (hostname === 'github.com')
|
||||
callback(true);
|
||||
else
|
||||
callback(false);
|
||||
|
|
@ -304,9 +304,9 @@ myWindow.webContents.session.setCertificateVerifyProc(function(hostname, cert, c
|
|||
호출하면 권한 제공을 거부합니다.
|
||||
|
||||
```javascript
|
||||
session.fromPartition(partition).setPermissionRequestHandler(function(webContents, permission, callback) {
|
||||
session.fromPartition(partition).setPermissionRequestHandler((webContents, permission, callback) => {
|
||||
if (webContents.getURL() === host) {
|
||||
if (permission == "notifications") {
|
||||
if (permission === 'notifications') {
|
||||
callback(false); // 거부됨.
|
||||
return;
|
||||
}
|
||||
|
|
@ -340,11 +340,11 @@ session.fromPartition(partition).setPermissionRequestHandler(function(webContent
|
|||
|
||||
```javascript
|
||||
// 다음 url에 대한 User Agent를 조작합니다.
|
||||
var filter = {
|
||||
urls: ["https://*.github.com/*", "*://electron.github.io"]
|
||||
const filter = {
|
||||
urls: ['https://*.github.com/*', '*://electron.github.io']
|
||||
};
|
||||
|
||||
session.defaultSession.webRequest.onBeforeSendHeaders(filter, function(details, callback) {
|
||||
session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
|
||||
details.requestHeaders['User-Agent'] = "MyAgent";
|
||||
callback({cancel: false, requestHeaders: details.requestHeaders});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
다음 예시는 설정된 URL을 유저의 기본 브라우저로 엽니다:
|
||||
|
||||
```javascript
|
||||
const shell = require('electron').shell;
|
||||
const {shell} = require('electron');
|
||||
|
||||
shell.openExternal('https://github.com');
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -18,15 +18,13 @@ node 모듈을 완벽하게 지원합니다. ([네이티브 모듈](../tutorial/
|
|||
메인 프로세스 스크립트는 일반 Node.js 스크립트와 비슷합니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
const {app, BrowserWindow} = require('electron');
|
||||
|
||||
var window = null;
|
||||
let win = null;
|
||||
|
||||
app.on('ready', function() {
|
||||
window = new BrowserWindow({width: 800, height: 600});
|
||||
window.loadURL('https://github.com');
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('https://github.com');
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -38,8 +36,8 @@ app.on('ready', function() {
|
|||
<html>
|
||||
<body>
|
||||
<script>
|
||||
const remote = require('electron').remote;
|
||||
console.log(remote.app.getVersion());
|
||||
const {app} = require('electron').remote;
|
||||
console.log(app.getVersion());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -50,15 +48,28 @@ app.on('ready', function() {
|
|||
|
||||
## 분리 할당
|
||||
|
||||
만약 CoffeeScript나 Babel을 사용하고 있다면, 빌트인 모듈을 사용할 때
|
||||
[분리 할당][destructuring-assignment]을 통해 직관적으로 사용할 수 있습니다:
|
||||
0.37 버전부터, [분리 할당][destructuring-assignment]을 통해 빌트인 모듈을 더
|
||||
직관적으로 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
const {app, BrowserWindow} = require('electron');
|
||||
```
|
||||
|
||||
아직 플레인 자바스크립트를 쓰고 있다면, Chrome이 ES6를 완전히 지원하기 전까지 기다려야
|
||||
합니다.
|
||||
모든 `electron` 모듈이 필요하다면, 먼저 require한 후 각 독립적인 모듈을
|
||||
`electron`에서 분리 할당함으로써 모듈을 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const {app, BrowserWindow} = electron;
|
||||
```
|
||||
|
||||
위 코드는 다음과 같습니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
```
|
||||
|
||||
## 이전 스타일의 빌트인 모듈 비활성화
|
||||
|
||||
|
|
@ -76,7 +87,7 @@ process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true'
|
|||
또는 `hideInternalModules` API를 사용해도 됩니다:
|
||||
|
||||
```javascript
|
||||
require('electron').hideInternalModules()
|
||||
require('electron').hideInternalModules();
|
||||
```
|
||||
|
||||
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface
|
||||
|
|
|
|||
|
|
@ -3,24 +3,20 @@
|
|||
> 아이콘과 컨텍스트 메뉴를 시스템 알림 영역에 추가합니다.
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const Menu = electron.Menu;
|
||||
const Tray = electron.Tray;
|
||||
const {app, Menu, Tray} = require('electron');
|
||||
|
||||
var appIcon = null;
|
||||
app.on('ready', function(){
|
||||
let appIcon = null;
|
||||
app.on('ready', () => {
|
||||
appIcon = new Tray('/path/to/my/icon'); // 현재 어플리케이션 디렉터리를 기준으로 하려면 `__dirname + '/images/tray.png'` 형식으로 입력해야 합니다.
|
||||
var contextMenu = Menu.buildFromTemplate([
|
||||
{ label: 'Item1', type: 'radio' },
|
||||
{ label: 'Item2', type: 'radio' },
|
||||
{ label: 'Item3', type: 'radio', checked: true },
|
||||
{ label: 'Item4', type: 'radio' }
|
||||
const contextMenu = Menu.buildFromTemplate([
|
||||
{label: 'Item1', type: 'radio'},
|
||||
{label: 'Item2', type: 'radio'},
|
||||
{label: 'Item3', type: 'radio', checked: true},
|
||||
{label: 'Item4', type: 'radio'}
|
||||
]);
|
||||
appIcon.setToolTip('이것은 나의 어플리케이션 입니다!');
|
||||
appIcon.setContextMenu(contextMenu);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
__플랫폼별 한계:__
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
|
||||
var win = new BrowserWindow({width: 800, height: 1500});
|
||||
win.loadURL("http://github.com");
|
||||
let win = new BrowserWindow({width: 800, height: 1500});
|
||||
win.loadURL('http://github.com');
|
||||
|
||||
var webContents = win.webContents;
|
||||
let webContents = win.webContents;
|
||||
```
|
||||
|
||||
## Events
|
||||
|
|
@ -322,7 +322,7 @@ Returns:
|
|||
하는 경우 `pragma` 헤더를 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
const options = {"extraHeaders" : "pragma: no-cache\n"}
|
||||
const options = {extraHeaders: 'pragma: no-cache\n'};
|
||||
webContents.loadURL(url, options)
|
||||
```
|
||||
|
||||
|
|
@ -338,10 +338,10 @@ webContents.loadURL(url, options)
|
|||
현재 웹 페이지의 URL을 반환합니다.
|
||||
|
||||
```javascript
|
||||
var win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL("http://github.com");
|
||||
let win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('http://github.com');
|
||||
|
||||
var currentURL = win.webContents.getURL();
|
||||
let currentURL = win.webContents.getURL();
|
||||
```
|
||||
|
||||
### `webContents.getTitle()`
|
||||
|
|
@ -533,12 +533,12 @@ CSS 코드를 현재 웹 페이지에 삽입합니다.
|
|||
제공된 `action`에 대한 `webContents`의 모든 `findInPage` 요청을 중지합니다.
|
||||
|
||||
```javascript
|
||||
webContents.on('found-in-page', function(event, result) {
|
||||
webContents.on('found-in-page', (event, result) => {
|
||||
if (result.finalUpdate)
|
||||
webContents.stopFindInPage("clearSelection");
|
||||
webContents.stopFindInPage('clearSelection');
|
||||
});
|
||||
|
||||
const requestId = webContents.findInPage("api");
|
||||
const requestId = webContents.findInPage('api');
|
||||
```
|
||||
|
||||
### `webContents.hasServiceWorker(callback)`
|
||||
|
|
@ -584,7 +584,7 @@ print기능을 사용하지 않는 경우 전체 바이너리 크기를 줄이
|
|||
* `printSelectionOnly` Boolean - 선택된 영역만 프린트할지 여부를 정합니다.
|
||||
* `landscape` Boolean - landscape을 위해선 `true`를, portrait를 위해선 `false`를
|
||||
사용합니다.
|
||||
* `callback` Function - `function(error, data) {}`
|
||||
* `callback` Function - `(error, data) => {}`
|
||||
|
||||
Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의 웹 페이지를 PDF로
|
||||
프린트합니다.
|
||||
|
|
@ -607,19 +607,19 @@ Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의
|
|||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
const fs = require('fs');
|
||||
|
||||
var win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL("http://github.com");
|
||||
let win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('http://github.com');
|
||||
|
||||
win.webContents.on("did-finish-load", function() {
|
||||
win.webContents.on('did-finish-load', () => {
|
||||
// Use default printing options
|
||||
win.webContents.printToPDF({}, function(error, data) {
|
||||
win.webContents.printToPDF({}, (error, data) => {
|
||||
if (error) throw error;
|
||||
fs.writeFile("/tmp/print.pdf", data, function(error) {
|
||||
fs.writeFile('/tmp/print.pdf', data, (error) => {
|
||||
if (error)
|
||||
throw error;
|
||||
console.log("Write PDF successfully.");
|
||||
})
|
||||
})
|
||||
console.log('Write PDF successfully.');
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -631,8 +631,8 @@ win.webContents.on("did-finish-load", function() {
|
|||
이후에 사용해야 합니다.
|
||||
|
||||
```javascript
|
||||
mainWindow.webContents.on('devtools-opened', function() {
|
||||
mainWindow.webContents.addWorkSpace(__dirname);
|
||||
win.webContents.on('devtools-opened', () => {
|
||||
win.webContents.addWorkSpace(__dirname);
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -696,12 +696,12 @@ mainWindow.webContents.on('devtools-opened', function() {
|
|||
|
||||
```javascript
|
||||
// In the main process.
|
||||
var window = null;
|
||||
app.on('ready', function() {
|
||||
window = new BrowserWindow({width: 800, height: 600});
|
||||
window.loadURL('file://' + __dirname + '/index.html');
|
||||
window.webContents.on('did-finish-load', function() {
|
||||
window.webContents.send('ping', 'whoooooooh!');
|
||||
let win = null;
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('file://' + __dirname + '/index.html');
|
||||
win.webContents.on('did-finish-load', () => {
|
||||
win.webContents.send('ping', 'whoooooooh!');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
|
@ -711,7 +711,7 @@ app.on('ready', function() {
|
|||
<html>
|
||||
<body>
|
||||
<script>
|
||||
require('electron').ipcRenderer.on('ping', function(event, message) {
|
||||
require('electron').ipcRenderer.on('ping', (event, message) => {
|
||||
console.log(message); // Prints "whoooooooh!"
|
||||
});
|
||||
</script>
|
||||
|
|
@ -820,7 +820,7 @@ Input `event`를 웹 페이지로 전송합니다.
|
|||
* `HTMLOnly` - 페이지의 HTML만 저장합니다.
|
||||
* `HTMLComplete` - 페이지의 완성된 HTML을 저장합니다.
|
||||
* `MHTML` - 페이지의 완성된 HTML을 MHTML로 저장합니다.
|
||||
* `callback` Function - `function(error) {}`.
|
||||
* `callback` Function - `(error) => {}`.
|
||||
* `error` Error
|
||||
|
||||
만약 페이지를 저장하는 프로세스가 성공적으로 끝났을 경우 true를 반환합니다.
|
||||
|
|
@ -828,10 +828,10 @@ Input `event`를 웹 페이지로 전송합니다.
|
|||
```javascript
|
||||
win.loadURL('https://github.com');
|
||||
|
||||
win.webContents.on('did-finish-load', function() {
|
||||
win.webContents.savePage('/tmp/test.html', 'HTMLComplete', function(error) {
|
||||
win.webContents.on('did-finish-load', () => {
|
||||
win.webContents.savePage('/tmp/test.html', 'HTMLComplete', (error) => {
|
||||
if (!error)
|
||||
console.log("Save page successfully");
|
||||
console.log('Save page successfully');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
|
@ -861,23 +861,23 @@ win.webContents.on('did-finish-load', function() {
|
|||
|
||||
```javascript
|
||||
try {
|
||||
win.webContents.debugger.attach("1.1");
|
||||
win.webContents.debugger.attach('1.1');
|
||||
} catch(err) {
|
||||
console.log("Debugger attach failed : ", err);
|
||||
console.log('Debugger attach failed : ', err);
|
||||
};
|
||||
|
||||
win.webContents.debugger.on('detach', function(event, reason) {
|
||||
console.log("Debugger detached due to : ", reason);
|
||||
win.webContents.debugger.on('detach', (event, reason) => {
|
||||
console.log('Debugger detached due to : ', reason);
|
||||
});
|
||||
|
||||
win.webContents.debugger.on('message', function(event, method, params) {
|
||||
if (method == "Network.requestWillBeSent") {
|
||||
if (params.request.url == "https://www.github.com")
|
||||
win.webContents.debugger.on('message', (event, method, params) => {
|
||||
if (method === 'Network.requestWillBeSent') {
|
||||
if (params.request.url === 'https://www.github.com')
|
||||
win.webContents.debugger.detach();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
win.webContents.debugger.sendCommand("Network.enable");
|
||||
win.webContents.debugger.sendCommand('Network.enable');
|
||||
```
|
||||
|
||||
#### `webContents.debugger.attach([protocolVersion])`
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
다음 예시는 현재 페이지를 200% 줌 합니다:
|
||||
|
||||
```javascript
|
||||
var webFrame = require('electron').webFrame;
|
||||
const {webFrame} = require('electron');
|
||||
|
||||
webFrame.setZoomFactor(2);
|
||||
```
|
||||
|
|
@ -58,8 +58,8 @@ Input field나 text area에 철자 검사(spell checking) 제공자를 설정합
|
|||
[node-spellchecker][spellchecker]를 철자 검사 제공자로 사용하는 예시입니다:
|
||||
|
||||
```javascript
|
||||
webFrame.setSpellCheckProvider("en-US", true, {
|
||||
spellCheck: function(text) {
|
||||
webFrame.setSpellCheckProvider('en-US', true, {
|
||||
spellCheck(text) {
|
||||
return !(require('spellchecker').isMisspelled(text));
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -29,19 +29,21 @@
|
|||
|
||||
```html
|
||||
<script>
|
||||
onload = function() {
|
||||
var webview = document.getElementById("foo");
|
||||
var indicator = document.querySelector(".indicator");
|
||||
onload = () => {
|
||||
const webview = document.getElementById('foo');
|
||||
const indicator = document.querySelector('.indicator');
|
||||
|
||||
var loadstart = function() {
|
||||
indicator.innerText = "loading...";
|
||||
}
|
||||
var loadstop = function() {
|
||||
indicator.innerText = "";
|
||||
}
|
||||
webview.addEventListener("did-start-loading", loadstart);
|
||||
webview.addEventListener("did-stop-loading", loadstop);
|
||||
}
|
||||
const loadstart = () => {
|
||||
indicator.innerText = 'loading...';
|
||||
};
|
||||
|
||||
const loadstop = () => {
|
||||
indicator.innerText = '';
|
||||
};
|
||||
|
||||
webview.addEventListener('did-start-loading', loadstart);
|
||||
webview.addEventListener('did-stop-loading', loadstop);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -205,7 +207,7 @@ API를 사용할 수 있습니다. 이를 지정하면 내부에서 로우레벨
|
|||
**예시**
|
||||
|
||||
```javascript
|
||||
webview.addEventListener("dom-ready", function() {
|
||||
webview.addEventListener('dom-ready', () => {
|
||||
webview.openDevTools();
|
||||
});
|
||||
```
|
||||
|
|
@ -450,7 +452,7 @@ Webview 페이지를 PDF 형식으로 인쇄합니다.
|
|||
* `args` (optional)
|
||||
|
||||
`channel`을 통해 렌더러 프로세스로 비동기 메시지를 보냅니다. 또한 `args`를 지정하여
|
||||
임의의 인자를 보낼 수도 있습니다. 렌더러 프로세스는 `ipcRenderer` 모듈의 `channel`
|
||||
임의의 인수를 보낼 수도 있습니다. 렌더러 프로세스는 `ipcRenderer` 모듈의 `channel`
|
||||
이벤트로 이 메시지를 받아 처리할 수 있습니다.
|
||||
|
||||
예시는 [webContents.send](web-contents.md#webcontentssendchannel-args)를 참고하세요.
|
||||
|
|
@ -588,7 +590,7 @@ Returns:
|
|||
콘솔에 다시 로깅하는 예시입니다.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('console-message', function(e) {
|
||||
webview.addEventListener('console-message', (e) => {
|
||||
console.log('Guest page logged a message:', e.message);
|
||||
});
|
||||
```
|
||||
|
|
@ -608,12 +610,12 @@ Returns:
|
|||
사용할 수 있을 때 발생하는 이벤트입니다.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('found-in-page', function(e) {
|
||||
webview.addEventListener('found-in-page', (e) => {
|
||||
if (e.result.finalUpdate)
|
||||
webview.stopFindInPage("keepSelection");
|
||||
webview.stopFindInPage('keepSelection');
|
||||
});
|
||||
|
||||
const rquestId = webview.findInPage("test");
|
||||
const rquestId = webview.findInPage('test');
|
||||
```
|
||||
|
||||
### Event: 'new-window'
|
||||
|
|
@ -631,10 +633,12 @@ Returns:
|
|||
다음 예시 코드는 새 URL을 시스템의 기본 브라우저로 여는 코드입니다.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('new-window', function(e) {
|
||||
var protocol = require('url').parse(e.url).protocol;
|
||||
const {shell} = require('electron');
|
||||
|
||||
webview.addEventListener('new-window', (e) => {
|
||||
const protocol = require('url').parse(e.url).protocol;
|
||||
if (protocol === 'http:' || protocol === 'https:') {
|
||||
require('electron').shell.openExternal(e.url);
|
||||
shell.openExternal(e.url);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
|
@ -687,7 +691,7 @@ Returns:
|
|||
이동시키는 예시입니다.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('close', function() {
|
||||
webview.addEventListener('close', () => {
|
||||
webview.src = 'about:blank';
|
||||
});
|
||||
```
|
||||
|
|
@ -706,7 +710,7 @@ Returns:
|
|||
|
||||
```javascript
|
||||
// In embedder page.
|
||||
webview.addEventListener('ipc-message', function(event) {
|
||||
webview.addEventListener('ipc-message', (event) => {
|
||||
console.log(event.channel);
|
||||
// Prints "pong"
|
||||
});
|
||||
|
|
@ -715,8 +719,8 @@ webview.send('ping');
|
|||
|
||||
```javascript
|
||||
// In guest page.
|
||||
var ipcRenderer = require('electron').ipcRenderer;
|
||||
ipcRenderer.on('ping', function() {
|
||||
const {ipcRenderer} = require('electron');
|
||||
ipcRenderer.on('ping', () => {
|
||||
ipcRenderer.sendToHost('pong');
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
합니다.
|
||||
|
||||
새롭게 생성된 `BrowserWindow`는 기본적으로 부모 창의 옵션을 상속합니다. 이 옵션을
|
||||
변경하려면 새 창을 열 때 `features` 인자를 지정해야 합니다.
|
||||
변경하려면 새 창을 열 때 `features` 인수를 지정해야 합니다.
|
||||
|
||||
### `window.open(url[, frameName][, features])`
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ $ python script\build.py -c D
|
|||
## 64비트 빌드
|
||||
|
||||
64비트를 타겟으로 빌드 하려면 부트스트랩 스크립트를 실행할 때 `--target_arch=x64`
|
||||
인자를 같이 넘겨주면 됩니다:
|
||||
인수를 같이 넘겨주면 됩니다:
|
||||
|
||||
```powershell
|
||||
$ python script\bootstrap.py -v --target_arch=x64
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@ Electron 소스 코드가 중단점을 통해 순차적으로 쉽게 디버깅
|
|||
설정해야 합니다. 이 작업은 Visual Studio가 Electron에서 무슨일이 일어나는지 더 잘
|
||||
이해할 수 있도록 하며 변수를 사람이 읽기 좋은 포맷으로 쉽게 표현할 수 있도록 합니다.
|
||||
|
||||
* **ProcMon**: 이 무료 [SysInternals][sys-internals] 툴은 프로세스 인자, 파일
|
||||
* **ProcMon**: 이 무료 [SysInternals][sys-internals] 툴은 프로세스 인수, 파일
|
||||
핸들러 그리고 레지스트리 작업을 탐색할 수 있게 도와줍니다.
|
||||
|
||||
## Electron에 디버거 연결하고 디버깅하기
|
||||
|
||||
디버깅 작업을 시작하려면, PowerShell/CMD 중 한 가지를 열고 디버그 빌드 상태의
|
||||
Electron에 인자로 어플리케이션을 전달하여 실행합니다:
|
||||
Electron에 인수로 어플리케이션을 전달하여 실행합니다:
|
||||
|
||||
```powershell
|
||||
$ ./out/D/electron.exe ~/my-electron-app/
|
||||
|
|
|
|||
|
|
@ -3,16 +3,19 @@
|
|||
## 언제 Electron이 최신 버전의 Chrome으로 업그레이드 되나요?
|
||||
|
||||
Electron의 Chrome 버전은 보통 새로운 Chrome 안정 버전이 릴리즈 된 이후 1주 내지 2주
|
||||
내로 업데이트됩니다.
|
||||
내로 업데이트됩니다. 하지만 이러한 업데이트 주기는 보장되지 않으며 업그레이드에 필요한
|
||||
작업의 양에 따라 달라집니다.
|
||||
|
||||
또한 우리는 크롬의 안정된 채널만을 이용합니다, 만약 중요한 수정이 베타 또는 개발 채널인
|
||||
경우, 우리는 해당 버전 대신 이전 버전을 다시 사용합니다.
|
||||
Electron은 크롬이 사용하는 안정된 채널만을 이용합니다, 만약 중요한 수정이 베타 또는
|
||||
개발 채널에 패치된 경우, 이전 버전의 채널로 롤백합니다.
|
||||
|
||||
자세한 내용은 [보안 설명](../tutorial/electron-security.md)을 참고하세요.
|
||||
|
||||
## Electron은 언제 최신 버전의 Node.js로 업그레이드 하나요?
|
||||
|
||||
새로운 버전의 Node.js가 릴리즈 되면, 우리는 보통 Electron을 업그레이드 하기 전에 한
|
||||
달 정도 대기합니다. 이렇게 하면 새로운 Node.js 버전을 업데이트 함으로써 발생하는
|
||||
버그들을 피할 수 있습니다. 이러한 상황은 자주 발생합니다.
|
||||
새로운 버전의 Node.js가 릴리즈 되면, 보통 Electron을 업그레이드 하기 전에 한 달 정도
|
||||
대기합니다. 이렇게 하면 새로운 Node.js 버전을 업데이트 함으로써 발생하는 버그들을
|
||||
피할 수 있기 때문입니다. 이러한 상황은 자주 발생합니다.
|
||||
|
||||
Node.js의 새로운 기능은 보통 V8 업그레이드에서 가져옵니다. Electron은 Chrome
|
||||
브라우저에 탑재된 V8을 사용하고 있습니다. 눈부신 새로운 Node.js 버전의 자바스크립트
|
||||
|
|
@ -59,18 +62,18 @@ console.log(require('remote').getGlobal('sharedObject').someProperty);
|
|||
만약 빠르게 고치고 싶다면, 다음과 같이 변수를 전역 변수로 만드는 방법이 있습니다:
|
||||
|
||||
```javascript
|
||||
app.on('ready', function() {
|
||||
var tray = new Tray('/path/to/icon.png');
|
||||
})
|
||||
app.on('ready', () => {
|
||||
const tray = new Tray('/path/to/icon.png');
|
||||
});
|
||||
```
|
||||
|
||||
를 이렇게:
|
||||
|
||||
```javascript
|
||||
var tray = null;
|
||||
app.on('ready', function() {
|
||||
let tray = null;
|
||||
app.on('ready', () => {
|
||||
tray = new Tray('/path/to/icon.png');
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Electron에서 jQuery/RequireJS/Meteor/AngularJS를 사용할 수 없습니다.
|
||||
|
|
@ -83,7 +86,7 @@ Node.js가 Electron에 합쳐졌기 때문에, DOM에 `module`, `exports`, `requ
|
|||
|
||||
```javascript
|
||||
// 메인 프로세스에서.
|
||||
var mainWindow = new BrowserWindow({
|
||||
let win = new BrowserWindow({
|
||||
webPreferences: {
|
||||
nodeIntegration: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ Returns:
|
|||
다음과 같이 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
Alarm.on('wake-up', function(time) {
|
||||
Alarm.on('wake-up', (time) => {
|
||||
console.log(time)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -70,8 +70,8 @@ require('/path/to/example.asar/dir/module.js');
|
|||
`BrowserWindow` 클래스를 이용해 원하는 웹 페이지도 표시할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
var win = new BrowserWindow({width: 800, height: 600});
|
||||
const {BrowserWindow} = require('electron');
|
||||
let win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadURL('file:///path/to/example.asar/static/index.html');
|
||||
```
|
||||
|
||||
|
|
@ -84,8 +84,8 @@ win.loadURL('file:///path/to/example.asar/static/index.html');
|
|||
|
||||
```html
|
||||
<script>
|
||||
var $ = require('./jquery.min.js');
|
||||
$.get('file:///path/to/example.asar/file.txt', function(data) {
|
||||
let $ = require('./jquery.min.js');
|
||||
$.get('file:///path/to/example.asar/file.txt', (data) => {
|
||||
console.log(data);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -99,7 +99,7 @@ $.get('file:///path/to/example.asar/file.txt', function(data) {
|
|||
읽어들입니다:
|
||||
|
||||
```javascript
|
||||
var originalFs = require('original-fs');
|
||||
const originalFs = require('original-fs');
|
||||
originalFs.readFileSync('/path/to/example.asar');
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@ Windows, Linux, OS X 운영체제 모두 기본적으로 어플리케이션에
|
|||
**참고:** 이 API는 HTML5 API이기 때문에 렌더러 프로세스에서만 사용할 수 있습니다.
|
||||
|
||||
```javascript
|
||||
var myNotification = new Notification('Title', {
|
||||
let myNotification = new Notification('Title', {
|
||||
body: 'Lorem Ipsum Dolor Sit Amet'
|
||||
});
|
||||
|
||||
myNotification.onclick = function () {
|
||||
console.log('Notification clicked')
|
||||
}
|
||||
myNotification.onclick = () => {
|
||||
console.log('Notification clicked');
|
||||
};
|
||||
```
|
||||
|
||||
위 코드를 통해 생성한 데스크톱 알림은 각 운영체제 모두 비슷한 사용자 경험을 제공하지만,
|
||||
|
|
@ -90,7 +90,7 @@ app.clearRecentDocuments();
|
|||
않습니다. 어플리케이션 등록에 관련된 API의 모든 내용은 [Application Registration][app-registration]에서
|
||||
찾아볼 수 있습니다.
|
||||
|
||||
유저가 JumpList에서 파일을 클릭할 경우 클릭된 파일의 경로가 커맨드 라인 인자로 추가되어
|
||||
유저가 JumpList에서 파일을 클릭할 경우 클릭된 파일의 경로가 커맨드 라인 인수로 추가되어
|
||||
새로운 인스턴스의 어플리케이션이 실행됩니다.
|
||||
|
||||
### OS X에서 주의할 점
|
||||
|
|
@ -110,18 +110,17 @@ __Terminal.app의 dock menu:__
|
|||
OS X에서만 사용 가능합니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const Menu = electron.Menu;
|
||||
const {app, Menu} = require('electron');
|
||||
|
||||
var dockMenu = Menu.buildFromTemplate([
|
||||
{ label: 'New Window', click: function() { console.log('New Window'); } },
|
||||
{ label: 'New Window with Settings', submenu: [
|
||||
{ label: 'Basic' },
|
||||
{ label: 'Pro'}
|
||||
const dockMenu = Menu.buildFromTemplate([
|
||||
{label: 'New Window', click() { console.log('New Window'); }},
|
||||
{label: 'New Window with Settings', submenu: [
|
||||
{label: 'Basic'},
|
||||
{label: 'Pro'}
|
||||
]},
|
||||
{ label: 'New Command...'}
|
||||
{label: 'New Command...'}
|
||||
]);
|
||||
|
||||
app.dock.setMenu(dockMenu);
|
||||
```
|
||||
|
||||
|
|
@ -149,7 +148,7 @@ __Internet Explorer의 작업:__
|
|||
|
||||
|
||||
OS X의 dock menu(진짜 메뉴)와는 달리 Windows의 사용자 작업은 어플리케이션 바로
|
||||
가기처럼 작동합니다. 유저가 작업을 클릭할 때 설정한 인자와 함께 새로운 어플리케이션이
|
||||
가기처럼 작동합니다. 유저가 작업을 클릭할 때 설정한 인수와 함께 새로운 어플리케이션이
|
||||
실행됩니다.
|
||||
|
||||
사용자 작업을 설정하려면 [app.setUserTasks][setusertaskstasks] 메서드를 통해 구현할
|
||||
|
|
@ -168,7 +167,7 @@ app.setUserTasks([
|
|||
]);
|
||||
```
|
||||
|
||||
작업 리스트를 비우려면 간단히 `app.setUserTasks` 메서드의 첫번째 인자에 빈 배열을 넣어
|
||||
작업 리스트를 비우려면 간단히 `app.setUserTasks` 메서드의 첫번째 인수에 빈 배열을 넣어
|
||||
호출하면 됩니다:
|
||||
|
||||
```javascript
|
||||
|
|
@ -203,24 +202,25 @@ __Windows Media Player의 미리보기 툴바:__
|
|||
미리보기 툴바를 설정할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const BrowserWindow = require('electron').BrowserWindow;
|
||||
const {BrowserWindow} = require('electron');
|
||||
const path = require('path');
|
||||
|
||||
var win = new BrowserWindow({
|
||||
let win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600
|
||||
});
|
||||
|
||||
win.setThumbarButtons([
|
||||
{
|
||||
tooltip: "button1",
|
||||
tooltip: 'button1',
|
||||
icon: path.join(__dirname, 'button1.png'),
|
||||
click: function() { console.log("button2 clicked"); }
|
||||
click() { console.log('button2 clicked'); }
|
||||
},
|
||||
{
|
||||
tooltip: "button2",
|
||||
tooltip: 'button2',
|
||||
icon: path.join(__dirname, 'button2.png'),
|
||||
flags:['enabled', 'dismissonclick'],
|
||||
click: function() { console.log("button2 clicked."); }
|
||||
click() { console.log('button2 clicked.'); }
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
|
@ -259,8 +259,8 @@ __작업 표시줄 버튼의 프로그래스 바:__
|
|||
있습니다:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setProgressBar(0.5);
|
||||
let win = new BrowserWindow({...});
|
||||
win.setProgressBar(0.5);
|
||||
```
|
||||
|
||||
## 작업 표시줄의 아이콘 오버레이 (Windows)
|
||||
|
|
@ -286,8 +286,8 @@ __작업 표시줄 버튼 위의 오버레이:__
|
|||
API를 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
|
||||
let win = new BrowserWindow({...});
|
||||
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
|
||||
```
|
||||
|
||||
## 대표 파일 제시 (OS X)
|
||||
|
|
@ -305,9 +305,9 @@ __대표 파일 팝업 메뉴:__
|
|||
[BrowserWindow.setDocumentEdited][setdocumentedited]를 사용할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setRepresentedFilename('/etc/passwd');
|
||||
window.setDocumentEdited(true);
|
||||
let win = new BrowserWindow({...});
|
||||
win.setRepresentedFilename('/etc/passwd');
|
||||
win.setDocumentEdited(true);
|
||||
```
|
||||
|
||||
[addrecentdocument]: ../api/app.md#appaddrecentdocumentpath-os-x-windows
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@
|
|||
_main.js_
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
const {app, BrowserWindow} = require('electron');
|
||||
|
||||
var onlineStatusWindow;
|
||||
app.on('ready', function() {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
|
||||
let onlineStatusWindow;
|
||||
|
||||
app.on('ready', () => {
|
||||
onlineStatusWindow = new BrowserWindow({width: 0, height: 0, show: false});
|
||||
onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html');
|
||||
});
|
||||
```
|
||||
|
|
@ -24,7 +23,7 @@ _online-status.html_
|
|||
<html>
|
||||
<body>
|
||||
<script>
|
||||
var alertOnlineStatus = function() {
|
||||
const alertOnlineStatus = () => {
|
||||
window.alert(navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
|
|
@ -47,18 +46,16 @@ _online-status.html_
|
|||
_main.js_
|
||||
|
||||
```javascript
|
||||
const electron = require('electron');
|
||||
const app = electron.app;
|
||||
const ipcMain = electron.ipcMain;
|
||||
const BrowserWindow = electron.BrowserWindow;
|
||||
const {app, ipcMain, BrowserWindow} = require('electron');
|
||||
|
||||
var onlineStatusWindow;
|
||||
app.on('ready', function() {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
|
||||
onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html');
|
||||
let onlineStatusWindow;
|
||||
|
||||
app.on('ready', () => {
|
||||
onlineStatusWindow = new BrowserWindow({width: 0, height: 0, show: false});
|
||||
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
|
||||
});
|
||||
|
||||
ipcMain.on('online-status-changed', function(event, status) {
|
||||
ipcMain.on('online-status-changed', (event, status) => {
|
||||
console.log(status);
|
||||
});
|
||||
```
|
||||
|
|
@ -70,8 +67,8 @@ _online-status.html_
|
|||
<html>
|
||||
<body>
|
||||
<script>
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
var updateOnlineStatus = function() {
|
||||
const {ipcRenderer} = require('electron');
|
||||
const updateOnlineStatus = () => {
|
||||
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -75,61 +75,60 @@ __알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으
|
|||
다음과 같이 작성할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
const electron = require('electron')
|
||||
const electron = require('electron');
|
||||
// 어플리케이션 생명주기를 조작 하는 모듈.
|
||||
const app = electron.app
|
||||
const {app} = electron;
|
||||
// 네이티브 브라우저 창을 만드는 모듈.
|
||||
const BrowserWindow = electron.BrowserWindow
|
||||
const {BrowserWindow} = electron;
|
||||
|
||||
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
|
||||
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
|
||||
let mainWindow
|
||||
let win;
|
||||
|
||||
function createWindow () {
|
||||
// 새로운 브라우저 창을 생성합니다.
|
||||
mainWindow = new BrowserWindow({width: 800, height: 600})
|
||||
win = new BrowserWindow({width: 800, height: 600});
|
||||
|
||||
// 그리고 현재 디렉터리의 index.html을 로드합니다.
|
||||
mainWindow.loadURL('file://' + __dirname + '/index.html')
|
||||
win.loadURL(`file://${__dirname}/index.html`);
|
||||
|
||||
// 개발자 도구를 엽니다.
|
||||
mainWindow.webContents.openDevTools()
|
||||
win.webContents.openDevTools();
|
||||
|
||||
// 창이 닫히면 호출됩니다.
|
||||
mainWindow.on('closed', function () {
|
||||
win.on('closed', () => {
|
||||
// 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해
|
||||
// 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우
|
||||
// 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
|
||||
mainWindow = null
|
||||
})
|
||||
win = null;
|
||||
});
|
||||
}
|
||||
|
||||
// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저
|
||||
// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만
|
||||
// 사용할 수 있습니다.
|
||||
app.on('ready', createWindow)
|
||||
app.on('ready', createWindow);
|
||||
|
||||
// 모든 창이 닫히면 어플리케이션 종료.
|
||||
app.on('window-all-closed', function () {
|
||||
app.on('window-all-closed', () => {
|
||||
// OS X의 대부분의 어플리케이션은 유저가 Cmd + Q 커맨드로 확실하게
|
||||
// 종료하기 전까지 메뉴바에 남아 계속 실행됩니다.
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
app.quit();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
app.on('activate', function () {
|
||||
app.on('activate', () => {
|
||||
// OS X에선 보통 독 아이콘이 클릭되고 나서도
|
||||
// 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다.
|
||||
if (mainWindow === null) {
|
||||
createWindow()
|
||||
if (win === null) {
|
||||
createWindow();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// 이 파일엔 제작할 어플리케이션에 특화된 메인 프로세스 코드를
|
||||
// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로
|
||||
// 코드를 작성할 수도 있습니다.
|
||||
|
||||
```
|
||||
|
||||
마지막으로, 사용자에게 보여줄 `index.html` 웹 페이지의 예시입니다:
|
||||
|
|
|
|||
70
docs-translations/ko-KR/tutorial/security.md
Normal file
70
docs-translations/ko-KR/tutorial/security.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
# 보안, 네이티브 호환성, 그리고 신뢰성
|
||||
|
||||
웹 개발자로써, 우리는 일반적으로 브라우저의 강력한 웹 보안을 잘 이용해왔습니다 - 작성한
|
||||
코드에 관련된 보안 문제는 아주 적었습니다. 웹 사이트에 대해 상당히 제한된 권한과 기능에
|
||||
의존해왔습니다 - 그리고 사용자들이 새로운 보안 위협에 대해 발 빠르게 대응할 수 있는
|
||||
아주 커다란 팀의 엔지니어들에 의해 만들어진 브라우저를 마음 놓고 즐길 것이라고
|
||||
믿어왔습니다.
|
||||
|
||||
하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 이해하는
|
||||
것이 중요합니다. Electron은 웹 기술을 사용하여 강력한 데스크톱 어플리케이션을 만들 수
|
||||
있도록 해줍니다. 가장 핵심 기능은 바로 제한된 웹 사이트의 기능을 커버할 정도로 완전한
|
||||
네이티브 어플리케이션과 동일한 기능을 하는 강력한 소프트웨어를 만들 수 있는 능력입니다.
|
||||
하지만 코드에 부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 수 있습니다.
|
||||
|
||||
이를 염두해두고, 신뢰할 수 없는 출처의 임의의 콘텐츠를 표시할 때 Electron에서
|
||||
자체적으로 처리하지 않는 심각한 보안 문제를 야기할 수 있다는 점을 주의해야 합니다.
|
||||
실제로도, 가장 유명한 Electron 어플리케이션들은 (Atom, Slack, Visual Studio Code,
|
||||
등) 주로 로컬 콘텐츠를 (또는 Node 통합이 제외된 신뢰된, 보안된 원격 콘텐츠) 사용합니다
|
||||
- 만약 어플리케이션이 온라인 출처에서 가져온 코드를 실행한다면, 그 코드가 악성 코드가
|
||||
아닌지 판별하는 것은 본인의 책임입니다.
|
||||
|
||||
## Chromium 보안 문제와 업그레이드
|
||||
|
||||
Electron이 새로운 버전의 Chromium을 가능한 한 빠르게 지원하려고 노력하지만,
|
||||
개발자는 이러한 업그레이딩 작업은 매우 힘든 작업이라는 것을 알아야 합니다 - 각 관련된
|
||||
수십에서 심지어 백자리 개수의 파일들을 손수 수정해야 합니다. 주어진 자원과 현재
|
||||
기여도를 생각한다면, Electron은 항상 최신 버전의 Chromium을 유지하지 못할 수 있으며,
|
||||
며칠부터 몇 주까지 더 걸릴 수 있습니다.
|
||||
|
||||
현재 Chromium 구성 요소를 업데이트하는 시스템은 우리가 사용할 수 있는 자원과 이
|
||||
프레임워크를 기반으로 구축된 대부분의 어플리케이션이 요구하는 것 사이에서 적절한 균형을
|
||||
유지하고 있다고 느끼고 있습니다. 우리는 확실히 Electron 위에 무언가를 만드는 사람들의
|
||||
사용 사례에 대한 자세한 내용을 듣는 것에 관심이 있습니다. 이러한 노력을 지원하는 Pull
|
||||
request와 기여는 언제나 환영합니다.
|
||||
|
||||
## 위 조언 무시하기
|
||||
|
||||
원격 위치에서 받아온 코드를 로컬에서 실행하는 경우 언제나 보안 문제가 존재합니다.
|
||||
예를 들어, 원격 웹 사이트가 브라우저 윈도우에서 표시될 때를 생각해볼 때, 만약 공격자가
|
||||
어떠한 방법으로 웹 페이지의 콘텐츠를 변경하는 경우 (소스를 직접적으로 공격하거나
|
||||
어플리케이션과 실질적인 위치 사이에서 공격하는 등), 공갹자는 사용자의 기기에서 네이티브
|
||||
코드를 실행할 수 있습니다.
|
||||
|
||||
> :warning: 어떠한 상황에서도 원격 코드를 로드하고 실행할 땐 Node 통합 기능을
|
||||
비활성화하고, 로컬 파일만 (어플리케이션 패키지 내부에 포함된) Node 코드를 실행시킬 수
|
||||
있도록 하는 것이 좋습니다. 원격 콘텐츠를 표시할 땐, 항상 `webview`를 사용하고
|
||||
`nodeIntegration`이 비활성화되어있는지 확인하세요.
|
||||
|
||||
#### 체크 리스트
|
||||
|
||||
이 리스트는 완벽하지 않습니다, 하지만 최소한 다음 사항은 확인하는 것이 좋습니다:
|
||||
|
||||
* 보안된 (https) 콘텐츠만 표시합니다.
|
||||
* 원격 콘텐츠를 표시하는 모든 렌더러에서 Node 통합 기능을 비활성화합니다.
|
||||
(`webPreferences` 사용)
|
||||
* `webSecurity`를 비활성화하지 않습니다. 이 옵션을 비활성화하면 동일-출처 정책도
|
||||
비활성화됩니다.
|
||||
* `allowDisplayingInsecureContent`를 `true`로 설정하지 마세요.
|
||||
* `allowRunningInsecureContent`를 `true`로 설정하지 마세요.
|
||||
* 무엇을 하고 있는지 확실히 알고 있지않는 이상 `experimentalFeatures` 또는
|
||||
`experimentalCanvasFeatures`를 활성화하지 마세요.
|
||||
* 무엇을 하고 있는지 확실히 알고 있지않는 이상 `blinkFeatures`를 활성화하지 마세요.
|
||||
* WebViews: `nodeintegration`를 `false`로 설정하세요.
|
||||
* WebViews: `disablewebsecurity`를 사용하지 마세요.
|
||||
* WebViews: `allowpopups`를 사용하지 마세요.
|
||||
* WebViews: 원격 CSS/JS와 `insertCSS` 또는 `executeJavaScript`를 함께 사용하지
|
||||
마세요.
|
||||
|
||||
다시 말하지만, 이 리스트는 그저 위험을 최소화할 뿐이며 완전히 제거하지 않습니다. 만약
|
||||
목적이 그저 웹 사이트를 보여주는 것이라면 일반 웹 브라우저가 더 안전한 방법입니다.
|
||||
|
|
@ -26,15 +26,15 @@ app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so'
|
|||
// 선택적인으로 플래시 플레이어의 버전을 설정합니다. 예시로는, v17.0.0.169
|
||||
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169');
|
||||
|
||||
app.on('ready', function() {
|
||||
mainWindow = new BrowserWindow({
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
plugins: true
|
||||
}
|
||||
});
|
||||
mainWindow.loadURL('file://' + __dirname + '/index.html');
|
||||
win.loadURL(`file://${__dirname}/index.html`);
|
||||
// 이외의 코드
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ $ npm install selenium-webdriver
|
|||
```javascript
|
||||
const webdriver = require('selenium-webdriver');
|
||||
|
||||
var driver = new webdriver.Builder()
|
||||
const driver = new webdriver.Builder()
|
||||
// 작동하고 있는 크롬 드라이버의 포트 "9515"를 사용합니다.
|
||||
.usingServer('http://localhost:9515')
|
||||
.withCapabilities({
|
||||
|
|
@ -57,8 +57,8 @@ var driver = new webdriver.Builder()
|
|||
driver.get('http://www.google.com');
|
||||
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');
|
||||
driver.findElement(webdriver.By.name('btnG')).click();
|
||||
driver.wait(function() {
|
||||
return driver.getTitle().then(function(title) {
|
||||
driver.wait(() => {
|
||||
return driver.getTitle().then((title) => {
|
||||
return title === 'webdriver - Google Search';
|
||||
});
|
||||
}, 1000);
|
||||
|
|
@ -92,8 +92,8 @@ $ npm install webdriverio
|
|||
### 3. 크롬 드라이버에 연결
|
||||
```javascript
|
||||
const webdriverio = require('webdriverio');
|
||||
var options = {
|
||||
host: "localhost", // localhost에서 작동중인 크롬 드라이버 서버를 사용합니다.
|
||||
let options = {
|
||||
host: 'localhost', // localhost에서 작동중인 크롬 드라이버 서버를 사용합니다.
|
||||
port: 9515, // 연결할 크롬 드라이버 서버의 포트를 설정합니다.
|
||||
desiredCapabilities: {
|
||||
browserName: 'chrome',
|
||||
|
|
@ -104,14 +104,14 @@ var options = {
|
|||
}
|
||||
};
|
||||
|
||||
var client = webdriverio.remote(options);
|
||||
let client = webdriverio.remote(options);
|
||||
|
||||
client
|
||||
.init()
|
||||
.url('http://google.com')
|
||||
.setValue('#q', 'webdriverio')
|
||||
.click('#btnG')
|
||||
.getTitle().then(function(title) {
|
||||
.getTitle().then((title) => {
|
||||
console.log('Title was: ' + title);
|
||||
})
|
||||
.end();
|
||||
|
|
|
|||
|
|
@ -59,14 +59,14 @@ app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.p
|
|||
// 플러그인의 버전은 크롬의 `chrome://plugins` 페이지에서 취득할 수 있습니다.
|
||||
app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866');
|
||||
|
||||
var mainWindow = null;
|
||||
app.on('ready', function() {
|
||||
mainWindow = new BrowserWindow({
|
||||
let win = null;
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({
|
||||
webPreferences: {
|
||||
// `plugins`은 활성화되어야 합니다.
|
||||
plugins: true
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue