Merge pull request #5361 from preco21/korean-docs

docs: Update Korean docs as upstream
This commit is contained in:
Cheng Zhao 2016-05-01 14:34:00 +09:00
commit 586e5e2ba5
47 changed files with 344 additions and 224 deletions

View file

@ -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)

View file

@ -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)

View file

@ -1,9 +1,10 @@
# Accelerator
Accelerator는 키보드 단축키를 표현하는 문자열입니다, 여러 혼합키와 키코드를 `+` 문자를
이용하여 결합할 수 있습니다.
> 키보드 단축키를 정의합니다.
예제:
Accelerator는 `+` 문자를 통해 여러 혼합키와 키코드를 결합할 수 있습니다.
예시:
* `CommandOrControl+A`
* `CommandOrControl+Shift+Z`

View file

@ -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

View file

@ -1,9 +1,12 @@
# autoUpdater
이 모듈은 `Squirrel` 자동 업데이트 프레임워크의 인터페이스를 제공합니다.
> 어플리케이션이 자동으로 업데이트를 진행할 수 있도록 기능을 활성화합니다.
다음 프로젝트 중 하나를 택하여 사용하면, 어플리케이션을 배포하기 위한 멀티 플랫폼
릴리즈 서버를 손쉽게 구축할 수 있습니다:
`autoUpdater` 모듈은 [Squirrel](https://github.com/Squirrel) 프레임워크에 대한
인터페이스를 제공합니다.
다음 프로젝트 중 하나를 선택하여, 어플리케이션을 배포하기 위한 멀티-플랫폼 릴리즈
서버를 손쉽게 구축할 수 있습니다:
- [electron-release-server][electron-release-server]: *완벽하게 모든 기능을
지원하는 electron 어플리케이션을 위한 자가 호스트 릴리즈 서버입니다. auto-updater와

View file

@ -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])`

View file

@ -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;

View file

@ -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])

View file

@ -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`,

View file

@ -1,9 +1,8 @@
# crashReporter
`crash-reporter` 모듈은 어플리케이션의 크래시 정보를 자동으로 원격 서버에
업로드하는데 사용합니다.
> 원격 서버에 크래시 정보를 보고합니다.
다음 예제는 윈격 서버에 어플리케이션 크래시 정보를 자동으로 보고하는 예제입니다:
다음 예시는 윈격 서버에 어플리케이션 크래시 정보를 자동으로 보고하는 예시입니다:
```javascript
const crashReporter = require('electron').crashReporter;

View file

@ -1,7 +1,7 @@
# desktopCapturer
`desktopCapturer` 모듈은 `getUserMedia`에서 사용 가능한 소스를 가져올 때 사용할 수
있습니다.
> 마이크, 카메라 또는 화면에서 오디오, 비디오 그리고 이미지를 캡쳐하기 위한
`getUserMedia` 소스를 나열합니다.
```javascript
// 렌더러 프로세스 내부

View file

@ -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

View file

@ -1,5 +1,7 @@
# DownloadItem
> 원격 소스로부터의 파일 다운로드를 제어합니다.
`DownloadItem`은 EventEmitter를 상속받았으며 Electron의 다운로드 아이템을 표현합니다.
이 클래스 객체는 `Session` 모듈의 `will-download` 이벤트에 사용되며 사용자가 다운로드
아이템을 다룰 수 있도록 도와줍니다.

View file

@ -1,5 +1,7 @@
# 환경 변수
> 어플리케이션의 구성과 동작을 코드 변경 없이 제어합니다.
Electron의 몇몇 동작은 명령 줄과 어플리케이션의 코드보다 먼저 초기화되어야 하므로 환경
변수에 의해 작동합니다.

View file

@ -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
<div id="holder">

View file

@ -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(데스크톱 창 관리자)가 비활성화되어 있을 경우 투명한 창이 작동하지
않습니다.

View file

