diff --git a/README-ko.md b/README-ko.md index 706a5556df9f..4da9eb3f3f29 100644 --- a/README-ko.md +++ b/README-ko.md @@ -5,9 +5,9 @@ [![devDependency Status](https://david-dm.org/electron/electron/dev-status.svg)](https://david-dm.org/electron/electron#info=devDependencies) [![Join the Electron Community on Slack](http://atom-slack.herokuapp.com/badge.svg)](http://atom-slack.herokuapp.com/) -### [Electron](https://github.com/electron/electron/) 한국어 참조문서 +### [Electron](https://github.com/electron/electron/) 한국어 참조 문서 -:zap: *프레임워크 이름이 Atom Shell에서 Electron으로 변경되었습니다* :zap: +:zap: *이전까지 Atom Shell로 불렸지만, Electron으로 변경되었습니다* :zap: Electron 프레임워크는 JavaScript, HTML 그리고 CSS를 사용하여 Cross-Platform 데스크톱 어플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. @@ -56,7 +56,7 @@ npm install electron-prebuilt --save-dev - [스페인어](https://github.com/electron/electron/tree/master/docs-translations/es) - [중국어 간체](https://github.com/electron/electron/tree/master/docs-translations/zh-CN) - [중국어 번체](https://github.com/electron/electron/tree/master/docs-translations/zh-TW) -- [터키의](https://github.com/electron/electron/tree/master/docs-translations/tr-TR) +- [터키어](https://github.com/electron/electron/tree/master/docs-translations/tr-TR) - [우크라이나어](https://github.com/electron/electron/tree/master/docs-translations/uk-UA) - [러시아어](https://github.com/electron/electron/tree/master/docs-translations/ru-RU) - [프랑스어](https://github.com/electron/electron/tree/master/docs-translations/fr-FR) diff --git a/README.md b/README.md index f8278f18586f..5e891e5dd640 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ [![Electron Logo](http://electron.atom.io/images/electron-logo.svg)](http://electron.atom.io/) [![Travis Build Status](https://travis-ci.org/electron/electron.svg?branch=master)](https://travis-ci.org/electron/electron) -[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/qtmod45u0cc1ouov/branch/master?svg=true)](https://ci.appveyor.com/project/Atom/electron) +[![AppVeyor Build Status](https://ci.appveyor.com/api/projects/status/kvxe4byi7jcxbe26/branch/master?svg=true)](https://ci.appveyor.com/project/Atom/electron) [![devDependency Status](https://david-dm.org/electron/electron/dev-status.svg)](https://david-dm.org/electron/electron#info=devDependencies) [![Join the Electron Community on Slack](http://atom-slack.herokuapp.com/badge.svg)](http://atom-slack.herokuapp.com/) diff --git a/docs-translations/es/api/process.md b/docs-translations/es/api/process.md index 9e95ba988541..e50a2c1aac62 100644 --- a/docs-translations/es/api/process.md +++ b/docs-translations/es/api/process.md @@ -5,8 +5,8 @@ al node convencional: * `process.type` String - El tipo del proceso puede ser `browser` (ej. proceso principal) o `renderer`. -* `process.versions['electron']` String - Versión de Electron. -* `process.versions['chrome']` String - Versión de Chromium. +* `process.versions.electron` String - Versión de Electron. +* `process.versions.chrome` String - Versión de Chromium. * `process.resourcesPath` String - Ruta al código fuente JavaScript. ## Events diff --git a/docs-translations/es/tutorial/quick-start.md b/docs-translations/es/tutorial/quick-start.md index a760fccad2c8..9e65042c5035 100644 --- a/docs-translations/es/tutorial/quick-start.md +++ b/docs-translations/es/tutorial/quick-start.md @@ -115,7 +115,7 @@ Finalmente el `index.html` es la página web que mostraremos:

Hello World!

We are using io.js - and Electron . + and Electron . ``` diff --git a/docs-translations/jp/api/process.md b/docs-translations/jp/api/process.md index ea15fc747a20..6ad3c32d76fe 100644 --- a/docs-translations/jp/api/process.md +++ b/docs-translations/jp/api/process.md @@ -3,8 +3,8 @@ Electronの`process`オブジェクトは上流nodeの1つから次のような違いがあります。 * `process.type` String - プロセスの種類で、`browser` (例　メインプロセス)または `renderer`を設定できます。 -* `process.versions['electron']` String - Electronのバージョン -* `process.versions['chrome']` String - Chromiumのバージョン +* `process.versions.electron` String - Electronのバージョン +* `process.versions.chrome` String - Chromiumのバージョン * `process.resourcesPath` String - JavaScriptのソースコードのパスを設定します。 * `process.mas` Boolean - Mac app Store用のビルドで、値は`true`です。ほかのビルドの場合は`undefined`です。 diff --git a/docs-translations/ko-KR/README.md b/docs-translations/ko-KR/README.md index 717bfd5ef30b..c0949a83966d 100644 --- a/docs-translations/ko-KR/README.md +++ b/docs-translations/ko-KR/README.md @@ -66,6 +66,7 @@ Electron에 대해 자주 묻는 질문이 있습니다. 이슈를 생성하기 * [powerSaveBlocker](api/power-save-blocker.md) * [protocol](api/protocol.md) * [session](api/session.md) +* [systemPreferences](api/system-preferences.md) * [webContents](api/web-contents.md) * [Tray](api/tray.md) diff --git a/docs-translations/ko-KR/api/accelerator.md b/docs-translations/ko-KR/api/accelerator.md index a0eb55e87025..58d4b41d972a 100644 --- a/docs-translations/ko-KR/api/accelerator.md +++ b/docs-translations/ko-KR/api/accelerator.md @@ -1,9 +1,10 @@ # Accelerator -Accelerator는 키보드 단축키를 표현하는 문자열입니다, 여러 혼합키와 키코드를 `+` 문자를 -이용하여 결합할 수 있습니다. +> 키보드 단축키를 정의합니다. -예제: +Accelerator는 `+` 문자를 통해 여러 혼합키와 키코드를 결합할 수 있습니다. + +예시: * `CommandOrControl+A` * `CommandOrControl+Shift+Z` diff --git a/docs-translations/ko-KR/api/app.md b/docs-translations/ko-KR/api/app.md index ff6b4640ad2f..1d6140435e7d 100644 --- a/docs-translations/ko-KR/api/app.md +++ b/docs-translations/ko-KR/api/app.md @@ -1,8 +1,8 @@ # app -`app` 모듈은 어플리케이션의 생명주기 제어를 책임집니다. +> 어플리케이션의 이벤트 생명주기를 제어합니다. -밑의 예제는 마지막 윈도우가 종료되었을 때, 어플리케이션을 종료시키는 예제입니다: +밑의 예시는 마지막 윈도우가 종료되었을 때, 어플리케이션을 종료시키는 예시입니다: ```javascript const app = require('electron').app; @@ -236,10 +236,6 @@ app.on('login', function(event, webContents, request, authInfo, callback) { GPU가 작동하던 중 크래시가 일어났을 때 발생하는 이벤트입니다. -### Event: 'platform-theme-changed' _OS X_ - -시스템의 다크 모드 테마가 토글되면 발생하는 이벤트입니다. - ## Methods `app` 객체는 다음과 같은 메서드를 가지고 있습니다: @@ -383,7 +379,7 @@ npm 모듈 규칙에 따라 대부분의 경우 `package.json`의 `name` 필드 **참고:** OS X에선, 어플리케이션의 `info.plist`에 등록해둔 프로토콜만 사용할 수 있습니다. 이는 런타임에서 변경될 수 없습니다. 이 파일은 간단히 텍스트 에디터를 사용하거나, 어플리케이션을 빌드할 때 스크립트가 생성되도록 할 수 있습니다. 자세한 -내용은 [Apple의 참조 문서를][CFBundleURLTypes] 확인하세요. +내용은 [Apple의 참조 문서][CFBundleURLTypes]를 확인하세요. 이 API는 내부적으로 Windows 레지스트리와 LSSetDefaultHandlerForURLScheme를 사용합니다. @@ -396,6 +392,21 @@ npm 모듈 규칙에 따라 대부분의 경우 `package.json`의 `name` 필드 **참고:** OS X에서는 앱을 제거하면 자동으로 기본 프로토콜 핸들러에서 제거됩니다. +### `app.isDefaultProtocolClient(protocol)` _OS X_ _Windows_ + +* `protocol` String - `://`를 제외한 프로토콜의 이름. + +이 메서드는 현재 실행 파일이 지정한 프로토콜에 대해 기본 동작인지 확인합니다. (URI +스킴) 만약 그렇다면 `true`를 반환하고 아닌 경우 `false`를 반환합니다. + +**참고:** OS X에선, 응용 프로그램이 프로토콜에 대한 기본 프로토콜 동작으로 +등록되었는지를 확인하기 위해 이 메서드를 사용할 수 있습니다. 또한 OS X에서 +`~/Library/Preferences/com.apple.LaunchServices.plist`를 확인하여 검증할 수도 +있습니다. 자세한 내용은 [Apple의 참조 문서][LSCopyDefaultHandlerForURLScheme]를 +참고하세요. + +이 API는 내부적으로 Windows 레지스트리와 LSSetDefaultHandlerForURLScheme를 사용합니다. + ### `app.setUserTasks(tasks)` _Windows_ * `tasks` Array - `Task` 객체의 배열 @@ -455,8 +466,8 @@ OS X에선 사용자가 Finder에서 어플리케이션의 두 번째 인스턴 메커니즘이 무시되며 그대로 중복 실행됩니다. 따라서 OS X에서도 이 메서드를 통해 확실히 중복 실행을 방지하는 것이 좋습니다. -다음 예제는 두 번째 인스턴스가 생성되었을 때 중복된 인스턴스를 종료하고 주 어플리케이션 -인스턴스의 윈도우를 활성화 시키는 예제입니다: +다음 예시는 두 번째 인스턴스가 생성되었을 때 중복된 인스턴스를 종료하고 주 어플리케이션 +인스턴스의 윈도우를 활성화 시키는 예시입니다: ```javascript var myWindow = null; @@ -484,42 +495,7 @@ app.on('ready', function() { * `id` String -[Application User Model ID][app-user-model-id]를 `id`로 변경합니다. - -### `app.isAeroGlassEnabled()` _Windows_ - -이 메서드는 [DWM 컴포지션](https://msdn.microsoft.com/en-us/library/windows/desktop/aa969540.aspx) -(Aero Glass)가 활성화 되어있을 때 `true`를 반환합니다. 아닌 경우 `false`를 반환합니다. -이 메서드는 투명한 윈도우를 만들기 위해 사용 가능 여부를 확인할 때 사용할 수 있습니다. -(투명한 윈도우는 DWM 컴포지션이 비활성화되어있을 시 작동하지 않습니다) - -사용 예시: - -```js -let browserOptions = {width: 1000, height: 800}; - -// 플랫폼이 지원하는 경우에만 투명 윈도우를 생성 -if (process.platform !== 'win32' || app.isAeroGlassEnabled()) { - browserOptions.transparent = true; - browserOptions.frame = false; -} - -// 원도우 생성 -win = new BrowserWindow(browserOptions); - -// 페이지 로드 -if (browserOptions.transparent) { - win.loadURL('file://' + __dirname + '/index.html'); -} else { - // 투명 윈도우 상태가 아니라면, 기본적인 폴백 스타일 사용 - win.loadURL('file://' + __dirname + '/fallback.html'); -} -``` - -### `app.isDarkMode()` _OS X_ - -이 메서드는 시스템이 다크 모드 상태인 경우 `true`를 반환하고 아닐 경우 `false`를 -반환합니다. +[어플리케이션의 사용자 모델 ID][app-user-model-id]를 `id`로 변경합니다. ### `app.importCertificate(options, callback)` _LINUX_ @@ -600,3 +576,4 @@ dock 아이콘의 `image`를 설정합니다. [tasks]:http://msdn.microsoft.com/en-us/library/windows/desktop/dd378460(v=vs.85).aspx#tasks [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 diff --git a/docs-translations/ko-KR/api/auto-updater.md b/docs-translations/ko-KR/api/auto-updater.md index e699108a649c..a551459171d2 100644 --- a/docs-translations/ko-KR/api/auto-updater.md +++ b/docs-translations/ko-KR/api/auto-updater.md @@ -1,9 +1,12 @@ # autoUpdater -이 모듈은 `Squirrel` 자동 업데이트 프레임워크의 인터페이스를 제공합니다. +> 어플리케이션이 자동으로 업데이트를 진행할 수 있도록 기능을 활성화합니다. -다음 프로젝트 중 하나를 택하여 사용하면, 어플리케이션을 배포하기 위한 멀티 플랫폼 -릴리즈 서버를 손쉽게 구축할 수 있습니다: +`autoUpdater` 모듈은 [Squirrel](https://github.com/Squirrel) 프레임워크에 대한 +인터페이스를 제공합니다. + +다음 프로젝트 중 하나를 선택하여, 어플리케이션을 배포하기 위한 멀티-플랫폼 릴리즈 +서버를 손쉽게 구축할 수 있습니다: - [electron-release-server][electron-release-server]: *완벽하게 모든 기능을 지원하는 electron 어플리케이션을 위한 자가 호스트 릴리즈 서버입니다. auto-updater와 diff --git a/docs-translations/ko-KR/api/browser-window.md b/docs-translations/ko-KR/api/browser-window.md index 9ba61bea57f2..76257c8463b7 100644 --- a/docs-translations/ko-KR/api/browser-window.md +++ b/docs-translations/ko-KR/api/browser-window.md @@ -1,8 +1,8 @@ # BrowserWindow -`BrowserWindow` 클래스는 브라우저 창(윈도우)을 만드는 역할을 담당합니다. +> 브라우저 윈도우를 생성하고 제어합니다. -다음 예제는 윈도우를 생성합니다: +다음 예시는 윈도우를 생성합니다: ```javascript // 메인 프로세스에서 @@ -72,7 +72,7 @@ win.show(); * `show` Boolean - 윈도우가 생성되면 보여줄지 여부. 기본값은 `true`입니다. * `frame` Boolean - `false`로 지정하면 창을 [Frameless Window](frameless-window.md) 형태로 생성합니다. 기본값은 `true`입니다. -* `acceptFirstMouse` Boolean - 윈도우가 비활성화 상태일 때 내부 컨텐츠 클릭 시 +* `acceptFirstMouse` Boolean - 윈도우가 비활성화 상태일 때 내부 콘텐츠 클릭 시 활성화 되는 동시에 단일 mouse-down 이벤트를 발생시킬지 여부. 기본값은 `false`입니다. * `disableAutoHideCursor` Boolean - 타이핑중 자동으로 커서를 숨길지 여부. 기본값은 `false`입니다. @@ -112,7 +112,7 @@ win.show(); 값을 사용할 수 있습니다: * `default` 또는 미지정: 표준 Mac 회색 불투명 스타일을 사용합니다. -* `hidden`: 타이틀 바를 숨기고 컨텐츠 전체를 윈도우 크기에 맞춥니다. +* `hidden`: 타이틀 바를 숨기고 콘텐츠 전체를 윈도우 크기에 맞춥니다. 타이틀 바는 없어지지만 표준 창 컨트롤 ("신호등 버튼")은 왼쪽 상단에 유지됩니다. * `hidden-inset`: `hidden` 타이틀 바 속성과 함께 신호등 버튼이 윈도우 모서리로부터 약간 더 안쪽으로 들어가도록합니다. @@ -125,7 +125,7 @@ win.show(); node API에 접근할 수 있습니다. 이 속성의 스크립트 경로는 절대 경로로 지정해야 합니다. node 통합이 비활성화되어있을 경우, preload 스크립트는 node의 global 심볼들을 다시 global 스코프로 다시 포함 시킬 수 있습니다. - [여기](process.md#event-loaded)의 예제를 참고하세요. + [여기](process.md#event-loaded)의 예시를 참고하세요. * `session` [Session](session.md#class-session) - 페이지에서 사용할 세션을 지정합니다. Session 객체를 직접적으로 전달하는 대신, 파티션 문자열을 받는 `partition` 옵션을 사용할 수도 있습니다. `session`과 `partition`이 같이 @@ -198,11 +198,11 @@ Returns: * `event` Event 윈도우가 닫히기 시작할 때 발생하는 이벤트입니다. -이 이벤트는 DOM의 `beforeunload` 와 `unload` 이벤트가 호출되기 전에 발생합니다. +이 이벤트는 DOM의 `beforeunload` 와 `unload` 이벤트 전에 발생합니다. `event.preventDefault()`를 호출하여 윈도우 종료를 취소할 수 있습니다. 보통 창을 닫아야 할지 결정하기 위해 `beforeunload` 이벤트를 사용하려고 할 것입니다. -이 이벤트는 윈도우 컨텐츠를 새로고칠 때도 발생합니다. +이 이벤트는 윈도우 콘텐츠를 새로고칠 때도 발생합니다. Electron에선 빈 문자열 또는 `false`를 전달할 경우 윈도우 종료를 취소합니다. 예시는 다음과 같습니다: @@ -481,21 +481,21 @@ var win = new BrowserWindow({ width: 800, height: 600 }); ### `win.setAspectRatio(aspectRatio[, extraSize])` _OS X_ -* `aspectRatio` 유지하려 하는 컨텐츠 뷰 일부의 종횡비 +* `aspectRatio` 유지하려 하는 콘텐츠 뷰 일부의 종횡비 * `extraSize` Object (optional) - 종횡비를 유지하는 동안 포함되지 않을 엑스트라 크기. * `width` Integer * `height` Integer 이 메서드는 윈도우의 종횡비를 유지하는 기능을 수행합니다. 엑스트라 크기는 개발자가 픽셀로 특정한 공간이 있을 때 종횡비 계산에서 제외됩니다. 이 API는 윈도우의 크기와 -컨텐츠 사이즈의 차이를 이미 고려하고 있습니다. +콘텐츠 사이즈의 차이를 이미 고려하고 있습니다. 일반 윈도우에서 작동하는 HD 비디오 플레이어와 관련된 컨트롤을 고려합니다. 만약 15 픽셀의 컨트롤이 왼쪽 가장자리에 있고 25 픽셀의 컨트롤이 오른쪽 가장자리에 있으며 50 픽셀의 컨트롤이 플레이어 밑에 있을 때 플레이어 자체가 16:9 종횡비(HD의 표준 종횡비는 @1920x1080)를 유지하기 위해선 이 함수를 16/9, [ 40, 50 ] 인수와 함께 -호출해야 합니다. 두번째 인수 엑스트라 크기는 존재하는 크기만 관여하고 컨텐츠 뷰 내의 -크기는 관여하지 않습니다. 그저 전체 컨텐츠 뷰 내에 있는 모든 엑스트라 너비, 높이 영역이 +호출해야 합니다. 두번째 인수 엑스트라 크기는 존재하는 크기만 관여하고 콘텐츠 뷰 내의 +크기는 관여하지 않습니다. 그저 전체 콘텐츠 뷰 내에 있는 모든 엑스트라 너비, 높이 영역이 합해집니다. ### `win.setBounds(options[, animate])` diff --git a/docs-translations/ko-KR/api/chrome-command-line-switches.md b/docs-translations/ko-KR/api/chrome-command-line-switches.md index babddd327559..7f1f4ced6166 100644 --- a/docs-translations/ko-KR/api/chrome-command-line-switches.md +++ b/docs-translations/ko-KR/api/chrome-command-line-switches.md @@ -1,9 +1,10 @@ # 크롬 명령줄 스위치 지원 -크롬 명령줄(Command-Line) 스위치는 크롬 브라우저에서 제공되는 추가 옵션이며 -Electron에서도 지원합니다. [app][app]의 [ready][ready]이벤트가 작동하기 전에 -[app.commandLine.appendSwitch][append-switch] API를 사용하면 어플리케이션 내부에서 -스위치를 추가할 수 있습니다: +> Electron에서 지원하는 커맨드 명령줄 스위치입니다. + +어플리케이션 메인 스크립트의 [app][app] 모듈에서 [ready][ready] 이벤트가 실행되기 +전에 [app.commandLine.appendSwitch][append-switch]를 호출하면, 어플리케이션의 +명령줄 옵션을 추가로 지정할 수 있습니다: ```javascript const app = require('electron').app; diff --git a/docs-translations/ko-KR/api/clipboard.md b/docs-translations/ko-KR/api/clipboard.md index df6475ad611b..83775dfa78b8 100644 --- a/docs-translations/ko-KR/api/clipboard.md +++ b/docs-translations/ko-KR/api/clipboard.md @@ -1,7 +1,6 @@ # clipboard -`clipboard` 모듈은 복사/붙여넣기 작업을 수행하는 방법을 제공합니다. 다음 예제는 -클립보드에 문자열을 씁니다: +> 시스템 클립보드에 복사와 붙여넣기를 수행합니다. ```javascript const clipboard = require('electron').clipboard; @@ -27,7 +26,7 @@ console.log(clipboard.readText('selection')); * `type` String (optional) -클립보드 컨텐츠를 `plain text`로 반환합니다. +클립보드 콘텐츠를 `plain text`로 반환합니다. ### `clipboard.writeText(text[, type])` @@ -40,7 +39,7 @@ console.log(clipboard.readText('selection')); * `type` String (optional) -클립보드 컨텐츠를 `markup`으로 반환합니다. +클립보드 콘텐츠를 `markup`으로 반환합니다. ### `clipboard.writeHtml(markup[, type])` @@ -66,7 +65,7 @@ console.log(clipboard.readText('selection')); * `type` String (optional) -클립보드로부터 RTF 형식으로 컨텐츠를 읽어옵니다. +클립보드로부터 RTF 형식으로 콘텐츠를 읽어옵니다. ### `clipboard.writeRtf(text[, type])` @@ -79,7 +78,7 @@ console.log(clipboard.readText('selection')); * `type` String (optional) -클립보드에 저장된 모든 컨텐츠를 삭제합니다. +클립보드에 저장된 모든 콘텐츠를 삭제합니다. ### clipboard.availableFormats([type]) diff --git a/docs-translations/ko-KR/api/content-tracing.md b/docs-translations/ko-KR/api/content-tracing.md index ed73ce319f68..484197e20738 100644 --- a/docs-translations/ko-KR/api/content-tracing.md +++ b/docs-translations/ko-KR/api/content-tracing.md @@ -1,9 +1,10 @@ # contentTracing -`content-tracing` 모듈은 Chromium 컨텐츠 모듈단에서 생성된 데이터를 수집하고 -추적하는데 사용됩니다. 이 모듈은 웹 인터페이스를 포함하고 있지 않으며 크롬 -브라우저에서 `chrome://tracing/` 페이지를 열어 생성된 파일을 로드하면 결과를 볼 수 -있습니다. +> 성능상의 병목 현상과 느린 작업을 찾기 위해 Chromium의 콘텐츠 모듈에서 추적 데이터를 +수집합니다. + +이 모듈은 웹 인터페이스를 포함하고 있지 않으며 Chrome 브라우저에서 +`chrome://tracing/` 페이지를 열고 생성된 파일을 로드하면 결과를 볼 수 있습니다. ```javascript const contentTracing = require('electron').contentTracing; @@ -54,7 +55,7 @@ EnableRecording 요청을 받게 됩니다. 모든 child 프로세스가 `startR 필터는 `-` 접두사를 통해 특정 카테고리 그룹을 제외할 수 있습니다. 카테고리 패턴은 같은 리스트 내에서 포함과 제외를 함께 사용할 수 없습니다. -예제: +예시: * `test_MyTest*`, * `test_MyTest*,test_OtherStuff`, diff --git a/docs-translations/ko-KR/api/crash-reporter.md b/docs-translations/ko-KR/api/crash-reporter.md index 2269742bcbff..90851f7ee5bd 100644 --- a/docs-translations/ko-KR/api/crash-reporter.md +++ b/docs-translations/ko-KR/api/crash-reporter.md @@ -1,9 +1,8 @@ # crashReporter -`crash-reporter` 모듈은 어플리케이션의 크래시 정보를 자동으로 원격 서버에 -업로드하는데 사용합니다. +> 원격 서버에 크래시 정보를 보고합니다. -다음 예제는 윈격 서버에 어플리케이션 크래시 정보를 자동으로 보고하는 예제입니다: +다음 예시는 윈격 서버에 어플리케이션 크래시 정보를 자동으로 보고하는 예시입니다: ```javascript const crashReporter = require('electron').crashReporter; diff --git a/docs-translations/ko-KR/api/desktop-capturer.md b/docs-translations/ko-KR/api/desktop-capturer.md index 3b4f8c719832..0ee1b3e1d229 100644 --- a/docs-translations/ko-KR/api/desktop-capturer.md +++ b/docs-translations/ko-KR/api/desktop-capturer.md @@ -1,7 +1,7 @@ # desktopCapturer -`desktopCapturer` 모듈은 `getUserMedia`에서 사용 가능한 소스를 가져올 때 사용할 수 -있습니다. +> 마이크, 카메라 또는 화면에서 오디오, 비디오 그리고 이미지를 캡쳐하기 위한 +`getUserMedia` 소스를 나열합니다. ```javascript // 렌더러 프로세스 내부 diff --git a/docs-translations/ko-KR/api/dialog.md b/docs-translations/ko-KR/api/dialog.md index cbb1afc71ae4..90d76df16692 100644 --- a/docs-translations/ko-KR/api/dialog.md +++ b/docs-translations/ko-KR/api/dialog.md @@ -1,10 +1,8 @@ # dialog -`dialog` 모듈은 파일 열기, 알림과 같은 네이티브 시스템의 대화 상자를 조작할 때 사용할 -수 있는 모듈입니다. 이 모듈을 사용하면 웹 어플리케이션에서 일반 네이티브 어플리케이션과 -비슷한 사용자 경험을 제공할 수 있습니다. +> 파일을 열거나 저장하고, 알림을 표시하기 위한 네이티브 시스템 대화 상자를 표시합니다. -다음 예제는 파일과 디렉터리를 다중으로 선택하는 대화 상자를 표시하는 예제입니다: +다음 예시는 파일과 디렉터리를 다중으로 선택하는 대화 상자를 표시하는 예시입니다: ```javascript var win = ...; // 대화 상자를 사용할 BrowserWindow 객체 @@ -126,9 +124,9 @@ OS X 또는 Windows에서 "확인", "취소"와 같은 순서로 버튼을 지 에러 메시지를 보여주는 대화 상자를 표시합니다. -이 API는 `app` 모듈의 `ready` 이벤트가 발생하기 전에 사용할 수 있습니다. 이 메서드는 +이 함수는 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 있습니다. 이 메서드는 보통 어플리케이션이 시작되기 전에 특정한 에러를 표시하기 위해 사용됩니다. 만약 -Linux에서 `ready` 이벤트가 호출되기 이전에 이 API를 호출할 경우, 메시지는 stderr를 +Linux에서 `ready` 이벤트가 발생하기 전에 이 API를 호출할 경우, 메시지는 stderr를 통해서 표시되며 GUI 대화 상자는 표시되지 않습니다. ## Sheets diff --git a/docs-translations/ko-KR/api/download-item.md b/docs-translations/ko-KR/api/download-item.md index 0356030d8fb9..4267a41df71d 100644 --- a/docs-translations/ko-KR/api/download-item.md +++ b/docs-translations/ko-KR/api/download-item.md @@ -1,5 +1,7 @@ # DownloadItem +> 원격 소스로부터의 파일 다운로드를 제어합니다. + `DownloadItem`은 EventEmitter를 상속받았으며 Electron의 다운로드 아이템을 표현합니다. 이 클래스 객체는 `Session` 모듈의 `will-download` 이벤트에 사용되며 사용자가 다운로드 아이템을 다룰 수 있도록 도와줍니다. diff --git a/docs-translations/ko-KR/api/environment-variables.md b/docs-translations/ko-KR/api/environment-variables.md index 465548e003d4..55a5ac5385de 100644 --- a/docs-translations/ko-KR/api/environment-variables.md +++ b/docs-translations/ko-KR/api/environment-variables.md @@ -1,5 +1,7 @@ # 환경 변수 +> 어플리케이션의 구성과 동작을 코드 변경 없이 제어합니다. + Electron의 몇몇 동작은 명령 줄과 어플리케이션의 코드보다 먼저 초기화되어야 하므로 환경 변수에 의해 작동합니다. diff --git a/docs-translations/ko-KR/api/file-object.md b/docs-translations/ko-KR/api/file-object.md index a2a19a530d4a..6d7519a7ad2c 100644 --- a/docs-translations/ko-KR/api/file-object.md +++ b/docs-translations/ko-KR/api/file-object.md @@ -1,10 +1,12 @@ # `File` 객체 -DOM의 File 인터페이스는 네이티브 파일을 추상화 합니다. 유저가 직접 HTML5 File API를 -이용하여 작업할 때 선택된 파일의 경로를 알 수 있도록 Electron은 파일의 실제 경로를 -담은 `path` 속성을 File 인터페이스에 추가하였습니다. +> HTML5 `File` API를 기본적인 파일 시스템의 파일처럼 사용합니다. -다음 예제는 앱으로 드래그 앤 드롭한 파일의 실제 경로를 가져옵니다: +DOM의 File 인터페이스는 네이티브 파일을 추상화 합니다. 사용자가 직접 HTML5 File +API를 사용하여 작업할 때 선택된 파일의 경로를 알 수 있도록, Electron은 파일의 실제 +경로를 담은 `path` 속성을 File 인터페이스에 추가했습니다. + +다음 예시는 앱으로 드래그 앤 드롭한 파일의 실제 경로를 가져옵니다: ```html
diff --git a/docs-translations/ko-KR/api/frameless-window.md b/docs-translations/ko-KR/api/frameless-window.md index 7bcdeb4a60bc..199c3dcbd9f4 100644 --- a/docs-translations/ko-KR/api/frameless-window.md +++ b/docs-translations/ko-KR/api/frameless-window.md @@ -1,5 +1,7 @@ # Frameless Window +> 툴바, 테두리, 시각적인 "chrome" 없이 윈도우를 엽니다. + Frameless Window는 [창 테두리](https://developer.mozilla.org/ko/docs/Glossary/Chrome)가 없는 윈도우를 말합니다. 이 기능은 윈도우의 일부분인 툴바와 같이 웹 페이지의 일부분이 아닌 부분을 보이지 않도록 합니다. [`BrowserWindow`](browser-window.md) 클래스의 @@ -42,7 +44,7 @@ var win = new BrowserWindow({ transparent: true, frame: false }); [이슈](https://github.com/electron/electron/issues/1335)를 참고하세요. * 투명한 창은 크기를 조절할 수 없습니다. `resizable` 속성을 `true`로 할 경우 몇몇 플랫폼에선 크래시가 일어납니다. -* `blur` 필터는 웹 페이지에서만 적용됩니다. 윈도우 아래 컨텐츠에는 블러 효과를 적용할 +* `blur` 필터는 웹 페이지에서만 적용됩니다. 윈도우 아래 콘텐츠에는 블러 효과를 적용할 방법이 없습니다. (예시: 유저의 시스템에 열린 다른 어플리케이션) * Windows에선 DWM(데스크톱 창 관리자)가 비활성화되어 있을 경우 투명한 창이 작동하지 않습니다. diff --git a/docs-translations/ko-KR/api/global-shortcut.md b/docs-translations/ko-KR/api/global-shortcut.md index 6c01368a392e..71b7ab00163c 100644 --- a/docs-translations/ko-KR/api/global-shortcut.md +++ b/docs-translations/ko-KR/api/global-shortcut.md @@ -1,12 +1,14 @@ # globalSortcut +> 어플리케이션에 키보드 포커스가 없을 때도 키보드 이벤트를 받을 수 있도록 합니다. + `globalShortcut` 모듈은 운영체제의 전역 키보드 단축키를 등록/해제 하는 방법을 제공합니다. 이 모듈을 사용하여 사용자가 다양한 작업을 편하게 할 수 있도록 단축키를 정의 할 수 있습니다. **참고:** 등록된 단축키는 어플리케이션이 백그라운드로 작동(창이 포커스 되지 않음) 할 -때도 계속해서 작동합니다. 이 모듈은 `app` 모듈의 `ready` 이벤트 이전에 사용할 수 -없습니다. +때도 계속해서 작동합니다. 이 모듈은 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 +사용할 수 없습니다. ```javascript const electron = require('electron'); diff --git a/docs-translations/ko-KR/api/ipc-main.md b/docs-translations/ko-KR/api/ipc-main.md index dcbaa1396737..8ae11a99815c 100644 --- a/docs-translations/ko-KR/api/ipc-main.md +++ b/docs-translations/ko-KR/api/ipc-main.md @@ -1,5 +1,7 @@ # ipcMain +> 메인 프로세스에서 렌더러 프로세스로 비동기 통신을 합니다. + `ipcMain` 모듈은 [EventEmitter](https://nodejs.org/api/events.html) 클래스의 인스턴스입니다. 메인 프로세스에서 사용하면, 렌더러 프로세스(웹 페이지)에서 전달된 동기, 비동기 메시지를 주고 받는 방법을 제공합니다. 렌더러 프로세스에서 메시지를 전달하면 @@ -14,7 +16,7 @@ * 메시지에 동기로 응답할 땐 반드시 `event.returnValue`를 설정해야 합니다. * 메시지를 비동기로 응답할 땐 `event.sender.send(...)` 메서드를 사용할 수 있습니다. -다음 예제는 렌더러 프로세스와 메인 프로세스간에 메시지를 전달하고 받는 예제입니다: +다음 예시는 렌더러 프로세스와 메인 프로세스간에 메시지를 전달하고 받는 예시입니다: ```javascript // 메인 프로세스 diff --git a/docs-translations/ko-KR/api/ipc-renderer.md b/docs-translations/ko-KR/api/ipc-renderer.md index f46809a52d27..19681515fefc 100644 --- a/docs-translations/ko-KR/api/ipc-renderer.md +++ b/docs-translations/ko-KR/api/ipc-renderer.md @@ -1,10 +1,12 @@ # ipcRenderer +> 렌더러 프로세스에서 메인 프로세스로 비동기 통신을 합니다. + `ipcRenderer` 모듈은 [EventEmitter](https://nodejs.org/api/events.html) 클래스의 인스턴스입니다. 렌더러 프로세스에서 메인 프로세스로 동기/비동기 메시지를 주고 받는 방법을 제공합니다. 또한 메인 프로세스로부터 받은 메시지에 응답할 수도 있습니다. -[ipcMain](ipc-main.md)에서 코드 예제를 확인할 수 있습니다. +[ipcMain](ipc-main.md)에서 코드 예시를 확인할 수 있습니다. ## 메시지 리스닝 diff --git a/docs-translations/ko-KR/api/menu-item.md b/docs-translations/ko-KR/api/menu-item.md index 3ee5a2ff5075..022e554688a8 100644 --- a/docs-translations/ko-KR/api/menu-item.md +++ b/docs-translations/ko-KR/api/menu-item.md @@ -1,9 +1,8 @@ # MenuItem -`menu-item` 모듈은 어플리케이션 또는 컨텍스트 [`menu`](menu.md)에 항목 아이템을 -추가할 수 있도록 관련 클래스를 제공합니다. +> 네이티브 어플리케이션 메뉴와 컨텍스트 메뉴에 아이템을 추가합니다. -[`menu`](menu.md)에서 예제를 확인할 수 있습니다. +[`menu`](menu.md)에서 예시를 확인할 수 있습니다. ## Class: MenuItem diff --git a/docs-translations/ko-KR/api/menu.md b/docs-translations/ko-KR/api/menu.md index c0de2ec2ab00..30990380d69a 100644 --- a/docs-translations/ko-KR/api/menu.md +++ b/docs-translations/ko-KR/api/menu.md @@ -1,13 +1,14 @@ # Menu -`menu` 클래스는 어플리케이션 메뉴와 [컨텍스트 메뉴](https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus)를 -만들 때 사용됩니다. 이 모듈은 메인 프로세스용 모듈이지만 `remote` 모듈을 통해 렌더러 -프로세스에서도 사용할 수 있습니다. +> 네이티브 어플리케이션 메뉴와 컨텍스트 메뉴를 생성합니다. + +이 모듈은 메인 프로세스용 모듈이지만 `remote` 모듈을 통해 렌더러 프로세스에서도 사용할 +수 있습니다. 각 메뉴는 여러 개의 [메뉴 아이템](menu-item.md)으로 구성되고 서브 메뉴를 가질 수도 있습니다. -다음 예제는 웹 페이지 내에서 [remote](remote.md) 모듈을 활용하여 동적으로 메뉴를 -생성하는 예제입니다. 그리고 유저가 페이지에서 오른쪽 클릭을 할 때마다 마우스 위치에 +다음 예시는 웹 페이지 내에서 [remote](remote.md) 모듈을 활용하여 동적으로 메뉴를 +생성하는 예시입니다. 그리고 유저가 페이지에서 오른쪽 클릭을 할 때마다 마우스 위치에 팝업 형태로 메뉴를 표시합니다: ```html @@ -29,7 +30,7 @@ window.addEventListener('contextmenu', function (e) { ``` -또 하나의 예를 들자면 다음 예제는 렌더러 프로세스에서 template API를 사용하여 +또 하나의 예를 들자면 다음 예시는 렌더러 프로세스에서 template API를 사용하여 어플리케이션 메뉴를 만듭니다: ```javascript @@ -331,7 +332,7 @@ OS X에선 지정한 어플리케이션 메뉴에 상관없이 메뉴의 첫번 이동하고 싶은 특정 그룹의 아이템들이 있을 경우 해당 그룹의 맨 첫번째 메뉴 아이템의 위치만을 지정하면 됩니다. -### 예제 +### 예시 메뉴 템플릿: diff --git a/docs-translations/ko-KR/api/native-image.md b/docs-translations/ko-KR/api/native-image.md index 2ef35668caeb..95f213924f7f 100644 --- a/docs-translations/ko-KR/api/native-image.md +++ b/docs-translations/ko-KR/api/native-image.md @@ -1,5 +1,7 @@ # nativeImage +> PNG 또는 JPG 파일을 사용하여 트레이, 독, 어플리케이션 아이콘을 생성합니다. + Electron은 파일 경로 또는 `nativeImage` 인스턴스를 통해 이미지를 사용할 수 있는 API를 가지고 있습니다. `null`을 전달할 경우 빈 이미지가 생성됩니다. @@ -11,7 +13,7 @@ var appIcon = new Tray('/Users/somebody/images/icon.png'); var window = new BrowserWindow({icon: '/Users/somebody/images/window.png'}); ``` -이 예제는 클립보드로부터 가져온 `nativeImage`로 트레이 메뉴를 생성합니다: +이 예시는 클립보드로부터 가져온 `nativeImage`로 트레이 메뉴를 생성합니다: ```javascript var image = clipboard.readImage(); @@ -66,14 +68,14 @@ var appIcon = new Tray('/Users/somebody/images/icon.png'); ## 템플릿 이미지 템플릿 이미지는 검은색과 명확한 색상(알파 채널)으로 이루어져 있습니다. 템플릿 이미지는 -단독 이미지로 사용되지 않고 다른 컨텐츠와 혼합되어 최종 외관 만드는데 사용됩니다. +단독 이미지로 사용되지 않고 다른 콘텐츠와 혼합되어 최종 외관 만드는데 사용됩니다. 가장 일반적으로 템플릿 이미지는 밝고 어두운 테마 색상으로 변경할 수 있는 메뉴 바 아이콘 등에 사용되고 있습니다. **참고:** 템플릿 이미지는 OS X 운영체제만 지원합니다. -템플릿 이미지를 지정하려면 다음 예제와 같이 파일명에 `Template` 문자열을 추가해야 +템플릿 이미지를 지정하려면 다음 예시와 같이 파일명에 `Template` 문자열을 추가해야 합니다: * `xxxTemplate.png` diff --git a/docs-translations/ko-KR/api/power-monitor.md b/docs-translations/ko-KR/api/power-monitor.md index 63d5959fe20c..d2f1635dfcca 100644 --- a/docs-translations/ko-KR/api/power-monitor.md +++ b/docs-translations/ko-KR/api/power-monitor.md @@ -1,11 +1,11 @@ # powerMonitor -`power-monitor` 모듈은 PC의 파워 상태를 나타냅니다. (주로 노트북 등에서 사용됩니다) -이 모듈은 메인 프로세스에서만 사용할 수 있으며, (remote 모듈(RPC)을 사용해도 작동이 -됩니다) 메인 프로세스의 `app` 모듈에서 `ready` 이벤트를 호출하기 전까지 사용할 수 -없습니다. +> 파워의 상태 변경을 모니터링합니다. -예제: +이 모듈은 메인 프로세스에서만 사용할 수 있습니다. `app` 모듈의 `ready` 이벤트가 +발생한 이후에만 사용할 수 없습니다. + +예시: ```javascript var app = require('app'); diff --git a/docs-translations/ko-KR/api/power-save-blocker.md b/docs-translations/ko-KR/api/power-save-blocker.md index 560b3fc9cef5..4a4f85c76c50 100644 --- a/docs-translations/ko-KR/api/power-save-blocker.md +++ b/docs-translations/ko-KR/api/power-save-blocker.md @@ -1,9 +1,8 @@ # powerSaveBlocker -`powerSaveBlocker` 모듈은 시스템이 저전력(슬립) 모드로 진입하는 것을 막고 앱 시스템과 -화면이 항상 활성화 상태를 유지할 수 있도록 하는 몇가지 유틸리티를 제공하는 모듈입니다. +> 시스템이 저전력 (슬립) 모드로 진입하는 것을 막습니다. -예제: +예시: ```javascript const powerSaveBlocker = require('electron').powerSaveBlocker; diff --git a/docs-translations/ko-KR/api/process.md b/docs-translations/ko-KR/api/process.md index 3cdc10dd78cf..9d5d6d88ab37 100644 --- a/docs-translations/ko-KR/api/process.md +++ b/docs-translations/ko-KR/api/process.md @@ -1,11 +1,13 @@ # process +> 현재 작동중인 어플리케이션의 정보를 가져옵니다. + Electron의 `process` 객체는 기존의 node와는 달리 약간의 차이점이 있습니다: * `process.type` String - 프로세스의 타입, `browser` (메인 프로세스) 또는 `renderer`가 됩니다. -* `process.versions['electron']` String - Electron의 버전. -* `process.versions['chrome']` String - Chromium의 버전. +* `process.versions.electron` String - Electron의 버전. +* `process.versions.chrome` String - Chromium의 버전. * `process.resourcesPath` String - JavaScript 소스 코드의 경로. * `process.mas` Boolean - Mac 앱 스토어용 빌드일 때 `true`로 지정됩니다. 다른 빌드일 땐 `undefined`로 지정됩니다. @@ -43,6 +45,10 @@ process.once('loaded', function() { `process` 객체는 다음과 같은 메서드를 가지고 있습니다: +### `process.crash()` + +현재 프로세스의 메인 스레드에 크래시를 일으킵니다. + ### `process.hang()` 현재 프로세스의 주 스레드를 중단시킵니다. diff --git a/docs-translations/ko-KR/api/protocol.md b/docs-translations/ko-KR/api/protocol.md index 2b42226e2ffb..51207f8e0ee7 100644 --- a/docs-translations/ko-KR/api/protocol.md +++ b/docs-translations/ko-KR/api/protocol.md @@ -1,9 +1,8 @@ # protocol -`protocol` 모듈은 이미 있는 프로토콜의 동작을 가로채거나 새로운 프로토콜을 만들 수 -있는 기능을 제공합니다. +> 커스텀 프로토콜을 등록하거나 이미 존재하능 프로토콜의 요청의 동작을 변경합니다. -다음 예제는 `file://` 프로토콜과 비슷한 일을 하는 커스텀 프로토콜을 설정합니다: +다음 예시는 `file://` 프로토콜과 비슷한 일을 하는 커스텀 프로토콜을 설정합니다: ```javascript const electron = require('electron'); @@ -87,7 +86,7 @@ The `uploadData` is an array of `data` objects: 속성을 포함하는 객체와 함께 호출되어야 한다는 점을 제외하면 `registerFileProtocol`과 사용법이 같습니다. -예제: +예시: ```javascript protocol.registerBufferProtocol('atom', function(request, callback) { @@ -134,8 +133,8 @@ HTTP 요청을 응답으로 전송할 `scheme`의 프로토콜을 등록합니 POST 요청에는 반드시 `uploadData` 객체가 제공되어야 합니다. * `uploadData` object - * `contentType` String - 컨텐츠의 MIME 타입. - * `data` String - 전송할 컨텐츠. + * `contentType` String - 콘텐츠의 MIME 타입. + * `data` String - 전송할 콘텐츠. ### `protocol.unregisterProtocol(scheme[, completion])` diff --git a/docs-translations/ko-KR/api/remote.md b/docs-translations/ko-KR/api/remote.md index 3265a795a070..5e1446b53432 100644 --- a/docs-translations/ko-KR/api/remote.md +++ b/docs-translations/ko-KR/api/remote.md @@ -1,5 +1,7 @@ # remote +> 메인 프로세스 모듈을 렌더러 프로세스에서 사용합니다. + `remote` 모듈은 메인 프로세스와 렌더러 프로세스(웹 페이지) 사이의 inter-process (IPC) 통신을 간단하게 추상화 한 모듈입니다. @@ -9,7 +11,7 @@ Electron의 메인 프로세스에선 GUI와 관련 있는(`dialog`, `menu`등) inter-process 통신을 하지 않고도 간단한 API를 통해 직접 메인 프로세스의 모듈과 메서드를 사용할 수 있습니다. 이 개념은 Java의 [RMI][rmi]와 비슷합니다. -다음 예제는 렌더러 프로세스에서 브라우저 창을 만드는 예제입니다: +다음 예시는 렌더러 프로세스에서 브라우저 창을 만드는 예시입니다: ```javascript const remote = require('electron').remote; @@ -29,7 +31,7 @@ win.loadURL('https://github.com'); 메서드를 호출하거나, 객체에 접근하거나, 생성자로 객체를 생성하는 등의 작업은 실질적으로 동기형 inter-process 메시지를 보냅니다. -위의 예제에서 사용한 두 `BrowserWindow`와 `win`은 remote 객체입니다. 그리고 +위의 예시에서 사용한 두 `BrowserWindow`와 `win`은 remote 객체입니다. 그리고 `new BrowserWindow`이 생성하는 `BrowserWindow` 객체는 렌더러 프로세스에서 생성되지 않습니다. 대신에 이 `BrowserWindow` 객체는 메인 프로세스에서 생성되며 렌더러 프로세스에 `win` 객체와 같이 이에 대응하는 remote 객체를 반환합니다. @@ -94,7 +96,7 @@ console.log(withRendererCb, withLocalCb) // [true, true, true], [2, 3, 4] 않습니다. 함수 참조는 메인 프로세스에서 GC가 일어나기 전까지 계속 프로세스에 남아있게 됩니다. -다음 코드를 보면 느낌이 올 것입니다. 이 예제는 remote 객체에 `close` 이벤트 콜백을 +다음 코드를 보면 느낌이 올 것입니다. 이 예시는 remote 객체에 `close` 이벤트 콜백을 설치합니다: ```javascript diff --git a/docs-translations/ko-KR/api/screen.md b/docs-translations/ko-KR/api/screen.md index db832852f3d2..4d66a885d524 100644 --- a/docs-translations/ko-KR/api/screen.md +++ b/docs-translations/ko-KR/api/screen.md @@ -1,6 +1,7 @@ # screen -`screen` 모듈은 화면 크기, 디스플레이, 커서 위치 등등의 다양한 정보를 가져옵니다. +> 화면 크기, 디스플레이, 커서 위치 등의 정보를 가져옵니다. + 이 모듈은 `app` 모듈의 `ready` 이벤트가 발생하기 전까지 사용할 수 없습니다. (호출 또는 모듈 포함) @@ -8,10 +9,10 @@ 상속 받았습니다. **참고:** 렌더러 / DevTools에선 이미 DOM 속성이 `window.screen`을 가지고 있으므로 -`screen = require('screen')` 형식으로 모듈을 사용할 수 없습니다. 아래의 예제와 같이 +`screen = require('screen')` 형식으로 모듈을 사용할 수 없습니다. 아래의 예시와 같이 `electronScreen` 같은 이름으로 모듈 이름을 대체하여 사용해야 합니다. -다음 예제는 화면 전체를 채우는 윈도우 창을 생성합니다: +다음 예시는 화면 전체를 채우는 윈도우 창을 생성합니다: ```javascript const electron = require('electron'); @@ -27,7 +28,7 @@ app.on('ready', function() { }); ``` -다음 예제는 확장 디스플레이에 윈도우를 생성합니다: +다음 예시는 확장 디스플레이에 윈도우를 생성합니다: ```javascript var app = require('app'); @@ -63,8 +64,8 @@ app.on('ready', function() { * `display` object * `id` Integer - 디스플레이에 관련된 유일 식별자. - * `rotation` Integer - 값은 0, 1, 2, 3이 될 수 있고, 각 값은 시계 방향을 기준으로 - 0, 90, 180, 270도의 화면 회전 상태로 표현됩니다. + * `rotation` Integer - 값은 0, 90, 180, 270이 될 수 있고, 각 값은 시계 방향을 + 기준으로 0, 90, 180, 270도의 화면 회전 상태를 표현합니다. * `scaleFactor` Number - 기기의 픽셀 스케일 크기. * `touchSupport` String - 터치 스크린의 여부, `available`, `unavailable`, `unknown` 값으로 반환됩니다. diff --git a/docs-translations/ko-KR/api/session.md b/docs-translations/ko-KR/api/session.md index 76a3fc9ea837..a4f3d3dd7067 100644 --- a/docs-translations/ko-KR/api/session.md +++ b/docs-translations/ko-KR/api/session.md @@ -1,5 +1,7 @@ # session +> 브라우저 세션, 쿠키, 캐시, 프록시 설정 등을 관리합니다. + `session` 모듈은 새로운 `Session` 객체를 만드는데 사용할 수 있습니다. 또한 존재하는 [`BrowserWindow`](browser-window.md)의 @@ -322,7 +324,7 @@ session.fromPartition(partition).setPermissionRequestHandler(function(webContent #### `ses.webRequest` -`webRequest` API는 생명주기의 다양한 단계에 맞춰 요청 컨텐츠를 가로채거나 변경할 수 +`webRequest` API는 생명주기의 다양한 단계에 맞춰 요청 콘텐츠를 가로채거나 변경할 수 있도록 합니다. 각 API는 `filter`와 `listener`를 선택적으로 받을 수 있습니다. `listener`는 API의 @@ -367,7 +369,7 @@ session.defaultSession.webRequest.onBeforeSendHeaders(filter, function(details, `uploadData`는 `data` 객체의 배열입니다: * `data` Object - * `bytes` Buffer - 전송될 컨텐츠. + * `bytes` Buffer - 전송될 콘텐츠. * `file` String - 업로드될 파일의 경로. `callback`은 `response` 객체와 함께 호출되어야 합니다: diff --git a/docs-translations/ko-KR/api/shell.md b/docs-translations/ko-KR/api/shell.md index 6e9b0f25d5a4..2882bdce6fb2 100644 --- a/docs-translations/ko-KR/api/shell.md +++ b/docs-translations/ko-KR/api/shell.md @@ -1,8 +1,10 @@ # shell +> 파일과 URL을 각 기본 어플리케이션을 통해 관리합니다. + `shell` 모듈은 데스크톱 환경 통합에 관련한 유틸리티를 제공하는 모듈입니다. -다음 예제는 설정된 URL을 유저의 기본 브라우저로 엽니다: +다음 예시는 설정된 URL을 유저의 기본 브라우저로 엽니다: ```javascript const shell = require('electron').shell; diff --git a/docs-translations/ko-KR/api/synopsis.md b/docs-translations/ko-KR/api/synopsis.md index 3493223cceb6..02d269be2413 100644 --- a/docs-translations/ko-KR/api/synopsis.md +++ b/docs-translations/ko-KR/api/synopsis.md @@ -1,5 +1,7 @@ # 개요 +> Node.js와 Electron API를 사용하는 방법. + Electron은 모든 [Node.js의 built-in 모듈](http://nodejs.org/api/)과 third-party node 모듈을 완벽하게 지원합니다. ([네이티브 모듈](../tutorial/using-native-node-modules.md) 포함) diff --git a/docs-translations/ko-KR/api/system-preferences.md b/docs-translations/ko-KR/api/system-preferences.md new file mode 100644 index 000000000000..8db4cc32cefa --- /dev/null +++ b/docs-translations/ko-KR/api/system-preferences.md @@ -0,0 +1,79 @@ +# systemPreferences + +> 시스템 설정을 가져옵니다. + +## Methods + +### `systemPreferences.isDarkMode()` _OS X_ + +이 메서드는 시스템이 어두운 모드 상태인 경우 `true`를 반환하고 아닐 경우 `false`를 +반환합니다. + +### `systemPreferences.subscribeNotification(event, callback)` _OS X_ + +* `event` String +* `callback` Function + +OS X의 네이티브 알림을 구독하며, 해당하는 `event`가 발생하면 `callback`이 호출됩니다. +구독자의 `id`가 반환되며 `event`를 구독 해제할 때 사용할 수 있습니다. + +이 API는 후드에서 `NSDistributedNotificationCenter`를 구독하며, `event`에서 사용 +가능한 값은 다음과 같습니다: + +* `AppleInterfaceThemeChangedNotification` +* `AppleAquaColorVariantChanged` +* `AppleColorPreferencesChangedNotification` +* `AppleShowScrollBarsSettingChanged` + +### `systemPreferences.unsubscribeNotification(id)` _OS X_ + +* `id` Integer + +`id`와 함께 구독자를 제거합니다. + +### `systemPreferences.getUserDefault(key, type)` _OS X_ + +* `key` String +* `type` String - `string`, `boolean`, `integer`, `float`, `double`, `url` 값이 + 될 수 있습니다. + +시스템 설정에서 `key`에 해당하는 값을 가져옵니다. + +OS X에선 API가 `NSUserDefaults`를 읽어들입니다. 유명한 `key`와 `type`은 다음과 +같습니다: + +* `AppleInterfaceStyle: string` +* `AppleAquaColorVariant: integer` +* `AppleHighlightColor: string` +* `AppleShowScrollBars: string` + +### `systemPreferences.isAeroGlassEnabled()` _Windows_ + +이 메서드는 [DWM 컴포지션][dwm-composition] (Aero Glass)가 활성화 되어있을 때 +`true`를 반환합니다. 아닌 경우 `false`를 반환합니다. + +다음은 투명한 윈도우를 만들지, 일반 윈도우를 만들지를 판단하여 윈도우를 생성하는 +예시입니다 (투명한 윈도우는 DWM 컴포지션이 비활성화되어있을 시 작동하지 않습니다): + +```javascript +let browserOptions = {width: 1000, height: 800}; + +// 플랫폼이 지원하는 경우에만 투명 윈도우를 생성. +if (process.platform !== 'win32' || app.isAeroGlassEnabled()) { + browserOptions.transparent = true; + browserOptions.frame = false; +} + +// 원도우 생성 +let win = new BrowserWindow(browserOptions); + +// 페이지 로드. +if (browserOptions.transparent) { + win.loadURL('file://' + __dirname + '/index.html'); +} else { + // 투명 윈도우 상태가 아니라면, 기본적인 스타일 사용 + win.loadURL('file://' + __dirname + '/fallback.html'); +} +``` + +[dwm-composition]:https://msdn.microsoft.com/en-us/library/windows/desktop/aa969540.aspx diff --git a/docs-translations/ko-KR/api/tray.md b/docs-translations/ko-KR/api/tray.md index b0293d40fcb3..6162557e1a7c 100644 --- a/docs-translations/ko-KR/api/tray.md +++ b/docs-translations/ko-KR/api/tray.md @@ -1,7 +1,6 @@ # Tray -`Tray`는 OS의 알림 영역에 아이콘을 표시합니다. 보통 컨텍스트 메뉴(context menu)를 -같이 사용합니다. +> 아이콘과 컨텍스트 메뉴를 시스템 알림 영역에 추가합니다. ```javascript const electron = require('electron'); diff --git a/docs-translations/ko-KR/api/web-contents.md b/docs-translations/ko-KR/api/web-contents.md index 48798f79b6cc..fa6b69b61bc7 100644 --- a/docs-translations/ko-KR/api/web-contents.md +++ b/docs-translations/ko-KR/api/web-contents.md @@ -1,9 +1,11 @@ # webContents +> 웹 페이지를 렌더링하고 제어합니다. + `webContents`는 [EventEmitter](http://nodejs.org/api/events.html#events_class_events_eventemitter)를 상속받았습니다. 웹 페이지의 렌더링과 관리를 책임지며 [`BrowserWindow`](browser-window.md)의 속성입니다. 다음은 `webContents` 객체에 -접근하는 예제입니다: +접근하는 예시입니다: ```javascript const BrowserWindow = require('electron').BrowserWindow; @@ -501,7 +503,7 @@ CSS 코드를 현재 웹 페이지에 삽입합니다. ### `webContents.findInPage(text[, options])` -* `text` String - 찾을 컨텐츠, 반드시 공백이 아니여야 합니다. +* `text` String - 찾을 콘텐츠, 반드시 공백이 아니여야 합니다. * `options` Object (optional) * `forward` Boolean - 앞에서부터 검색할지 뒤에서부터 검색할지 여부입니다. 기본값은 `true`입니다. diff --git a/docs-translations/ko-KR/api/web-frame.md b/docs-translations/ko-KR/api/web-frame.md index 292f7d81420d..4b9ade4bebed 100644 --- a/docs-translations/ko-KR/api/web-frame.md +++ b/docs-translations/ko-KR/api/web-frame.md @@ -1,9 +1,8 @@ # webFrame -`web-frame` 모듈은 현재 웹 페이지의 렌더링 상태를 설정 할 수 있도록 관련 유틸리티를 -제공하는 모듈입니다. +> 현재 웹 페이지의 렌더링 상태를 커스터마이즈합니다. -다음 예제는 현재 페이지를 200% 줌 합니다: +다음 예시는 현재 페이지를 200% 줌 합니다: ```javascript var webFrame = require('electron').webFrame; @@ -13,7 +12,7 @@ webFrame.setZoomFactor(2); ## Methods -`web-frame` 모듈은 다음과 같은 메서드를 가지고 있습니다: +`webFrame` 모듈은 다음과 같은 메서드를 가지고 있습니다: ### `webFrame.setZoomFactor(factor)` @@ -56,7 +55,7 @@ Input field나 text area에 철자 검사(spell checking) 제공자를 설정합 `provider`는 반드시 전달된 단어의 철자가 맞았는지 검사하는 `spellCheck` 메소드를 가지고 있어야 합니다. -[node-spellchecker][spellchecker]를 철자 검사 제공자로 사용하는 예제입니다: +[node-spellchecker][spellchecker]를 철자 검사 제공자로 사용하는 예시입니다: ```javascript webFrame.setSpellCheckProvider("en-US", true, { @@ -72,14 +71,14 @@ webFrame.setSpellCheckProvider("en-US", true, { `scheme`을 보안 스킴으로 등록합니다. -보안 스킴은 혼합된 컨텐츠 경고를 발생시키지 않습니다. 예를 들어 `https` 와 `data`는 +보안 스킴은 혼합된 콘텐츠 경고를 발생시키지 않습니다. 예를 들어 `https` 와 `data`는 네트워크 공격자로부터 손상될 가능성이 없기 때문에 보안 스킴이라고 할 수 있습니다. ### `webFrame.registerURLSchemeAsBypassingCSP(scheme)` * `scheme` String -현재 페이지 컨텐츠의 보안 정책에 상관없이 `scheme`로부터 리소스가 로드됩니다. +현재 페이지 콘텐츠의 보안 정책에 상관없이 `scheme`로부터 리소스가 로드됩니다. ### `webFrame.registerURLSchemeAsPrivileged(scheme)` diff --git a/docs-translations/ko-KR/api/web-view-tag.md b/docs-translations/ko-KR/api/web-view-tag.md index b04398e8e5d6..ae446975ef28 100644 --- a/docs-translations/ko-KR/api/web-view-tag.md +++ b/docs-translations/ko-KR/api/web-view-tag.md @@ -1,18 +1,20 @@ # `` 태그 -`guest` 컨텐츠(웹 페이지)를 Electron 앱 페이지에 삽입하기 위해 `webview` 태그를 -사용할 수 있습니다. 게스트 컨텐츠는 `webview` 컨테이너에 담겨 대상 페이지에 삽입되고 -해당 페이지에선 게스트 컨텐츠의 배치 및 렌더링 과정을 조작할 수 있습니다. +> 외부 웹 콘텐츠를 고립된 프레임과 프로세스에서 표시합니다. + +`guest` 콘텐츠(웹 페이지)를 Electron 앱 페이지에 삽입하기 위해 `webview` 태그를 +사용할 수 있습니다. 게스트 콘텐츠는 `webview` 컨테이너에 담겨 대상 페이지에 삽입되고 +해당 페이지에선 게스트 콘텐츠의 배치 및 렌더링 과정을 조작할 수 있습니다. `iframe`과는 달리 `webview`는 어플리케이션과 분리된 프로세스에서 작동합니다. -이는 웹 페이지와 같은 권한을 가지지 않고 앱과 임베디드(게스트) 컨텐츠간의 모든 -상호작용이 비동기로 작동한다는 것을 의미합니다. 따라서 임베디드 컨텐츠로부터 +이는 웹 페이지와 같은 권한을 가지지 않고 앱과 임베디드(게스트) 콘텐츠간의 모든 +상호작용이 비동기로 작동한다는 것을 의미합니다. 따라서 임베디드 콘텐츠로부터 어플리케이션을 안전하게 유지할 수 있습니다. -## 예제 +## 예시 웹 페이지를 어플리케이션에 삽입하려면 `webview` 태그를 사용해 원하는 타겟 페이지에 -추가하면 됩니다. (게스트 컨텐츠가 앱 페이지에 추가 됩니다) 간단한 예로 `webview` +추가하면 됩니다. (게스트 콘텐츠가 앱 페이지에 추가 됩니다) 간단한 예로 `webview` 태그의 `src` 속성에 페이지를 지정하고 css 스타일을 이용해서 컨테이너의 외관을 설정할 수 있습니다: @@ -20,8 +22,8 @@ ``` -게스트 컨텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여 -응답을 받을 수 있습니다. 다음 예제를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의 +게스트 콘텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여 +응답을 받을 수 있습니다. 다음 예시를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의 이벤트를 확인하고 두번째 리스너는 페이지의 로딩이 끝난시점을 확인합니다. 그리고 페이지를 로드하는 동안 "loading..." 메시지를 표시합니다. @@ -200,7 +202,7 @@ API를 사용할 수 있습니다. 이를 지정하면 내부에서 로우레벨 **참고:** 태그 객체의 메서드는 페이지 로드가 끝난 뒤에만 사용할 수 있습니다. -**예제** +**예시** ```javascript webview.addEventListener("dom-ready", function() { @@ -404,7 +406,7 @@ Service worker에 대한 개발자 도구를 엽니다. ### `webContents.findInPage(text[, options])` -* `text` String - 찾을 컨텐츠, 반드시 공백이 아니여야 합니다. +* `text` String - 찾을 콘텐츠, 반드시 공백이 아니여야 합니다. * `options` Object (optional) * `forward` Boolean - 앞에서부터 검색할지 뒤에서부터 검색할지 여부입니다. 기본값은 `true`입니다. @@ -451,7 +453,7 @@ Webview 페이지를 PDF 형식으로 인쇄합니다. 임의의 인자를 보낼 수도 있습니다. 렌더러 프로세스는 `ipcRenderer` 모듈의 `channel` 이벤트로 이 메시지를 받아 처리할 수 있습니다. -예제는 [webContents.send](web-contents.md#webcontentssendchannel-args)를 참고하세요. +예시는 [webContents.send](web-contents.md#webcontentssendchannel-args)를 참고하세요. ### `.sendInputEvent(event)` @@ -582,8 +584,8 @@ Returns: `console.log` API에 의해 로깅될 때 발생하는 이벤트입니다. -다음 예제는 모든 로그 메시지를 로그 레벨이나 다른 속성에 관련 없이 호스트 페이지의 -콘솔에 다시 로깅하는 예제입니다. +다음 예시는 모든 로그 메시지를 로그 레벨이나 다른 속성에 관련 없이 호스트 페이지의 +콘솔에 다시 로깅하는 예시입니다. ```javascript webview.addEventListener('console-message', function(e) { @@ -626,7 +628,7 @@ Returns: 페이지가 새로운 브라우저 창을 생성할 때 발생하는 이벤트입니다. -다음 예제 코드는 새 URL을 시스템의 기본 브라우저로 여는 코드입니다. +다음 예시 코드는 새 URL을 시스템의 기본 브라우저로 여는 코드입니다. ```javascript webview.addEventListener('new-window', function(e) { @@ -681,8 +683,8 @@ Returns: 페이지가 자체적으로 닫힐 때 발생하는 이벤트입니다. -다음 예제 코드는 페이지가 자체적으로 닫힐 때 `webview`를 `about:blank` 페이지로 -이동시키는 예제입니다. +다음 예시 코드는 페이지가 자체적으로 닫힐 때 `webview`를 `about:blank` 페이지로 +이동시키는 예시입니다. ```javascript webview.addEventListener('close', function() { diff --git a/docs-translations/ko-KR/api/window-open.md b/docs-translations/ko-KR/api/window-open.md index 8969160c9ac5..259b08dc5966 100644 --- a/docs-translations/ko-KR/api/window-open.md +++ b/docs-translations/ko-KR/api/window-open.md @@ -1,5 +1,7 @@ # `window.open` 함수 +> 새 윈도우를 열고 URL을 로드합니다. + `window.open` 함수가 호출되면 새 창을 생성하고 `url` 페이지를 불러옵니다. 이 창은 지정한 `url`을 로드하여 만들어진 `BrowserWindow`의 새 인스턴스이며 본래 창 객체 대신 페이지의 컨트롤이 제한된 프록시 객체를 반환합니다. diff --git a/docs-translations/ko-KR/development/setting-up-symbol-server.md b/docs-translations/ko-KR/development/setting-up-symbol-server.md index abfda6851bfc..6a214c5b843a 100644 --- a/docs-translations/ko-KR/development/setting-up-symbol-server.md +++ b/docs-translations/ko-KR/development/setting-up-symbol-server.md @@ -9,12 +9,12 @@ 참고로 릴리즈된 Electron 빌드는 자체적으로 많은 최적화가 되어 있는 관계로 경우에 따라 디버깅이 쉽지 않을 수 있습니다. Inlining, tail call 등 컴파일러 최적화에 의해 디버거가 -모든 변수의 컨텐츠를 보여줄 수 없는 경우도 있고 실행 경로가 이상하게 보여지는 경우도 +모든 변수의 콘텐츠를 보여줄 수 없는 경우도 있고 실행 경로가 이상하게 보여지는 경우도 있습니다. 유일한 해결 방법은 최적화되지 않은 로컬 빌드를 하는 것입니다. 공식적인 Electron의 심볼 서버의 URL은 http://54.249.141.255:8086/atom-shell/symbols 입니다. 일단 이 URL에 직접적으로 -접근할 수는 없습니다: 디버깅 툴에 심볼의 경로를 추가해야 합니다. 아래의 예제를 참고하면 +접근할 수는 없습니다: 디버깅 툴에 심볼의 경로를 추가해야 합니다. 아래의 예시를 참고하면 로컬 캐시 디렉터리는 서버로부터 중복되지 않게 PDB를 가져오는데 사용됩니다. `c:\code\symbols` 캐시 디렉터리를 사용중인 OS에 맞춰 적당한 경로로 변경하세요. diff --git a/docs-translations/ko-KR/styleguide.md b/docs-translations/ko-KR/styleguide.md index ec57970e513e..3896f3d21d10 100644 --- a/docs-translations/ko-KR/styleguide.md +++ b/docs-translations/ko-KR/styleguide.md @@ -51,7 +51,7 @@ Electron 문서 구조를 이해하는 데 참고할 수 있는 유용한 도움 ### Methods [Method](https://developer.mozilla.org/ko/docs/Glossary/Method) 문서의 -예제입니다: +예시입니다: --- @@ -75,7 +75,7 @@ Electron 문서 구조를 이해하는 데 참고할 수 있는 유용한 도움 ### Events -[Event](https://developer.mozilla.org/ko/docs/Web/API/Event) 문서의 예제입니다: +[Event](https://developer.mozilla.org/ko/docs/Web/API/Event) 문서의 예시입니다: --- diff --git a/docs-translations/ko-KR/tutorial/application-packaging.md b/docs-translations/ko-KR/tutorial/application-packaging.md index a33e2eef96cf..bc56d824617a 100644 --- a/docs-translations/ko-KR/tutorial/application-packaging.md +++ b/docs-translations/ko-KR/tutorial/application-packaging.md @@ -168,7 +168,7 @@ Node API에는 `child_process.exec`, `child_process.spawn` 그리고 바이러스로 진단 할 수도 있습니다. 이 문제를 해결하려면 `--unpack` 옵션을 통해 파일을 압축이 풀려진 상태로 유지해야 합니다. -다음의 예제는 node 네이티브 모듈의 공유 라이브러리를 압축이 풀려진 상태로 유지합니다: +다음의 예시는 node 네이티브 모듈의 공유 라이브러리를 압축이 풀려진 상태로 유지합니다: ```bash $ asar pack app app.asar --unpack *.node diff --git a/docs-translations/ko-KR/tutorial/devtools-extension.md b/docs-translations/ko-KR/tutorial/devtools-extension.md index b45f88892d81..07281620ec71 100644 --- a/docs-translations/ko-KR/tutorial/devtools-extension.md +++ b/docs-translations/ko-KR/tutorial/devtools-extension.md @@ -10,7 +10,7 @@ **주의: 현재 React DevTools은 작동하지 않습니다. https://github.com/electron/electron/issues/915 이슈를 참고하세요!** -다음 예제는 [React DevTools Extension](https://github.com/facebook/react-devtools)을 +다음 예시는 [React DevTools Extension](https://github.com/facebook/react-devtools)을 사용합니다. 먼저 소스코드를 다운로드 받습니다: diff --git a/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md b/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md index 45342f14de28..8fd25a303af0 100644 --- a/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md +++ b/docs-translations/ko-KR/tutorial/mac-app-store-submission-guide.md @@ -66,7 +66,7 @@ Apple로부터 인증서를 취득했다면, [어플리케이션 배포](applica # 어플리케이션의 이름 APP="YourApp" # 서명할 어플리케이션의 경로 -APP_PATH="/path/to/YouApp.app" +APP_PATH="/path/to/YourApp.app" # 서명된 패키지의 출력 경로 RESULT_PATH="~/Desktop/$APP.pkg" # 요청한 인증서의 이름 diff --git a/docs-translations/ko-KR/tutorial/online-offline-events.md b/docs-translations/ko-KR/tutorial/online-offline-events.md index 5b91fc61bd55..698544e83b6c 100644 --- a/docs-translations/ko-KR/tutorial/online-offline-events.md +++ b/docs-translations/ko-KR/tutorial/online-offline-events.md @@ -1,6 +1,6 @@ # 온라인/오프라인 이벤트 감지 -온라인/오프라인 이벤트는 다음 예제와 같이 렌더러 프로세스에서 표준 HTML5 API를 이용하여 +온라인/오프라인 이벤트는 다음 예시와 같이 렌더러 프로세스에서 표준 HTML5 API를 이용하여 구현할 수 있습니다. _main.js_ @@ -41,7 +41,7 @@ _online-status.html_ 있습니다. 메인 프로세스는 `navigator` 객체를 가지고 있지 않기 때문에 이 이벤트를 직접 사용할 수는 없습니다. -대신 다음 예제와 같이 Electron의 inter-process communication(ipc) 유틸리티를 +대신 다음 예시와 같이 Electron의 inter-process communication(ipc) 유틸리티를 사용하면 이벤트를 메인 프로세스로 전달할 수 있습니다. _main.js_ diff --git a/docs-translations/ko-KR/tutorial/quick-start.md b/docs-translations/ko-KR/tutorial/quick-start.md index eb95232a06fc..45ff83d23764 100644 --- a/docs-translations/ko-KR/tutorial/quick-start.md +++ b/docs-translations/ko-KR/tutorial/quick-start.md @@ -71,52 +71,68 @@ your-app/ __알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으면 Electron은 자동으로 같은 디렉터리의 `index.js`를 로드합니다. -반드시 `main.js`에서 창을 만들고 시스템 이벤트를 처리해야 합니다. 대표적인 예제로 +반드시 `main.js`에서 창을 만들고 시스템 이벤트를 처리해야 합니다. 대표적인 예시로 다음과 같이 작성할 수 있습니다: ```javascript -'use strict'; - -const electron = require('electron'); -const app = electron.app; // 어플리케이션 기반을 조작 하는 모듈. -const BrowserWindow = electron.BrowserWindow; // 네이티브 브라우저 창을 만드는 모듈. +const electron = require('electron') +// 어플리케이션 생명주기를 조작 하는 모듈. +const app = electron.app +// 네이티브 브라우저 창을 만드는 모듈. +const BrowserWindow = electron.BrowserWindow // 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면 // 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다. -var mainWindow = null; +let mainWindow -// 모든 창이 닫히면 어플리케이션 종료. -app.on('window-all-closed', function() { - // OS X의 대부분의 어플리케이션은 유저가 Cmd + Q 커맨드로 확실하게 종료하기 전까지 - // 메뉴바에 남아 계속 실행됩니다. - if (process.platform != 'darwin') { - app.quit(); - } -}); - -// 이 메서드는 Electron의 초기화가 모두 끝나고 -// 브라우저 창을 열 준비가 되었을 때 호출됩니다. -app.on('ready', function() { +function createWindow () { // 새로운 브라우저 창을 생성합니다. - mainWindow = new BrowserWindow({width: 800, height: 600}); + mainWindow = new BrowserWindow({width: 800, height: 600}) // 그리고 현재 디렉터리의 index.html을 로드합니다. - mainWindow.loadURL('file://' + __dirname + '/index.html'); + mainWindow.loadURL('file://' + __dirname + '/index.html') // 개발자 도구를 엽니다. - mainWindow.webContents.openDevTools(); + mainWindow.webContents.openDevTools() // 창이 닫히면 호출됩니다. - mainWindow.on('closed', function() { - // 윈도우 객체의 참조를 삭제합니다 보통 멀티 윈도우 지원을 위해 + mainWindow.on('closed', function () { + // 윈도우 객체의 참조를 삭제합니다. 보통 멀티 윈도우 지원을 위해 // 윈도우 객체를 배열에 저장하는 경우가 있는데 이 경우 // 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다. - mainWindow = null; - }); -}); + mainWindow = null + }) +} + +// 이 메서드는 Electron의 초기화가 끝나면 실행되며 브라우저 +// 윈도우를 생성할 수 있습니다. 몇몇 API는 이 이벤트 이후에만 +// 사용할 수 있습니다. +app.on('ready', createWindow) + +// 모든 창이 닫히면 어플리케이션 종료. +app.on('window-all-closed', function () { + // OS X의 대부분의 어플리케이션은 유저가 Cmd + Q 커맨드로 확실하게 + // 종료하기 전까지 메뉴바에 남아 계속 실행됩니다. + if (process.platform !== 'darwin') { + app.quit() + } +}) + +app.on('activate', function () { + // OS X에선 보통 독 아이콘이 클릭되고 나서도 + // 열린 윈도우가 없으면, 새로운 윈도우를 다시 만듭니다. + if (mainWindow === null) { + createWindow() + } +}) + +// 이 파일엔 제작할 어플리케이션에 특화된 메인 프로세스 코드를 +// 포함할 수 있습니다. 또한 파일을 분리하여 require하는 방법으로 +// 코드를 작성할 수도 있습니다. + ``` -마지막으로, 사용자에게 보여줄 `index.html` 웹 페이지의 예제입니다: +마지막으로, 사용자에게 보여줄 `index.html` 웹 페이지의 예시입니다: ```html @@ -129,7 +145,7 @@ app.on('ready', function() {

헬로 월드!

이 어플리케이션은 node , Chrome , - Electron 을 사용합니다. + Electron 을 사용합니다. ``` @@ -140,12 +156,13 @@ app.on('ready', function() { 패키징 하고 패키징한 앱을 실행할 수 있습니다. 또한 Electron 실행파일을 다운로드 받아 바로 실행해 볼 수도 있습니다. -### electron-prebuilt 사용 +### electron-prebuilt -`npm`을 통해 `electron-prebuilt` 패키지를 전역에 설치하면 간단한 명령으로 앱을 -실행할 수 있습니다. +[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt)는 +Electron의 미리 컴파일된 바이너리를 포함하는 `npm` 모듈입니다. -앱 디렉터리 내에서 다음 명령으로 실행할 수 있습니다: +만약 `npm`을 통해 전역에 이 모듈을 설치했다면, 어플리케이션 소스 디렉터리에서 다음 +명령을 실행하면 바로 실행할 수 있습니다: ```bash electron . @@ -196,9 +213,9 @@ $ ./Electron.app/Contents/MacOS/Electron your-app/ ### 미리 작성된 앱 실행하기 [`atom/electron-quick-start`](https://github.com/electron/electron-quick-start) -저장소를 클론하면 이 문서에서 작성한 예제 앱을 바로 실행해 볼 수 있습니다. +저장소를 클론하면 이 문서에서 작성한 예시 앱을 바로 실행해 볼 수 있습니다. -**참고**: 이 예제를 실행시키려면 [Git](https://git-scm.com)과 +**참고**: 이 예시를 실행시키려면 [Git](https://git-scm.com)과 [Node.js](https://nodejs.org/en/download/)가 필요합니다. (CLI에서 실행 가능한 [npm](https://npmjs.org)이 있어야 합니다) diff --git a/docs-translations/ko-KR/tutorial/using-native-node-modules.md b/docs-translations/ko-KR/tutorial/using-native-node-modules.md index e153b265b634..156319aaec4b 100644 --- a/docs-translations/ko-KR/tutorial/using-native-node-modules.md +++ b/docs-translations/ko-KR/tutorial/using-native-node-modules.md @@ -12,7 +12,7 @@ node.js의 버전을 확인할 필요가 있습니다. Electron에서 사용하 [releases](https://github.com/electron/electron/releases)에서 확인할 수 있으며 `process.version`을 출력하여 버전을 확인할 수도 있습니다. ([시작하기](./quick-start.md)의 -예제를 참고하세요) +예시를 참고하세요) 혹시 직접 만든 네이티브 모듈이 있다면 [NAN](https://github.com/nodejs/nan/) 모듈을 사용하는 것을 고려해보는 것이 좋습니다. 이 모듈은 다중 버전의 node.js를 지원하기 쉽게 @@ -28,7 +28,7 @@ Electron도 이 모듈을 통해 포팅된 네이티브 모듈을 사용할 수 [`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 패키지를 사용하면 빠르고 간단하게 네이티브 모듈을 다시 빌드할 수 있습니다. -다음 예제는 `electron-rebuild`를 통해 자동으로 모듈의 헤더를 다운로드하고 네이티브 +다음 예시는 `electron-rebuild`를 통해 자동으로 모듈의 헤더를 다운로드하고 네이티브 모듈을 빌드합니다: ```sh diff --git a/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md b/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md index 1437bbde92c9..37e1c4188df8 100644 --- a/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md +++ b/docs-translations/ko-KR/tutorial/using-pepper-flash-plugin.md @@ -1,7 +1,8 @@ # Pepper 플래시 플러그인 사용하기 -Electron은 Pepper 플래시 플러그인을 지원합니다. -Pepper 플래시 플러그인을 사용하려면 Pepper 플래시 플러그인의 위치를 지정해야 합니다. +Electron은 Pepper 플래시 플러그인을 지원합니다. Electron에서 Pepper 플래시 +플러그인을 사용하려면 Pepper 플래시 플러그인의 위치를 지정한 후 어플리케이션 내에서 +활성화 시켜야 합니다. ## 플래시 플러그인 준비하기 @@ -12,29 +13,29 @@ Pepper 플래시 플러그인을 사용하려면 Pepper 플래시 플러그인 ## Electron 스위치 추가 플러그인을 사용하려면 Electron 커맨드 라인에 `--ppapi-flash-path` 와 -`ppapi-flash-version` 플래그를 app의 ready 이벤트가 호출되기 전에 추가해야 합니다. -그리고 `browser-window`에 `plugins` 스위치도 추가해야 합니다. +`ppapi-flash-version` 플래그를 `app`의 `ready` 이벤트가 발생하기 전에 추가해야 +합니다. 그리고 `browser-window`에 `plugins` 옵션을 활성화해야 합니다. ```javascript // 플래시 플러그인의 위치를 설정합니다. -// Windows의 경우, /path/to/pepflashplayer.dll +// Windows의 경우, /path/to/pepflashplayer.dll 또는 main.js에 존재하는 경우 pepflashplayer.dll // OS X의 경우, /path/to/PepperFlashPlayer.plugin // Linux의 경우, /path/to/libpepflashplayer.so app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so'); -// Specify flash version, for example, v17.0.0.169 +// 선택적인으로 플래시 플레이어의 버전을 설정합니다. 예시로는, v17.0.0.169 app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169'); app.on('ready', function() { mainWindow = new BrowserWindow({ - 'width': 800, - 'height': 600, - 'web-preferences': { - 'plugins': true + width: 800, + height: 600, + webPreferences: { + plugins: true } }); mainWindow.loadURL('file://' + __dirname + '/index.html'); - // Something else + // 이외의 코드 }); ``` @@ -45,3 +46,13 @@ app.on('ready', function() { ```html ``` + +## 문제 해결 + +개발자 도구의 콘솔에서 `navigator.plugins`를 탐색하면 Pepper 플래시 플러그인이 잘 +로드되었는지를 확인할 수 있습니다. (물론 플러그인의 경로를 잘 설정하지 않으면 확인할 +수 없습니다) + +Pepper 플래시 플러그인의 구조는 Electron과 일치해야 합니다. Windows에서 자주 +발생하는 문제는 32비트 버전의 플래시 플레이어를 64비트 버전의 Electron에서 사용하는 +것입니다. diff --git a/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md b/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md index 6cc5472bb12c..e16f7be944e9 100644 --- a/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md +++ b/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md @@ -13,7 +13,7 @@ Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을 ## WebDriverJs 설정하기 [WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs)는 WebDriver를 -사용하여 테스트 할 수 있도록 도와주는 node 패키지입니다. 다음 예제를 참고하세요. +사용하여 테스트 할 수 있도록 도와주는 node 패키지입니다. 다음 예시를 참고하세요. ### 1. 크롬 드라이버 시작 diff --git a/docs-translations/pt-BR/api/process.md b/docs-translations/pt-BR/api/process.md index 1c20e2df1187..71502de80d62 100644 --- a/docs-translations/pt-BR/api/process.md +++ b/docs-translations/pt-BR/api/process.md @@ -3,8 +3,8 @@ O objeto `process` no Electron tem as seguintes diferenças do objeto no upstrea * `process.type` String - Tipo de processo, pode ser `browser` (processo principal) ou `renderer`. -* `process.versions['electron']` String - Versão do Electron. -* `process.versions['chrome']` String - Versão do Chromium. +* `process.versions.electron` String - Versão do Electron. +* `process.versions.chrome` String - Versão do Chromium. * `process.resourcesPath` String - Caminho para o código fonte JavaScript. * `process.mas` Boolean - Para build da Mac App Store, este valor é `true`, para outros builds é `undefined`. diff --git a/docs-translations/pt-BR/tutorial/quick-start.md b/docs-translations/pt-BR/tutorial/quick-start.md index 76b128df5d04..6a21123ecf6e 100644 --- a/docs-translations/pt-BR/tutorial/quick-start.md +++ b/docs-translations/pt-BR/tutorial/quick-start.md @@ -130,7 +130,7 @@ Finalmente o `index.html` é a página web que você quer mostrar:

Hello World!

Nós estamos usando io.js - e Electron . + e Electron . ``` diff --git a/docs-translations/ru-RU/tutorial/application-distribution.md b/docs-translations/ru-RU/tutorial/application-distribution.md new file mode 100644 index 000000000000..e8ddd9f22f20 --- /dev/null +++ b/docs-translations/ru-RU/tutorial/application-distribution.md @@ -0,0 +1,126 @@ +# Распространение приложения + +Чтобы разпространять ваше приложение на Electron, папка с вашим приложением +должна называться `app` и находиться в папке ресурсов Electron (на OS X это +`Electron.app/Contents/Resources/`, на Linux и Windows - `resources/`), +вот так: + +На OS X: + +```text +electron/Electron.app/Contents/Resources/app/ +├── package.json +├── main.js +└── index.html +``` + +На Windows и Linux: + +```text +electron/resources/app +├── package.json +├── main.js +└── index.html +``` + +Затем запустите `Electron.app` (или `electron` на Linux, `electron.exe` на Windows), +и Electron запустится как ваше приложение. Теперь папка `electron` и есть дистрибутив, +который вы должны распространять пользователям. + +## Упаковка вашего приложения в файл + +Если вы не хотите распространять исходные коды вашего проект, вы можете +упаковать его в архив [asar](https://github.com/atom/asar), чтобы не +показывать пользователям исходные коды. + +Чтобы использовать `asar` для замены папки `app` на архив вам нужно +переименовать архив в `app.asar` и положить его в папку ресурсов Electron, +после чего Electron попробует считать ресурсы и запустить архив. + + +На OS X: + +```text +electron/Electron.app/Contents/Resources/ +└── app.asar +``` + +На Windows и Linux: + +```text +electron/resources/ +└── app.asar +``` + +Больше деталей можна найти в [инстуркции по упаковке приложения](application-packaging.md). + +## Ребрендирование скачанных исполняемых файлов +После того, как вы подключили ваше приложение к Electron, +вам наверняка захочеться ребрендировать его перед распространением. + +### Windows + +Вы можете переименовать `electron.exe` как пожелаете и поменять иконку и прочую +информацию приложениями вроде [rcedit](https://github.com/atom/rcedit). + +### OS X + +Вы можете переименовать `Electron.app` как пожелаете, а также изменить +поля `CFBundleDisplayName`, `CFBundleIdentifier` и `CFBundleName` в следующих +файлах: + +* `Electron.app/Contents/Info.plist` +* `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist` + +Вы таже можете переименовать приложение-помощник, чтобы оно не показывало `Electron Helper`, +убедитесь, что вы переименовали его исполняемый файл. + +Структура переименованного приложения выглядит примерно так: + +``` +MyApp.app/Contents +├── Info.plist +├── MacOS/ +│   └── MyApp +└── Frameworks/ + ├── MyApp Helper EH.app + | ├── Info.plist + | └── MacOS/ + |    └── MyApp Helper EH + ├── MyApp Helper NP.app + | ├── Info.plist + | └── MacOS/ + |    └── MyApp Helper NP + └── MyApp Helper.app + ├── Info.plist + └── MacOS/ +    └── MyApp Helper +``` + +### Linux + +Вы можете переименовать исполняемый файл `electron` как пожелаете. + +## Rebranding by Rebuilding Electron from Source + +Вы также можете ребрендировать Electron изменив имя продукиа и собрав его +из исходных кодов. Чтобы сделать это вам нужно изменить `atom.gyp` и полностью +пересобрать Electron. + +### grunt-build-atom-shell + +Проверка и пересборка кода Electron довольно сложная задача, так что мы +мы сделали файл-инструкцию для Grunt, который будет делать это автоматически: +[grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell). + +Этот файл автоматически просмотрит изменения в `.gyp` фалле, соберёт +Electron из исходных кодов и пересоберёт модули Node, чтобы всё подходило +под новое имя. + +## Инструменты + +Вы также можете использовать инструменты оттретьих лиц, +которые сделают работу за вас: + +* [electron-packager](https://github.com/maxogden/electron-packager) +* [electron-builder](https://github.com/loopline-systems/electron-builder) diff --git a/docs-translations/ru-RU/tutorial/application-packaging.md b/docs-translations/ru-RU/tutorial/application-packaging.md new file mode 100644 index 000000000000..b63565ed7b8e --- /dev/null +++ b/docs-translations/ru-RU/tutorial/application-packaging.md @@ -0,0 +1,179 @@ +# Упаковка приложения + +Чтобы смягчить [проблемы](https://github.com/joyent/node/issues/6960) с длинными +именами под Windows, немного ускорить `require` и скрыть ваши исходные коды, вы +можете упаковать его в архив [asar][asar], немного поменяв исходный код. + +## Генерация архива `asar` + +Архив [asar][asar] - простой фомат похожий на tar, который собирает много файлов +в один. Electron может читать такой файл без распаковки. + +Шаги для упавки вашего приложения архив `asar`: + +### 1. Установите саму утилиту asar + +```bash +$ npm install -g asar +``` + +### 2. Упакуйте с помощью `asar pack` + +```bash +$ asar pack your-app app.asar +``` + +## Использование архивов `asar` + +В Electron есть два вида API: API Node, которые устанавливаются с помощью Node.Js и +веб API, которые предоставляюся Chromium. Оба предоставляют возможность считывать из +архивов `asar`. + +### Node API + +С специальными патчами в Electron, части Node API вроде `fs.readFile` и `require` +считают архивы `asar` виртуальными папками и файлы в них доступны как в обычных. + +Например, у нас есть арихив `example.asar` в `/path/to`: + +```bash +$ asar list /path/to/example.asar +/app.js +/file.txt +/dir/module.js +/static/index.html +/static/main.css +/static/jquery.min.js +``` + +Прочитаеем файл в архиве `asar`: + +```javascript +const fs = require('fs'); +fs.readFileSync('/path/to/example.asar/file.txt'); +``` + +Список всех файлов начиная от корня архива: + +```javascript +const fs = require('fs'); +fs.readdirSync('/path/to/example.asar'); +``` + +Ичпользуем модуль из архива: + +```javascript +require('/path/to/example.asar/dir/module.js'); +``` + +Вы также можете показывать веб страницы из архива `asar` через `BrowserWindow`: + +```javascript +const BrowserWindow = require('electron').BrowserWindow; +var win = new BrowserWindow({width: 800, height: 600}); +win.loadURL('file:///path/to/example.asar/static/index.html'); +``` + +### Веб API + +На веб страницах файлы запрашиваются с помощью протокола `file:`. Как и в Node API +архивы `asar` считаются за директории. + +Пример получения файла с помощью `$.get`: + +```html + +``` + + +### Использование архива `asar` в качестве обычного файла + +Для случаев, когда вам, например, нужно проверить хэш-сумму архива `asar`, +нужно использовать архив как файл. Для этой цели существует встроенный модуль +`original-fs`, который предоставляет доступ к `fs` без поддежки `asar`: + +```javascript +var originalFs = require('original-fs'); +originalFs.readFileSync('/path/to/example.asar'); +``` +Вы также можете выставить `process.noAsar` в `true`, чтобы выключить поддержку `asar` +в модуле `fs`: + +```javascript +process.noAsar = true; +fs.readFileSync('/path/to/example.asar'); +``` + +## Ограничения Node API + +Хотя мы и старались как могли, чтобы сделать `asar` максимально похожим на папки, +всё ещё существуют некоторые ограничения из-за низкоуровневой натуры Node API. + +### Архивы только для чтения + +Архивы не могут быть изменены, так что все функции API Node, которые меняют файлы, +не буду работать с архивами `asar`. + +### Нельзя установить рабочую директорию в архиве + +Хотя архивы `asar` и считаются папками, они ими на самом деле не являются, +так что вы не можете установить в них рабочую директорию. Передача +архивов `asar` в качестве аргумента `cwd` некоторым API также может вызывать ошибки. + + +### Распаковка для некоторых API + +Большинство API `fs` могут читать файлы или получить сведения о них прямо из +архива, без распаковки, однако для некоторых, которые передают путь к системным +вызовам, Electron распакует нужный файл в временную папку и передаст путь к этому +файлу. + +API которым нужна распаковка: + +* `child_process.execFile` +* `child_process.execFileSync` +* `fs.open` +* `fs.openSync` +* `process.dlopen` - используется `require` на нативных модулях + +### Подельная информация для `fs.stat` + +Объект `Stats`, возвращаемый `fs.stat`, и его друзья для остальных файлов +в архиве `asar` специально генерируются, потому что на самом деле этих файлов +не существует в файловой системе. Вам не стоит доверять информации +из объектов `Stats`, кроме, разве что, размера и типа файлов. + +### Запуск исполняемых файлов из архивов `asar` + +Существуют некоторые API Node, которые исполняют файлы, например `child_process.exec`, +`child_process.spawn` и `child_process.execFile`, но только `execFile` может +исполнять файлы из архивов `asar`. + +Так вышло потому, что `exec` и `spawn` принимают `команду` а не `файл` как параметр, +а `команды` исполняются в оболочке. Нет никакой реальной возможности проверить, +реален ли файл или находится в архиве `asar`, и даже если мы смогли бы проверить, +то неясно, как земенить путь к файлу без побочных эффектов. + +## Добавление распакованых файлов в архив `asar` + +Как говорилось выше, некоторые API Node будут распаковывать файлв, +чтобы их использовать. Кроме увеличенного потребления ресурсов это также +может вызвать предупрждения от антивирусов. + +Чтобы обойти это, вы можете распаковать некоторые файлы, создавая архивы, +с помощью опции `--unpack`. Пример показывает распаковку нативных модулей: + +```bash +$ asar pack app app.asar --unpack *.node +``` + +После запуска команды выше в вашей папке, кроме `app.asar`, появится +`app.asar.unpacked`, которая будет содержать распакованные файлы, эту +папку стоит копировать вместе с `app.asar` при распространении. + +[asar]: https://github.com/atom/asar diff --git a/docs-translations/ru-RU/tutorial/quick-start.md b/docs-translations/ru-RU/tutorial/quick-start.md new file mode 100644 index 000000000000..b18d17c41d49 --- /dev/null +++ b/docs-translations/ru-RU/tutorial/quick-start.md @@ -0,0 +1,225 @@ +# Быстрый старт + +Electron позволяет вам делать приложения для рабочего стола на чистом JavaScript, +предоставляя среду с богатым API. Можете представлять его как Node.js, который +ориентирован на рабочий стол, а не веб сервера. + +Это, однако, не значит, что Electron — лишь привязки к GUI билиотекам. На деле +Electron использует веб-страницы как интерфейс, так что вы можете считать его +небольшим Chroumium браузером, который контролируется с помощью JavaScript. + +### Главный процесс + +В Electron процесс, который запускает `main` из `package.json` называется +__главным процессом__. Скрипт, который работает в главном процессе может +показывать GUI, создавая веб-страницы. + +### Процесс-рендерер + +Так как Electron использует Chromium для показа веб-страниц, +мульти-процессовая архитектура показа страниц Chromium тоже используется. +Каждая веб-страницы в Electron работает в своём собственном процессе, +который называется __процесс-рендерер__. + +В обычных браузерах веб-страницы обычно запускаются в "песочнице" и им недоступны +реальные ресурсы компьютера. Пользователи Electron же могут использовать API +Node.js на страницах, что допускает более низкоуровневую работу с операционной системой. + +### Разница мужду главным процессом и процессом-рендерером + +Главный процесс создаёт веб-страницы используя `BrowserWindow`. Каждый экземпляр +`BrowserWindow` показывает веб-страницу через свой собственный процесс-рендерер. +Если экземпляр `BrowserWindow` уничтожается, то и соответствующий процесс-рендерер тоже +завершается. + +Главный процесс управляет всеми веб-страницами и соответствующими им процессами-редерерами. +Каждый процесс-рендерер изолирован и управляет только своей веб-страницей. + +На веб-страницах не позволяется вызывать нативные API, которые управляют GUI, +потому что это очень опасно и может легко вызвать утечку ресурсов. Если вы хотите +выполнить действия с GUI на странице, процесс-рендерер этой страницы должен +"попросить" главный процесс сделать эти действия. + +В Electron есть несолько способов общения между процессам. Например, модули +[`ipcRenderer`](../api/ipc-renderer.md) и [`ipcMain`](../api/ipc-main.md) используются +для отправки сообщений, а [remote](../api/remote.md) - для коммуникации в RPC стиле. +В ЧАВО также есть пункт о том, [как разделять информацию между страницами][share-data] + +## Первое приложение на Electron + +Как правило, приложение Electron структурировано следующим образом:: + +```text +your-app/ +├── package.json +├── main.js +└── index.html +``` + +Формат `package.json` точно такой же, как у модулей Node и сприпт, объявленый +как `main`, будет выполняться при запуске вашего приложения, работая в +главном процессе. Например, ваш `package.json` может выглядеть вот так: + +```json +{ + "name" : "your-app", + "version" : "0.1.0", + "main" : "main.js" +} +``` + +__Заметка__: Если поле `main` отсутствует в `package.json`, Electron попробует +загрузить `index.js`. + + +`main.js` должен создавать окно и управлять системными событиями, +типичный пример: + +```javascript +const electron = require('electron') +// Модуль, контролирующий основное: сам Electron. +const app = electron.app +// Модуль, создающий окно приложения. +const BrowserWindow = electron.BrowserWindow + +// Удерживайте глобальное обращение к объекту окна, если вы так не сделаете, то +// окно само закроется после того, как объект будет собран сборщиком мусора. +let mainWindow + +function createWindow () { + // Создаём окно браузера. + mainWindow = new BrowserWindow({width: 800, height: 600}) + + // и загружаем index.html приложения. + mainWindow.loadURL('file://' + __dirname + '/index.html') + + // Открываем DevTools. + mainWindow.webContents.openDevTools() + + // Будет выполнено, когда пользователь закроет окно + mainWindow.on('closed', function () { + //Убрать обращение на объект окна, обычно стоит хранить окна в массиве, + //если ваше приложение поддерживает несколько, сейчас стоит удалить + //соответствующий элемент. + mainWindow = null + }) +} + +//Этот метод будет вызван, когда Electron закончит инициализацию +//и будет готов создавать окна браузера. +//Некоторые API возможно использовать только послн того, как +//это произойдёт. +app.on('ready', createWindow) + +// Выйти, если все окна закрыты +app.on('window-all-closed', function () { + //На OS X приложение и его строка меню обычно остаются активными, + //пока пользователь не завершит их с помощью Cmd + Q. + if (process.platform !== 'darwin') { + app.quit() + } +}) + +app.on('activate', function () { + //На OS X приложение обычно пересоздаёт окно, когда + //пользователь кликает на его иконку в доке, если не открыто + //других окон. + if (mainWindow === null) { + createWindow() + } +}) + +//В этот файл вы можете включить остальной код вашего главного процесса. +//Вы также можете разложить его по отдельным файлам и подключить с помощью require. + +``` + +Наконец, `index.html`, страница, которую вы хотите показать: + +```html + + + + + Hello World! + + +

Привет, мир!

+ Мы используем Node , + Chrome , + и Electron . + + +``` + +## Запуск вашего приложения + +Когда вы создали `main.js`, `index.html` и `package.json` вас скорее всего захочется +запустить ваше приложение, чтобы проверить, что оно работает так, как надо. + +### electron-prebuilt + +[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt) — `npm` модуль, +который содержит прекомпилированную версию Electron. + +Если вы установили Electron глобально через `npm`, то вам нужно будет всего лишь +запустить сдедующее в папке вашего проекта: + +```bash +electron . +``` + +Если вы установили Electron локально, то выполните это: + +```bash +./node_modules/.bin/electron . +``` + +### Исполняемые файлы Electron, скачанные вручную + +Если вы скачали Electron вручную, то вы можете использовать +исполняемые файлы прямо в папке вашего проекта. + +#### Windows + +```bash +$ .\electron\electron.exe your-app\ +``` + +#### Linux + +```bash +$ ./electron/electron your-app/ +``` + +#### OS X + +```bash +$ ./Electron.app/Contents/MacOS/Electron your-app/ +``` + +`Electron.app` — часть реализного пакета Electron, вы можете скачать его +[тут](https://github.com/electron/electron/releases). + +### Запустить как дистрибутив + +Когда вы закончили написание вашего приложения, вы можете создать +дистрибутив, следуя инструкциям [отсюда](./application-distribution.md) и +затем запустить полученное приложение. + +### Попробуйте этот пример + +Скопируйте и запустите этот обучающий код, ичпользуя репозиторий [`atom/electron-quick-start`](https://github.com/electron/electron-quick-start) + +**Заметка**: Для запуска требуется [Git](https://git-scm.com) и [Node.js](https://nodejs.org/en/download/) (который включает в себя [npm](https://npmjs.org)). + +```bash +# Склонируйте репозиторий +$ git clone https://github.com/electron/electron-quick-start +# Перейдите в папку репозитория +$ cd electron-quick-start +# Установите зависимости и запустите +$ npm install && npm start +``` + +[share-data]: ../faq/electron-faq.md#how-to-share-data-between-web-pages diff --git a/docs-translations/zh-CN/api/process.md b/docs-translations/zh-CN/api/process.md index 7e8173dfb3b3..89a5e02a6758 100644 --- a/docs-translations/zh-CN/api/process.md +++ b/docs-translations/zh-CN/api/process.md @@ -4,8 +4,8 @@ Electron 中的 `process` 对象 与 upstream node 中的有以下的不同点: * `process.type` String - 进程类型, 可以是 `browser` (i.e. main process) 或 `renderer`. -* `process.versions['electron']` String - Electron的版本. -* `process.versions['chrome']` String - Chromium的版本. +* `process.versions.electron` String - Electron的版本. +* `process.versions.chrome` String - Chromium的版本. * `process.resourcesPath` String - JavaScript源代码路径. * `process.mas` Boolean - 在Mac App Store 创建, 它的值为 `true`, 在其它的地方值为 `undefined`. diff --git a/docs-translations/zh-CN/tutorial/quick-start.md b/docs-translations/zh-CN/tutorial/quick-start.md index 8bdcc05cb027..d267d3146051 100644 --- a/docs-translations/zh-CN/tutorial/quick-start.md +++ b/docs-translations/zh-CN/tutorial/quick-start.md @@ -89,7 +89,7 @@ app.on('ready', function() {

Hello World!

We are using io.js - and Electron . + and Electron . ``` diff --git a/docs-translations/zh-TW/api/process.md b/docs-translations/zh-TW/api/process.md index a4f45352b9c4..ba3dd245f7a9 100644 --- a/docs-translations/zh-TW/api/process.md +++ b/docs-translations/zh-TW/api/process.md @@ -3,8 +3,8 @@ 在 Electron 裡的 `process` 物件具有以下幾個與 upstream node 的不同點: * `process.type` String - Process 的型態，可以是 `browser` (i.e. 主行程) 或 `renderer`. -* `process.versions['electron']` String - Electron 的版本 -* `process.versions['chrome']` String - Chromium 的版本 +* `process.versions.electron` String - Electron 的版本 +* `process.versions.chrome` String - Chromium 的版本 * `process.resourcesPath` String - JavaScript 源碼的路徑 # 方法 (Methods) diff --git a/docs/api/process.md b/docs/api/process.md index 79bd9bd5572f..1becdd46df09 100644 --- a/docs/api/process.md +++ b/docs/api/process.md @@ -7,8 +7,8 @@ upstream node: * `process.type` String - Process's type, can be `browser` (i.e. main process) or `renderer`. -* `process.versions['electron']` String - Version of Electron. -* `process.versions['chrome']` String - Version of Chromium. +* `process.versions.electron` String - Version of Electron. +* `process.versions.chrome` String - Version of Chromium. * `process.resourcesPath` String - Path to JavaScript source code. * `process.mas` Boolean - For Mac App Store build, this value is `true`, for other builds it is `undefined`. diff --git a/docs/api/system-preferences.md b/docs/api/system-preferences.md index 8fdd2b54cb0b..df7ef89e65c4 100644 --- a/docs/api/system-preferences.md +++ b/docs/api/system-preferences.md @@ -59,7 +59,7 @@ not (transparent windows won't work correctly when DWM composition is disabled): let browserOptions = {width: 1000, height: 800}; // Make the window transparent only if the platform supports it. -if (process.platform !== 'win32' || app.isAeroGlassEnabled()) { +if (process.platform !== 'win32' || systemPreferences.isAeroGlassEnabled()) { browserOptions.transparent = true; browserOptions.frame = false; } diff --git a/docs/development/build-instructions-linux.md b/docs/development/build-instructions-linux.md index 79fbc5014896..870f4fca61f1 100644 --- a/docs/development/build-instructions-linux.md +++ b/docs/development/build-instructions-linux.md @@ -4,6 +4,7 @@ Follow the guidelines below for building Electron on Linux. ## Prerequisites +* At least 25GB disk space and 8GB RAM. * Python 2.7.x. Some distributions like CentOS still use Python 2.6.x so you may need to check your Python version with `python -V`. * Node.js v0.12.x. There are various ways to install Node. You can download @@ -33,11 +34,6 @@ $ sudo yum install clang dbus-devel gtk2-devel libnotify-devel libgnome-keyring- Other distributions may offer similar packages for installation via package managers such as pacman. Or one can compile from source code. -## If You Use Virtual Machines For Building - -If you plan to build Electron on a virtual machine you will need a fixed-size -device container of at least 25 gigabytes in size. - ## Getting the Code ```bash @@ -112,8 +108,6 @@ $ ./script/clean.py ## Troubleshooting -Make sure you have installed all of the build dependencies. - ### Error While Loading Shared Libraries: libtinfo.so.5 Prebulit `clang` will try to link to `libtinfo.so.5`. Depending on the host @@ -128,7 +122,7 @@ $ sudo ln -s /usr/lib/libncurses.so.5 /usr/lib/libtinfo.so.5 Test your changes conform to the project coding style using: ```bash -$ ./script/cpplint.py +$ npm run lint ``` Test functionality using: @@ -136,3 +130,25 @@ Test functionality using: ```bash $ ./script/test.py ``` + +## Advanced topics + +The default building configuration is targeted for major desktop Linux +distributions, to build for a specific distribution or device, following +information may help you. + +### Build libchromiumcontent locally + +To avoid using the prebuilt binaries of libchromiumcontent, you can pass the +`--build_libchromiumcontent` switch to `bootstrap.py` script: + +```bash +$ ./script/bootstrap.py -v --build_libchromiumcontent +``` + +Note that by default the `shared_library` configuration is not built, so you can +only build `Release` version of Electron if you use this mode: + +```bash +$ ./script/build.py -c D +``` diff --git a/docs/tutorial/mac-app-store-submission-guide.md b/docs/tutorial/mac-app-store-submission-guide.md index 404dcb80efbf..15b6142b57a9 100644 --- a/docs/tutorial/mac-app-store-submission-guide.md +++ b/docs/tutorial/mac-app-store-submission-guide.md @@ -65,8 +65,8 @@ And then sign your app with the following script: # Name of your app. APP="YourApp" -# The path of you app to sign. -APP_PATH="/path/to/YouApp.app" +# The path of your app to sign. +APP_PATH="/path/to/YourApp.app" # The path to the location you want to put the signed package. RESULT_PATH="~/Desktop/$APP.pkg" # The name of certificates you requested. diff --git a/docs/tutorial/quick-start.md b/docs/tutorial/quick-start.md index ddbda3782449..573e296d4d17 100644 --- a/docs/tutorial/quick-start.md +++ b/docs/tutorial/quick-start.md @@ -80,45 +80,60 @@ The `main.js` should create windows and handle system events, a typical example being: ```javascript -'use strict'; - -const electron = require('electron'); -const app = electron.app; // Module to control application life. -const BrowserWindow = electron.BrowserWindow; // Module to create native browser window. +const electron = require('electron') +// Module to control application life. +const app = electron.app +// Module to create native browser window. +const BrowserWindow = electron.BrowserWindow // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. -var mainWindow = null; +let mainWindow -// Quit when all windows are closed. -app.on('window-all-closed', function() { - // On OS X it is common for applications and their menu bar - // to stay active until the user quits explicitly with Cmd + Q - if (process.platform != 'darwin') { - app.quit(); - } -}); - -// This method will be called when Electron has finished -// initialization and is ready to create browser windows. -app.on('ready', function() { +function createWindow () { // Create the browser window. - mainWindow = new BrowserWindow({width: 800, height: 600}); + mainWindow = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. - mainWindow.loadURL('file://' + __dirname + '/index.html'); + mainWindow.loadURL('file://' + __dirname + '/index.html') // Open the DevTools. - mainWindow.webContents.openDevTools(); + mainWindow.webContents.openDevTools() // Emitted when the window is closed. - mainWindow.on('closed', function() { + mainWindow.on('closed', function () { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. - mainWindow = null; - }); -}); + mainWindow = null + }) +} + +// This method will be called when Electron has finished +// initialization and is ready to create browser windows. +// Some APIs can only be used after this event occurs. +app.on('ready', createWindow) + +// Quit when all windows are closed. +app.on('window-all-closed', function () { + // On OS X it is common for applications and their menu bar + // to stay active until the user quits explicitly with Cmd + Q + if (process.platform !== 'darwin') { + app.quit() + } +}) + +app.on('activate', function () { + // On OS X it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (mainWindow === null) { + createWindow() + } +}) + +// In this file you can include the rest of your app's specific main process +// code. You can also put them in separate files and require them here. + ``` Finally the `index.html` is the web page you want to show: @@ -147,8 +162,11 @@ working as expected. ### electron-prebuilt -If you've installed `electron-prebuilt` globally with `npm`, then you will only -need to run the following in your app's source directory: +[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt) is +an `npm` module that contains pre-compiled versions of Electron. + +If you've installed it globally with `npm`, then you will only need to run the +following in your app's source directory: ```bash electron . diff --git a/script/bootstrap.py b/script/bootstrap.py index 54f59c68f90f..2aba23ba82f2 100755 --- a/script/bootstrap.py +++ b/script/bootstrap.py @@ -33,15 +33,29 @@ def main(): if sys.platform == 'cygwin': update_win32_python() + update_submodules() + + libcc_source_path = args.libcc_source_path + libcc_shared_library_path = args.libcc_shared_library_path + libcc_static_library_path = args.libcc_static_library_path + + # Redirect to use local libchromiumcontent build. + if args.build_libchromiumcontent: + build_libchromiumcontent(args.verbose, args.target_arch) + dist_dir = os.path.join(SOURCE_ROOT, 'vendor', 'brightray', 'vendor', + 'libchromiumcontent', 'dist', 'main') + libcc_source_path = os.path.join(dist_dir, 'src') + libcc_shared_library_path = os.path.join(dist_dir, 'shared_library') + libcc_static_library_path = os.path.join(dist_dir, 'static_library') + if PLATFORM != 'win32': update_clang() - update_submodules() setup_python_libs() update_node_modules('.') bootstrap_brightray(args.dev, args.url, args.target_arch, - args.libcc_source_path, args.libcc_shared_library_path, - args.libcc_static_library_path) + libcc_source_path, libcc_shared_library_path, + libcc_static_library_path) if PLATFORM == 'linux': download_sysroot(args.target_arch) @@ -71,6 +85,8 @@ def parse_args(): 'prompts.') parser.add_argument('--target_arch', default=get_target_arch(), help='Manually specify the arch to build for') + parser.add_argument('--build_libchromiumcontent', action='store_true', + help='Build local version of libchromiumcontent') parser.add_argument('--libcc_source_path', required=False, help='The source path of libchromiumcontent. ' \ 'NOTE: All options of libchromiumcontent are ' \ @@ -159,6 +175,13 @@ def update_win32_python(): execute_stdout(['git', 'clone', PYTHON_26_URL]) +def build_libchromiumcontent(verbose, target_arch): + args = [os.path.join(SOURCE_ROOT, 'script', 'build-libchromiumcontent.py')] + if verbose: + args += ['-v'] + execute_stdout(args + ['--target_arch', target_arch]) + + def update_clang(): execute_stdout([os.path.join(SOURCE_ROOT, 'script', 'update-clang.sh')]) diff --git a/script/build-libchromiumcontent.py b/script/build-libchromiumcontent.py new file mode 100755 index 000000000000..2409d0125c3f --- /dev/null +++ b/script/build-libchromiumcontent.py @@ -0,0 +1,48 @@ +#!/usr/bin/env python + +import argparse +import os +import sys + +from lib.config import enable_verbose_mode, get_target_arch +from lib.util import execute_stdout + + +SOURCE_ROOT = os.path.abspath(os.path.dirname(os.path.dirname(__file__))) + + +def main(): + os.chdir(SOURCE_ROOT) + + args = parse_args() + if args.verbose: + enable_verbose_mode() + + # ./script/bootstrap + # ./script/update -t x64 + # ./script/build --no_shared_library -t x64 + # ./script/create-dist -c static_library -t x64 --no_zip + script_dir = os.path.join(SOURCE_ROOT, 'vendor', 'brightray', 'vendor', + 'libchromiumcontent', 'script') + bootstrap = os.path.join(script_dir, 'bootstrap') + update = os.path.join(script_dir, 'update') + build = os.path.join(script_dir, 'build') + create_dist = os.path.join(script_dir, 'create-dist') + execute_stdout([sys.executable, bootstrap]) + execute_stdout([sys.executable, update, '-t', args.target_arch]) + execute_stdout([sys.executable, build, '-R', '-t', args.target_arch]) + execute_stdout([sys.executable, create_dist, '-c', 'static_library', + '--no_zip', '-t', args.target_arch]) + + +def parse_args(): + parser = argparse.ArgumentParser(description='Build libchromiumcontent') + parser.add_argument('--target_arch', + help='Specify the arch to build for') + parser.add_argument('-v', '--verbose', action='store_true', + help='Prints the output of the subprocesses') + return parser.parse_args() + + +if __name__ == '__main__': + sys.exit(main()) diff --git a/script/cibuild b/script/cibuild index 59437837aa16..7d025b4e82cd 100755 --- a/script/cibuild +++ b/script/cibuild @@ -75,8 +75,10 @@ def main(): run_script('create-dist.py') run_script('upload.py') else: + if PLATFORM == 'win32': + os.environ['OUTPUT_TO_FILE'] = 'output.log' run_script('build.py', ['-c', 'D']) - if PLATFORM != 'win32' and target_arch == 'x64': + if PLATFORM == 'win32' or target_arch == 'x64': run_script('test.py', ['--ci']) diff --git a/script/test.py b/script/test.py index 28aeac9dc1ff..5adfd4eed6c5 100755 --- a/script/test.py +++ b/script/test.py @@ -4,7 +4,7 @@ import os import subprocess import sys -from lib.util import atom_gyp +from lib.util import atom_gyp, rm_rf SOURCE_ROOT = os.path.abspath(os.path.dirname(os.path.dirname(__file__))) @@ -30,7 +30,20 @@ def main(): else: atom_shell = os.path.join(SOURCE_ROOT, 'out', config, PROJECT_NAME) - subprocess.check_call([atom_shell, 'spec'] + sys.argv[1:]) + returncode = 0 + try: + subprocess.check_call([atom_shell, 'spec'] + sys.argv[1:]) + except subprocess.CalledProcessError as e: + returncode = e.returncode + + if os.environ.has_key('OUTPUT_TO_FILE'): + output_to_file = os.environ['OUTPUT_TO_FILE'] + with open(output_to_file, 'r') as f: + print f.read() + rm_rf(output_to_file) + + + return returncode if __name__ == '__main__': diff --git a/script/upload.py b/script/upload.py index fd795172a679..80d9e5e9e090 100755 --- a/script/upload.py +++ b/script/upload.py @@ -101,6 +101,10 @@ def main(): upload_atom_shell(github, release, os.path.join(DIST_DIR, mksnapshot)) if PLATFORM == 'win32' and not tag_exists: + # Upload PDBs to Windows symbol server. + execute([sys.executable, + os.path.join(SOURCE_ROOT, 'script', 'upload-windows-pdb.py')]) + # Upload node headers. execute([sys.executable, os.path.join(SOURCE_ROOT, 'script', 'upload-node-headers.py'), diff --git a/spec/api-browser-window-spec.js b/spec/api-browser-window-spec.js index c364b916c3a4..e76821020bdc 100644 --- a/spec/api-browser-window-spec.js +++ b/spec/api-browser-window-spec.js @@ -173,11 +173,12 @@ describe('browser-window module', function () { }) it('does not crash in did-fail-provisional-load handler', function (done) { + this.timeout(10000) w.webContents.once('did-fail-provisional-load', function () { - w.loadURL('http://localhost:11111') + w.loadURL('http://127.0.0.1:11111') done() }) - w.loadURL('http://localhost:11111') + w.loadURL('http://127.0.0.1:11111') }) }) diff --git a/spec/api-crash-reporter-spec.js b/spec/api-crash-reporter-spec.js index 2e49fdc36c5c..e5a3223eed8f 100644 --- a/spec/api-crash-reporter-spec.js +++ b/spec/api-crash-reporter-spec.js @@ -44,7 +44,7 @@ describe('crash-reporter module', function () { if (called) return called = true assert.equal(fields['prod'], 'Electron') - assert.equal(fields['ver'], process.versions['electron']) + assert.equal(fields['ver'], process.versions.electron) assert.equal(fields['process_type'], 'renderer') assert.equal(fields['platform'], process.platform) assert.equal(fields['extra1'], 'extra1') diff --git a/spec/api-desktop-capturer-spec.js b/spec/api-desktop-capturer-spec.js index 68ab2463087d..35b7248ed5ee 100644 --- a/spec/api-desktop-capturer-spec.js +++ b/spec/api-desktop-capturer-spec.js @@ -1,7 +1,13 @@ const assert = require('assert') const desktopCapturer = require('electron').desktopCapturer +const isCI = require('electron').remote.getGlobal('isCi') + describe('desktopCapturer', function () { + if (isCI && process.platform === 'win32') { + return + } + it('should return a non-empty array of sources', function (done) { desktopCapturer.getSources({ types: ['window', 'screen'] diff --git a/spec/chromium-spec.js b/spec/chromium-spec.js index 1d37d0fe051d..577f020128ad 100644 --- a/spec/chromium-spec.js +++ b/spec/chromium-spec.js @@ -62,6 +62,10 @@ describe('chromium feature', function () { w.loadURL(url) }) + if (isCI && process.platform === 'win32') { + return + } + it('is set correctly when window is inactive', function (done) { w = new BrowserWindow({ show: false @@ -97,6 +101,9 @@ describe('chromium feature', function () { if (isCI && process.platform === 'linux') { return } + if (isCI && process.platform === 'win32') { + return + } it('can return labels of enumerated devices', function (done) { navigator.mediaDevices.enumerateDevices().then((devices) => { @@ -327,6 +334,10 @@ describe('chromium feature', function () { }) describe('webgl', function () { + if (isCI && process.platform === 'win32') { + return + } + it('can be get as context in canvas', function () { if (process.platform === 'linux') return diff --git a/spec/static/main.js b/spec/static/main.js index 84e9ba3da55d..025ff394bc66 100644 --- a/spec/static/main.js +++ b/spec/static/main.js @@ -7,8 +7,10 @@ const ipcMain = electron.ipcMain const dialog = electron.dialog const BrowserWindow = electron.BrowserWindow +const fs = require('fs') const path = require('path') const url = require('url') +const util = require('util') var argv = require('yargs') .boolean('ci') @@ -35,13 +37,18 @@ ipcMain.on('message', function (event, arg) { event.sender.send('message', arg) }) -ipcMain.on('console.log', function (event, args) { - console.error.apply(console, args) -}) - -ipcMain.on('console.error', function (event, args) { - console.error.apply(console, args) -}) +// Write output to file if OUTPUT_TO_FILE is defined. +const outputToFile = process.env.OUTPUT_TO_FILE +const print = function (_, args) { + let output = util.format.apply(null, args) + if (outputToFile) { + fs.appendFileSync(outputToFile, output + '\n') + } else { + console.error(output) + } +} +ipcMain.on('console.log', print) +ipcMain.on('console.error', print) ipcMain.on('process.exit', function (event, code) { process.exit(code) diff --git a/vendor/brightray b/vendor/brightray index 8dbaeed37b9c..3d168efd1d27 160000 --- a/vendor/brightray +++ b/vendor/brightray @@ -1 +1 @@ -Subproject commit 8dbaeed37b9c4fb8ae985670b142f659bb265fb4 +Subproject commit 3d168efd1d27d4ac3869beac6290c5066c392721