@ -1,12 +1,14 @@
# globalSortcut
> 어플리케이션에 키보드 포커스가 없을 때도 키보드 이벤트를 받을 수 있도록 합니다.
`globalShortcut` 모듈은 운영체제의 전역 키보드 단축키를 등록/해제 하는 방법을
제공합니다. 이 모듈을 사용하여 사용자가 다양한 작업을 편하게 할 수 있도록 단축키를
정의 할 수 있습니다.
**참고:** 등록된 단축키는 어플리케이션이 백그라운드로 작동(창이 포커스 되지 않음) 할
때도 계속해서 작동합니다. 이 모듈은 `app` 모듈의 `ready` 이벤트 이전에 사용할 수
없습니다.
때도 계속해서 작동합니다. 이 모듈은 `app` 모듈의 `ready` 이벤트가 발생하기 전까지
사용할 수 없습니다.
```javascript
const electron = require('electron');

View file

@ -1,5 +1,7 @@
# ipcMain
> 메인 프로세스에서 렌더러 프로세스로 비동기 통신을 합니다.
`ipcMain` 모듈은 [EventEmitter](https://nodejs.org/api/events.html) 클래스의
인스턴스입니다. 메인 프로세스에서 사용하면, 렌더러 프로세스(웹 페이지)에서 전달된
동기, 비동기 메시지를 주고 받는 방법을 제공합니다. 렌더러 프로세스에서 메시지를 전달하면
@ -14,7 +16,7 @@
* 메시지에 동기로 응답할 땐 반드시 `event.returnValue`를 설정해야 합니다.
* 메시지를 비동기로 응답할 땐 `event.sender.send(...)` 메서드를 사용할 수 있습니다.
다음 예제는 렌더러 프로세스와 메인 프로세스간에 메시지를 전달하고 받는 예제입니다:
다음 예시는 렌더러 프로세스와 메인 프로세스간에 메시지를 전달하고 받는 예시입니다:
```javascript
// 메인 프로세스

View file

@ -1,10 +1,12 @@
# ipcRenderer
> 렌더러 프로세스에서 메인 프로세스로 비동기 통신을 합니다.
`ipcRenderer` 모듈은 [EventEmitter](https://nodejs.org/api/events.html) 클래스의
인스턴스입니다. 렌더러 프로세스에서 메인 프로세스로 동기/비동기 메시지를 주고 받는
방법을 제공합니다. 또한 메인 프로세스로부터 받은 메시지에 응답할 수도 있습니다.
[ipcMain](ipc-main.md)에서 코드 예를 확인할 수 있습니다.
[ipcMain](ipc-main.md)에서 코드 예를 확인할 수 있습니다.
## 메시지 리스닝

View file

@ -1,9 +1,8 @@
# MenuItem
`menu-item` 모듈은 어플리케이션 또는 컨텍스트 [`menu`](menu.md)에 항목 아이템을
추가할 수 있도록 관련 클래스를 제공합니다.
> 네이티브 어플리케이션 메뉴와 컨텍스트 메뉴에 아이템을 추가합니다.
[`menu`](menu.md)에서 예를 확인할 수 있습니다.
[`menu`](menu.md)에서 예를 확인할 수 있습니다.
## Class: MenuItem

View file

@ -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) {
</script>
```
또 하나의 예를 들자면 다음 예는 렌더러 프로세스에서 template API를 사용하여
또 하나의 예를 들자면 다음 예는 렌더러 프로세스에서 template API를 사용하여
어플리케이션 메뉴를 만듭니다:
```javascript
@ -331,7 +332,7 @@ OS X에선 지정한 어플리케이션 메뉴에 상관없이 메뉴의 첫번
이동하고 싶은 특정 그룹의 아이템들이 있을 경우 해당 그룹의 맨 첫번째 메뉴 아이템의
위치만을 지정하면 됩니다.
### 예
### 예
메뉴 템플릿:

View file

@ -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`

View file

@ -1,11 +1,11 @@
# powerMonitor
`power-monitor` 모듈은 PC의 파워 상태를 나타냅니다. (주로 노트북 등에서 사용됩니다)
이 모듈은 메인 프로세스에서만 사용할 수 있으며, (remote 모듈(RPC)을 사용해도 작동이
됩니다) 메인 프로세스의 `app` 모듈에서 `ready` 이벤트를 호출하기 전까지 사용할 수
없습니다.
> 파워의 상태 변경을 모니터링합니다.
예제:
이 모듈은 메인 프로세스에서만 사용할 수 있습니다. `app` 모듈의 `ready` 이벤트가
발생한 이후에만 사용할 수 없습니다.
예시:
```javascript
var app = require('app');

View file

@ -1,9 +1,8 @@
# powerSaveBlocker
`powerSaveBlocker` 모듈은 시스템이 저전력(슬립) 모드로 진입하는 것을 막고 앱 시스템과
화면이 항상 활성화 상태를 유지할 수 있도록 하는 몇가지 유틸리티를 제공하는 모듈입니다.
> 시스템이 저전력 (슬립) 모드로 진입하는 것을 막습니다.
:
:
```javascript
const powerSaveBlocker = require('electron').powerSaveBlocker;

View file

@ -1,5 +1,7 @@
# process
> 현재 작동중인 어플리케이션의 정보를 가져옵니다.
Electron의 `process` 객체는 기존의 node와는 달리 약간의 차이점이 있습니다:
* `process.type` String - 프로세스의 타입, `browser` (메인 프로세스) 또는
@ -43,6 +45,10 @@ process.once('loaded', function() {
`process` 객체는 다음과 같은 메서드를 가지고 있습니다:
### `process.crash()`
현재 프로세스의 메인 스레드에 크래시를 일으킵니다.
### `process.hang()`
현재 프로세스의 주 스레드를 중단시킵니다.

View file

@ -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])`

View file

@ -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

View file

@ -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` 값으로 반환됩니다.

View file

@ -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` 객체와 함께 호출되어야 합니다:

View file

@ -1,8 +1,10 @@
# shell
> 파일과 URL을 각 기본 어플리케이션을 통해 관리합니다.
`shell` 모듈은 데스크톱 환경 통합에 관련한 유틸리티를 제공하는 모듈입니다.
다음 예는 설정된 URL을 유저의 기본 브라우저로 엽니다:
다음 예는 설정된 URL을 유저의 기본 브라우저로 엽니다:
```javascript
const shell = require('electron').shell;

View file

@ -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)
포함)

View file

@ -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

View file

@ -1,7 +1,6 @@
# Tray
`Tray`는 OS의 알림 영역에 아이콘을 표시합니다. 보통 컨텍스트 메뉴(context menu)를
같이 사용합니다.
> 아이콘과 컨텍스트 메뉴를 시스템 알림 영역에 추가합니다.
```javascript
const electron = require('electron');

View file

@ -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`입니다.

View file

@ -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)`

View file

@ -1,18 +1,20 @@
# `<webview>` 태그
`guest` 컨텐츠(웹 페이지)를 Electron 앱 페이지에 삽입하기 위해 `webview` 태그를
사용할 수 있습니다. 게스트 컨텐츠는 `webview` 컨테이너에 담겨 대상 페이지에 삽입되고
해당 페이지에선 게스트 컨텐츠의 배치 및 렌더링 과정을 조작할 수 있습니다.
> 외부 웹 콘텐츠를 고립된 프레임과 프로세스에서 표시합니다.
`guest` 콘텐츠(웹 페이지)를 Electron 앱 페이지에 삽입하기 위해 `webview` 태그를
사용할 수 있습니다. 게스트 콘텐츠는 `webview` 컨테이너에 담겨 대상 페이지에 삽입되고
해당 페이지에선 게스트 콘텐츠의 배치 및 렌더링 과정을 조작할 수 있습니다.
`iframe`과는 달리 `webview`는 어플리케이션과 분리된 프로세스에서 작동합니다.
이는 웹 페이지와 같은 권한을 가지지 않고 앱과 임베디드(게스트) 텐츠간의 모든
상호작용이 비동기로 작동한다는 것을 의미합니다. 따라서 임베디드 텐츠로부터
이는 웹 페이지와 같은 권한을 가지지 않고 앱과 임베디드(게스트) 텐츠간의 모든
상호작용이 비동기로 작동한다는 것을 의미합니다. 따라서 임베디드 텐츠로부터
어플리케이션을 안전하게 유지할 수 있습니다.
## 예
## 예
웹 페이지를 어플리케이션에 삽입하려면 `webview` 태그를 사용해 원하는 타겟 페이지에
추가하면 됩니다. (게스트 텐츠가 앱 페이지에 추가 됩니다) 간단한 예로 `webview`
추가하면 됩니다. (게스트 텐츠가 앱 페이지에 추가 됩니다) 간단한 예로 `webview`
태그의 `src` 속성에 페이지를 지정하고 css 스타일을 이용해서 컨테이너의 외관을 설정할
수 있습니다:
@ -20,8 +22,8 @@
<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
```
게스트 텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여
응답을 받을 수 있습니다. 다음 예를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의
게스트 텐츠를 조작하기 위해 자바스크립트로 `webview` 태그의 이벤트를 리스닝 하여
응답을 받을 수 있습니다. 다음 예를 참고하세요: 첫번째 리스너는 페이지 로딩 시작시의
이벤트를 확인하고 두번째 리스너는 페이지의 로딩이 끝난시점을 확인합니다. 그리고
페이지를 로드하는 동안 "loading..." 메시지를 표시합니다.
@ -200,7 +202,7 @@ API를 사용할 수 있습니다. 이를 지정하면 내부에서 로우레벨
**참고:** <webview> 태그 객체의 메서드는 페이지 로드가 끝난 뒤에만 사용할 수 있습니다.
**예**
**예**
```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)를 참고하세요.
### `<webview>.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() {

View file

@ -1,5 +1,7 @@
# `window.open` 함수
> 새 윈도우를 열고 URL을 로드합니다.
`window.open` 함수가 호출되면 새 창을 생성하고 `url` 페이지를 불러옵니다. 이 창은
지정한 `url`을 로드하여 만들어진 `BrowserWindow`의 새 인스턴스이며 본래 창 객체 대신
페이지의 컨트롤이 제한된 프록시 객체를 반환합니다.

View file

@ -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에 맞춰 적당한 경로로 변경하세요.

View file

@ -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) 문서의 예입니다:
---

View file

@ -168,7 +168,7 @@ Node API에는 `child_process.exec`, `child_process.spawn` 그리고
바이러스로 진단 할 수도 있습니다.
이 문제를 해결하려면 `--unpack` 옵션을 통해 파일을 압축이 풀려진 상태로 유지해야 합니다.
다음의 예는 node 네이티브 모듈의 공유 라이브러리를 압축이 풀려진 상태로 유지합니다:
다음의 예는 node 네이티브 모듈의 공유 라이브러리를 압축이 풀려진 상태로 유지합니다:
```bash
$ asar pack app app.asar --unpack *.node

View file

@ -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)을
사용합니다.
먼저 소스코드를 다운로드 받습니다:

View file

@ -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"
# 요청한 인증서의 이름

View file

@ -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_

View file

@ -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
<!DOCTYPE html>
@ -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)이 있어야 합니다)

View file

@ -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

View file

@ -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
<webview src="http://www.adobe.com/software/flash/about/" plugins></webview>
```
## 문제 해결
개발자 도구의 콘솔에서 `navigator.plugins`를 탐색하면 Pepper 플래시 플러그인이 잘
로드되었는지를 확인할 수 있습니다. (물론 플러그인의 경로를 잘 설정하지 않으면 확인할
수 없습니다)
Pepper 플래시 플러그인의 구조는 Electron과 일치해야 합니다. Windows에서 자주
발생하는 문제는 32비트 버전의 플래시 플레이어를 64비트 버전의 Electron에서 사용하는
것입니다.

View file

@ -13,7 +13,7 @@ Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을
## WebDriverJs 설정하기
[WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs)는 WebDriver를
사용하여 테스트 할 수 있도록 도와주는 node 패키지입니다. 다음 예를 참고하세요.
사용하여 테스트 할 수 있도록 도와주는 node 패키지입니다. 다음 예를 참고하세요.
### 1. 크롬 드라이버 시작