First translation
Translate docs to korean
This commit is contained in:
Plusb Preco
parent
a1cbd11b5b
commit
30dfd54575
18 changed files with 1849 additions and 0 deletions
43
README-ko.md
Normal file
43
README-ko.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
[](http://electron.atom.io/)
|
||||
|
||||
[](https://travis-ci.org/atom/electron)
|
||||
[](https://david-dm.org/atom/electron#info=devDependencies)
|
||||
|
||||
### [Electron](https://github.com/atom/electron/) 한국어 참조문서
|
||||
|
||||
:zap: *이전까지 Atom Shell로 알려져 있었습니다* :zap:
|
||||
|
||||
|
||||
Electron은 JavaScript, HTML 그리고 CSS를 이용하여 Cross-Platform 데스크톱 어플리케이션을 개발할 수 있도록 해주는 프레임워크입니다. 이 프레임워크는 [io.js](http://iojs.org) 와
|
||||
[Chromium](http://www.chromium.org) 을 기반으로 만들어 졌으며 [Atom Editor](https://github.com/atom/atom) 에 사용되고 있습니다.
|
||||
|
||||
Electron에 대한 중요한 알림을 받으려면 Twitter에서 [@ElectronJS](https://twitter.com/electronjs)를 Follow하세요.
|
||||
|
||||
## 다운로드
|
||||
|
||||
Linux, Windows, Mac용으로 미리 빌드된 Electron 바이너리와 디버그 심볼이 준비되어 있습니다. [releases](https://github.com/atom/electron/releases) 페이지에서 받아 볼 수 있습니다.
|
||||
|
||||
또한 [`npm`](https://docs.npmjs.com/)을 이용하여 미리 빌드된 Electron 바이너리를 받을 수 있습니다:
|
||||
|
||||
```sh
|
||||
# $PATH에 `electron`을 등록하고 전역에 설치합니다.
|
||||
npm install electron-prebuilt -g
|
||||
|
||||
# 개발용 dependency로 설치합니다.
|
||||
npm install electron-prebuilt --save-dev
|
||||
```
|
||||
|
||||
### 미러
|
||||
|
||||
- [China](https://npm.taobao.org/mirrors/electron)
|
||||
|
||||
## 참조문서
|
||||
|
||||
[docs](https://github.com/preco21/electron/tree/master/docs) 에 프레임워크 사용 가이드와 API 레퍼런스가 있습니다.
|
||||
또한, Electron을 빌드 하는 방법과 프로젝트에 기여하는 방법 문서에 포함되어 있으니 참고바랍니다.
|
||||
|
||||
## 커뮤니티
|
||||
|
||||
[Atom 포럼내의 `electron` 카테고리](http://discuss.atom.io/category/electron) 와 Freenode `#atom-shell` 채팅채널이 있습니다.
|
||||
|
||||
[awesome-electron](https://github.com/sindresorhus/awesome-electron) 에 커뮤니티가 운영중인 유용한 예제 앱과 툴, 리소스가 있으니 한번 탐색해 보시기 바랍니다.
|
||||
69
docs/README-ko.md
Normal file
69
docs/README-ko.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
## 개발 가이드
|
||||
|
||||
* [어플리케이션 배포](tutorial/application-distribution-ko.md)
|
||||
* [어플리케이션 패키징](tutorial/application-packaging-ko.md)
|
||||
* [네이티브 node 모듈 사용하기](tutorial/using-native-node-modules-ko.md)
|
||||
* [메인 프로세스 디버깅하기](tutorial/debugging-main-process-ko.md)
|
||||
* [Selenium 과 WebDriver 사용하기](tutorial/using-selenium-and-webdriver-ko.md)
|
||||
* [개발자 콘솔 확장기능](tutorial/devtools-extension-ko.md)
|
||||
* [Pepper 플래시 플러그인 사용하기](tutorial/using-pepper-flash-plugin-ko.md)
|
||||
|
||||
## 튜토리얼
|
||||
|
||||
* [시작하기](tutorial/quick-start-ko.md)
|
||||
* [데스크톱 환경 통합](tutorial/desktop-environment-integration-ko.md)
|
||||
* [온라인/오프라인 이벤트](tutorial/online-offline-events-ko.md)
|
||||
|
||||
## API 레퍼런스
|
||||
|
||||
* [개요](api/synopsis-ko.md)
|
||||
* [프로세스 객체](api/process-ko.md)
|
||||
* [크롬 Command-Line 스위치에 대한 지원](api/chrome-command-line-switches-ko.md)
|
||||
|
||||
커스텀 DOM Element:
|
||||
|
||||
* [`File` 객체](api/file-object-ko.md)
|
||||
* [`<webview>` 태그](api/web-view-tag-ko.md)
|
||||
* [`window.open` 함수](api/window-open-ko.md)
|
||||
|
||||
메인 프로세스를 위한 모듈들:
|
||||
|
||||
* [app](api/app-ko.md)
|
||||
* [auto-updater](api/auto-updater-ko.md)
|
||||
* [browser-window](api/browser-window-ko.md)
|
||||
* [content-tracing](api/content-tracing-ko.md)
|
||||
* [dialog](api/dialog-ko.md)
|
||||
* [global-shortcut](api/global-shortcut-ko.md)
|
||||
* [ipc (main process)](api/ipc-main-process-ko.md)
|
||||
* [menu](api/menu-ko.md)
|
||||
* [menu-item](api/menu-item-ko.md)
|
||||
* [power-monitor](api/power-monitor-ko.md)
|
||||
* [protocol](api/protocol-ko.md)
|
||||
* [tray](api/tray-ko.md)
|
||||
|
||||
랜더러 프로세스를 위한 모듈들 (웹 페이지):
|
||||
|
||||
* [ipc (renderer)](api/ipc-renderer-ko.md)
|
||||
* [remote](api/remote-ko.md)
|
||||
* [web-frame](api/web-frame-ko.md)
|
||||
|
||||
두 프로세스에서 모두 사용 가능한 모듈들:
|
||||
|
||||
* [clipboard](api/clipboard-ko.md)
|
||||
* [crash-reporter](api/crash-reporter-ko.md)
|
||||
* [native-image](api/native-image-ko.md)
|
||||
* [screen](api/screen-ko.md)
|
||||
* [shell](api/shell-ko.md)
|
||||
|
||||
## 개발자용
|
||||
|
||||
* [코딩 스타일](development/coding-style-ko.md)
|
||||
* [소스코드 구조](development/source-code-directory-structure-ko.md)
|
||||
* [NW.js와 기술적으로 다른점 (이전 node-webkit)](development/atom-shell-vs-node-webkit-ko.md)
|
||||
* [빌드 시스템 개요](development/build-system-overview-ko.md)
|
||||
* [빌드 설명서 (Mac)](development/build-instructions-mac-ko.md)
|
||||
* [빌드 설명서 (Windows)](development/build-instructions-windows-ko.md)
|
||||
* [빌드 설명서 (Linux)](development/build-instructions-linux-ko.md)
|
||||
* [디버거에서 디버그 심볼 서버 설정](development/setting-up-symbol-server-ko.md)
|
||||
|
||||
이 문서는 (@preco21)[https://github.com/preco21]이 번역하였습니다.
|
||||
46
docs/api/accelerator-ko.md
Normal file
46
docs/api/accelerator-ko.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
# Accelerator
|
||||
|
||||
Accelerator는 키보드 단축키를 표현하는 문자열입니다, 여러 혼합키와 키코드를 `+` 문자를
|
||||
이용하여 결합할 수 있습니다.
|
||||
|
||||
예제:
|
||||
|
||||
* `Command+A`
|
||||
* `Ctrl+Shift+Z`
|
||||
|
||||
## 플랫폼에 관련하여 주의할 점
|
||||
|
||||
Linux와 Windows에서는 `Command`키가 없으므로 작동하지 않습니다. 대신에 `CommandOrControl`을
|
||||
사용하면 OS X의 `Command`와 Linux, Windows의 `Control` 모두 지원할 수 있습니다.
|
||||
|
||||
`Super`키는 Windows와 Linux 에서는 `윈도우`키를, OS X에서는 `Cmd`키로 맵핑됩니다.
|
||||
|
||||
## 사용 가능한 혼합키
|
||||
|
||||
* `Command` (단축어 `Cmd`)
|
||||
* `Control` (단축어 `Ctrl`)
|
||||
* `CommandOrControl` (단축어 `CmdOrCtrl`)
|
||||
* `Alt`
|
||||
* `Shift`
|
||||
* `Super`
|
||||
|
||||
## 사용 가능한 전체 키코드
|
||||
|
||||
* `0` 부터 `9` 까지
|
||||
* `A` 부터 `Z` 까지
|
||||
* `F1` 부터 `F24` 까지
|
||||
* `~`, `!`, `@`, `#`, `$`, etc 와 같은 구두점 기호들
|
||||
* `Plus`
|
||||
* `Space`
|
||||
* `Backspace`
|
||||
* `Delete`
|
||||
* `Insert`
|
||||
* `Return` (또는 `Enter`)
|
||||
* `Up`, `Down`, `Left` 와 `Right`
|
||||
* `Home` 그리고 `End`
|
||||
* `PageUp` 그리고 `PageDown`
|
||||
* `Escape` (단축어 `Esc`)
|
||||
* `VolumeUp`, `VolumeDown` 그리고 `VolumeMute`
|
||||
* `MediaNextTrack`, `MediaPreviousTrack`, `MediaStop` 그리고 `MediaPlayPause`
|
||||
|
||||
__키코드는 `단축어`로도 사용할 수 있습니다__
|
||||
20
docs/api/menu-item-ko.md
Normal file
20
docs/api/menu-item-ko.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
# menu-item
|
||||
|
||||
## Class: MenuItem
|
||||
|
||||
### new MenuItem(options)
|
||||
|
||||
* `options` Object
|
||||
* `click` Function - 메뉴 아이템이 클릭될 때 호출되는 콜백함수
|
||||
* `selector` String - First Responder가 클릭될 때 호출 되는 선택자 (OS X 전용)
|
||||
* `type` String - `MenuItem`의 타입 `normal`, `separator`, `submenu`, `checkbox` 또는 `radio` 사용가능
|
||||
* `label` String
|
||||
* `sublabel` String
|
||||
* `accelerator` [Accelerator](accelerator.md)
|
||||
* `icon` [NativeImage](native-image.md)
|
||||
* `enabled` Boolean
|
||||
* `visible` Boolean
|
||||
* `checked` Boolean
|
||||
* `submenu` Menu - 보조메뉴를 설정합니다. `type`이 `submenu`일 경우 반드시 설정해야합니다. 일반 메뉴 아이템일 경우 생략할 수 있습니다.
|
||||
* `id` String - 현재 메뉴 아이템에 대해 유일키를 지정합니다. 이 키는 이후 `position` 옵션에서 사용할 수 있습니다.
|
||||
* `position` String - 미리 지정한 `id`를 이용하여 메뉴 아이템의 위치를 세밀하게 조정합니다.
|
||||
33
docs/api/power-monitor-ko.md
Normal file
33
docs/api/power-monitor-ko.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# power-monitor
|
||||
|
||||
`power-monitor` 모듈은 PC의 파워 상태를 나타냅니다. (주로 노트북 등에서 사용됩니다)
|
||||
이 모듈은 메인 프로세스에서만 사용할 수 있으며, (remote 모듈(RPC)을 사용해도 작동이 됩니다)
|
||||
메인 프로세스의 `app` 모듈에서 `ready` 이벤트를 호출하기 전까지 사용할 수 없습니다.
|
||||
|
||||
예제:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
|
||||
app.on('ready', function() {
|
||||
require('power-monitor').on('suspend', function() {
|
||||
console.log('절전모드로 진입합니다!');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Event: suspend
|
||||
|
||||
시스템이 절전모드로 진입할 때 호출됩니다.
|
||||
|
||||
## Event: resume
|
||||
|
||||
시스템의 절전모드가 해제될 때 호출됩니다.
|
||||
|
||||
## Event: on-ac
|
||||
|
||||
시스템이 AC 어뎁터 충전기를 사용하기 시작할 때 호출됩니다.
|
||||
|
||||
## Event: on-battery
|
||||
|
||||
시스템이 배터리를 사용하기 시작할 때 호출됩니다.
|
||||
139
docs/api/tray-ko.md
Normal file
139
docs/api/tray-ko.md
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
# Tray
|
||||
|
||||
`Tray`는 OS의 알림영역에 아이콘을 표시합니다. 보통 컨텍스트 메뉴(context menu)를 같이 사용합니다.
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var Menu = require('menu');
|
||||
var Tray = require('tray');
|
||||
|
||||
var appIcon = null;
|
||||
app.on('ready', function(){
|
||||
appIcon = new Tray('/path/to/my/icon'); // 현재 어플리케이션 디렉터리를 기준으로 하려면 `__dirname + '/images/tray.png'` 형식으로 입력해야합니다.
|
||||
var contextMenu = Menu.buildFromTemplate([
|
||||
{ label: 'Item1', type: 'radio' },
|
||||
{ label: 'Item2', type: 'radio' },
|
||||
{ label: 'Item3', type: 'radio', checked: true },
|
||||
{ label: 'Item4', type: 'radio' }
|
||||
]);
|
||||
appIcon.setToolTip('이것은 나의 어플리케이션 입니다!');
|
||||
appIcon.setContextMenu(contextMenu);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
__플랫폼별 한계:__
|
||||
|
||||
* OS X에서는 트레이 아이콘이 컨텍스트 메뉴를 가지고 있을 경우 `clicked` 이벤트는 무시됩니다.
|
||||
* Linux에서는 앱 알림 표시기(app indicator)가 지원되면 해당 기능을 사용합니다. 만약 지원하지 않으면 `GtkStatusIcon`을 대신 사용합니다.
|
||||
* 앱 알림 표시기는 컨텍스트 메뉴를 가지고 있을 때만 보입니다.
|
||||
* Linux에서 앱 알림 표시기가 사용될 경우, `clicked` 이벤트는 무시됩니다.
|
||||
|
||||
이러한 이유로 만약 Tray API가 모든 플랫폼에서 똑같이 작동하게 하고 싶다면, 설계시 `clicked` 이벤트에 의존하지 말아야합니다.
|
||||
그리고 언제나 컨텍스트 메뉴를 포함해서 사용해야 합니다.
|
||||
|
||||
## Class: Tray
|
||||
|
||||
`Tray`는 [EventEmitter][event-emitter]를 상속 받았습니다.
|
||||
|
||||
### new Tray(image)
|
||||
|
||||
* `image` [NativeImage](native-image-ko.md)
|
||||
|
||||
전달된 `image`를 이용하여 트레이 아이콘을 만듭니다.
|
||||
|
||||
### Event: 'clicked'
|
||||
|
||||
* `event`
|
||||
* `bounds` Object - 트레이 아이콘의 범위
|
||||
* `x` Integer
|
||||
* `y` Integer
|
||||
* `width` Integer
|
||||
* `height` Integer
|
||||
|
||||
트레이 아이콘이 클릭될 때 호출됩니다.
|
||||
|
||||
__주의:__ `bounds`는 OS X와 Window 7 이후 버전에서만 작동합니다.
|
||||
|
||||
### Event: 'double-clicked'
|
||||
|
||||
트레이 아이콘이 더블 클릭될 때 호출됩니다.
|
||||
|
||||
__주의:__ 이 기능은 OS X에서만 작동합니다.
|
||||
|
||||
### Event: 'balloon-show'
|
||||
|
||||
알림풍선이 보여질 때 호출됩니다.
|
||||
|
||||
__주의:__ 이 기능은 Windows에서만 작동합니다.
|
||||
|
||||
### Event: 'balloon-clicked'
|
||||
|
||||
알림풍선이 클릭될 때 호출됩니다.
|
||||
|
||||
__주의:__ 이 기능은 Windows에서만 작동합니다.
|
||||
|
||||
### Event: 'balloon-closed'
|
||||
|
||||
알림풍선이 시간이 지나 사라지거나 유저가 클릭하여 닫을 때 호출됩니다.
|
||||
|
||||
__주의:__ 이 기능은 Windows에서만 작동합니다.
|
||||
|
||||
### Tray.destroy()
|
||||
|
||||
트레이 아이콘을 즉시 삭제시킵니다.
|
||||
|
||||
### Tray.setImage(image)
|
||||
|
||||
* `image` [NativeImage](native-image-ko.md)
|
||||
|
||||
`image`를 사용하여 트레이 아이콘의 이미지를 설정합니다.
|
||||
|
||||
### Tray.setPressedImage(image)
|
||||
|
||||
* `image` [NativeImage](native-image-ko.md)
|
||||
|
||||
`image`를 사용하여 트레이 아이콘이 눌렸을 때의 이미지를 설정합니다.
|
||||
|
||||
__주의:__ 이 기능은 OS X에서만 작동합니다.
|
||||
|
||||
### Tray.setToolTip(toolTip)
|
||||
|
||||
* `toolTip` String
|
||||
|
||||
트레이 아이콘의 툴팁 텍스트를 설정합니다.
|
||||
|
||||
### Tray.setTitle(title)
|
||||
|
||||
* `title` String
|
||||
|
||||
상태바에서 트레이 아이콘 옆에 표시되는 제목 텍스트를 설정합니다.
|
||||
|
||||
__주의:__ 이 기능은 OS X에서만 작동합니다.
|
||||
|
||||
### Tray.setHighlightMode(highlight)
|
||||
|
||||
* `highlight` Boolean
|
||||
|
||||
트레이 아이콘을 클릭했을 때 하이라이트 될지 설정합니다.
|
||||
|
||||
__주의:__ 이 기능은 OS X에서만 작동합니다.
|
||||
|
||||
### Tray.displayBalloon(options)
|
||||
|
||||
* `options` Object
|
||||
* `icon` [NativeImage](native-image-ko.md)
|
||||
* `title` String
|
||||
* `content` String
|
||||
|
||||
트레이에 알림풍선을 생성합니다.
|
||||
|
||||
__알림:__ 이 기능은 Windows에서만 작동합니다.
|
||||
|
||||
### Tray.setContextMenu(menu)
|
||||
|
||||
* `menu` Menu
|
||||
|
||||
트레이에 컨텍스트 메뉴를 설정합니다.
|
||||
|
||||
[event-emitter]: http://nodejs.org/api/events.html#events_class_events_eventemitter
|
||||
479
docs/api/web-view-tag-ko.md
Normal file
479
docs/api/web-view-tag-ko.md
Normal file
|
|
@ -0,0 +1,479 @@
|
|||
# `<webview>` 태그
|
||||
|
||||
Use the `webview` tag to embed 'guest' content (such as web pages) in your
|
||||
Electron app. The guest content is contained within the `webview` container;
|
||||
an embedder page within your app controls how the guest content is laid out and
|
||||
rendered.
|
||||
|
||||
Different from the `iframe`, the `webview` runs in a separate process than your
|
||||
app; it doesn't have the same permissions as your web page and all interactions
|
||||
between your app and embedded content will be asynchronous. This keeps your app
|
||||
safe from the embedded content.
|
||||
|
||||
## 예제
|
||||
|
||||
To embed a web page in your app, add the `webview` tag to your app's embedder
|
||||
page (this is the app page that will display the guest content). In its simplest
|
||||
form, the `webview` tag includes the `src` of the web page and css styles that
|
||||
control the appearance of the `webview` container:
|
||||
|
||||
```html
|
||||
<webview id="foo" src="https://www.github.com/" style="display:inline-block; width:640px; height:480px"></webview>
|
||||
```
|
||||
|
||||
If you want to control the guest content in any way, you can write JavaScript
|
||||
that listens for `webview` events and responds to those events using the
|
||||
`webview` methods. Here's sample code with two event listeners: one that listens
|
||||
for the web page to start loading, the other for the web page to stop loading,
|
||||
and displays a "loading..." message during the load time:
|
||||
|
||||
```html
|
||||
<script>
|
||||
onload = function() {
|
||||
var webview = document.getElementById("foo");
|
||||
var indicator = document.querySelector(".indicator");
|
||||
|
||||
var loadstart = function() {
|
||||
indicator.innerText = "loading...";
|
||||
}
|
||||
var loadstop = function() {
|
||||
indicator.innerText = "";
|
||||
}
|
||||
webview.addEventListener("did-start-loading", loadstart);
|
||||
webview.addEventListener("did-stop-loading", loadstop);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 태그 속성
|
||||
|
||||
### src
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/"></webview>
|
||||
```
|
||||
|
||||
Returns the visible URL. Writing to this attribute initiates top-level
|
||||
navigation.
|
||||
|
||||
Assigning `src` its own value will reload the current page.
|
||||
|
||||
The `src` attribute can also accept data URLs, such as
|
||||
`data:text/plain,Hello, world!`.
|
||||
|
||||
### autosize
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" autosize="on" minwidth="576" minheight="432"></webview>
|
||||
```
|
||||
|
||||
If "on", the `webview` container will automatically resize within the
|
||||
bounds specified by the attributes `minwidth`, `minheight`, `maxwidth`, and
|
||||
`maxheight`. These contraints do not impact the `webview` UNLESS `autosize` is
|
||||
enabled. When `autosize` is enabled, the `webview` container size cannot be less
|
||||
than the minimum values or greater than the maximum.
|
||||
|
||||
### nodeintegration
|
||||
|
||||
```html
|
||||
<webview src="http://www.google.com/" nodeintegration></webview>
|
||||
```
|
||||
|
||||
If "on", the guest page in `webview` will have node integration and can use node
|
||||
APIs like `require` and `process` to access low level system resources.
|
||||
|
||||
### plugins
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" plugins></webview>
|
||||
```
|
||||
|
||||
If "on", the guest page in `webview` will be able to use browser plugins.
|
||||
|
||||
### preload
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" preload="./test.js"></webview>
|
||||
```
|
||||
|
||||
Specifies a script that will be loaded before other scripts run in the guest
|
||||
page. The protocol of script's URL must be either `file:` or `asar:`, because it
|
||||
will be loaded by `require` in guest page under the hood.
|
||||
|
||||
When the guest page doesn't have node integration this script will still have
|
||||
access to all Node APIs, but global objects injected by Node will be deleted
|
||||
after this script has done execution.
|
||||
|
||||
### httpreferrer
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" httpreferrer="http://cheng.guru"></webview>
|
||||
```
|
||||
|
||||
Sets the referrer URL for the guest page.
|
||||
|
||||
### useragent
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" useragent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"></webview>
|
||||
```
|
||||
|
||||
Sets the user agent for the guest page before the page is navigated to. Once the page is loaded, use the `setUserAgent` method to change the user agent.
|
||||
|
||||
### disablewebsecurity
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" disablewebsecurity></webview>
|
||||
```
|
||||
|
||||
If "on", the guest page will have web security disabled.
|
||||
|
||||
## API
|
||||
|
||||
The webview element must be loaded before using the methods.
|
||||
**Example**
|
||||
```javascript
|
||||
webview.addEventListener("dom-ready", function(){
|
||||
webview.openDevTools();
|
||||
});
|
||||
```
|
||||
|
||||
### `<webview>`.getUrl()
|
||||
|
||||
Returns URL of guest page.
|
||||
|
||||
### `<webview>`.getTitle()
|
||||
|
||||
Returns the title of guest page.
|
||||
|
||||
### `<webview>`.isLoading()
|
||||
|
||||
Returns whether guest page is still loading resources.
|
||||
|
||||
### `<webview>`.isWaitingForResponse()
|
||||
|
||||
Returns whether guest page is waiting for a first-response for the main resource
|
||||
of the page.
|
||||
|
||||
### `<webview>`.stop()
|
||||
|
||||
Stops any pending navigation.
|
||||
|
||||
### `<webview>`.reload()
|
||||
|
||||
Reloads guest page.
|
||||
|
||||
### `<webview>`.reloadIgnoringCache()
|
||||
|
||||
Reloads guest page and ignores cache.
|
||||
|
||||
### `<webview>`.canGoBack()
|
||||
|
||||
Returns whether guest page can go back.
|
||||
|
||||
### `<webview>`.canGoForward()
|
||||
|
||||
Returns whether guest page can go forward.
|
||||
|
||||
### `<webview>`.canGoToOffset(offset)
|
||||
|
||||
* `offset` Integer
|
||||
|
||||
Returns whether guest page can go to `offset`.
|
||||
|
||||
### `<webview>`.clearHistory()
|
||||
|
||||
Clears the navigation history.
|
||||
|
||||
### `<webview>`.goBack()
|
||||
|
||||
Makes guest page go back.
|
||||
|
||||
### `<webview>`.goForward()
|
||||
|
||||
Makes guest page go forward.
|
||||
|
||||
### `<webview>`.goToIndex(index)
|
||||
|
||||
* `index` Integer
|
||||
|
||||
Navigates to the specified absolute index.
|
||||
|
||||
### `<webview>`.goToOffset(offset)
|
||||
|
||||
* `offset` Integer
|
||||
|
||||
Navigates to the specified offset from the "current entry".
|
||||
|
||||
### `<webview>`.isCrashed()
|
||||
|
||||
Whether the renderer process has crashed.
|
||||
|
||||
### `<webview>`.setUserAgent(userAgent)
|
||||
|
||||
* `userAgent` String
|
||||
|
||||
Overrides the user agent for guest page.
|
||||
|
||||
### `<webview>`.insertCSS(css)
|
||||
|
||||
* `css` String
|
||||
|
||||
Injects CSS into guest page.
|
||||
|
||||
### `<webview>`.executeJavaScript(code)
|
||||
|
||||
* `code` String
|
||||
|
||||
Evaluates `code` in guest page.
|
||||
|
||||
### `<webview>`.openDevTools()
|
||||
|
||||
Opens a devtools window for guest page.
|
||||
|
||||
### `<webview>`.closeDevTools()
|
||||
|
||||
Closes the devtools window of guest page.
|
||||
|
||||
### `<webview>`.isDevToolsOpened()
|
||||
|
||||
Returns whether guest page has a devtools window attached.
|
||||
|
||||
### `<webview>`.inspectElement(x, y)
|
||||
|
||||
* `x` Integer
|
||||
* `y` Integer
|
||||
|
||||
Starts inspecting element at position (`x`, `y`) of guest page.
|
||||
|
||||
### `<webview>`.inspectServiceWorker()
|
||||
|
||||
Opens the devtools for the service worker context present in the guest page.
|
||||
|
||||
### `<webview>`.undo()
|
||||
|
||||
Executes editing command `undo` in page.
|
||||
|
||||
### `<webview>`.redo()
|
||||
|
||||
Executes editing command `redo` in page.
|
||||
|
||||
### `<webview>`.cut()
|
||||
|
||||
Executes editing command `cut` in page.
|
||||
|
||||
### `<webview>`.copy()
|
||||
|
||||
Executes editing command `copy` in page.
|
||||
|
||||
### `<webview>`.paste()
|
||||
|
||||
Executes editing command `paste` in page.
|
||||
|
||||
### `<webview>`.pasteAndMatchStyle()
|
||||
|
||||
Executes editing command `pasteAndMatchStyle` in page.
|
||||
|
||||
### `<webview>`.delete()
|
||||
|
||||
Executes editing command `delete` in page.
|
||||
|
||||
### `<webview>`.selectAll()
|
||||
|
||||
Executes editing command `selectAll` in page.
|
||||
|
||||
### `<webview>`.unselect()
|
||||
|
||||
Executes editing command `unselect` in page.
|
||||
|
||||
### `<webview>`.replace(text)
|
||||
|
||||
* `text` String
|
||||
|
||||
Executes editing command `replace` in page.
|
||||
|
||||
### `<webview>`.replaceMisspelling(text)
|
||||
|
||||
* `text` String
|
||||
|
||||
Executes editing command `replaceMisspelling` in page.
|
||||
|
||||
### `<webview>`.send(channel[, args...])
|
||||
|
||||
* `channel` String
|
||||
|
||||
Send `args..` to guest page via `channel` in asynchronous message, the guest
|
||||
page can handle it by listening to the `channel` event of `ipc` module.
|
||||
|
||||
See [WebContents.send](browser-window-ko.md#webcontentssendchannel-args) for
|
||||
examples.
|
||||
|
||||
## DOM 이벤트
|
||||
|
||||
### did-finish-load
|
||||
|
||||
Fired when the navigation is done, i.e. the spinner of the tab will stop
|
||||
spinning, and the `onload` event was dispatched.
|
||||
|
||||
### did-fail-load
|
||||
|
||||
* `errorCode` Integer
|
||||
* `errorDescription` String
|
||||
|
||||
This event is like `did-finish-load`, but fired when the load failed or was
|
||||
cancelled, e.g. `window.stop()` is invoked.
|
||||
|
||||
### did-frame-finish-load
|
||||
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
Fired when a frame has done navigation.
|
||||
|
||||
### did-start-loading
|
||||
|
||||
Corresponds to the points in time when the spinner of the tab starts spinning.
|
||||
|
||||
### did-stop-loading
|
||||
|
||||
Corresponds to the points in time when the spinner of the tab stops spinning.
|
||||
|
||||
### did-get-response-details
|
||||
|
||||
* `status` Boolean
|
||||
* `newUrl` String
|
||||
* `originalUrl` String
|
||||
* `httpResponseCode` Integer
|
||||
* `requestMethod` String
|
||||
* `referrer` String
|
||||
* `headers` Object
|
||||
|
||||
Fired when details regarding a requested resource is available.
|
||||
`status` indicates socket connection to download the resource.
|
||||
|
||||
### did-get-redirect-request
|
||||
|
||||
* `oldUrl` String
|
||||
* `newUrl` String
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
Fired when a redirect was received while requesting a resource.
|
||||
|
||||
### dom-ready
|
||||
|
||||
Fired when document in the given frame is loaded.
|
||||
|
||||
### page-title-set
|
||||
|
||||
* `title` String
|
||||
* `explicitSet` Boolean
|
||||
|
||||
Fired when page title is set during navigation. `explicitSet` is false when title is synthesised from file
|
||||
url.
|
||||
|
||||
### page-favicon-updated
|
||||
|
||||
* `favicons` Array - Array of Urls
|
||||
|
||||
Fired when page receives favicon urls.
|
||||
|
||||
### enter-html-full-screen
|
||||
|
||||
Fired when page enters fullscreen triggered by html api.
|
||||
|
||||
### leave-html-full-screen
|
||||
|
||||
Fired when page leaves fullscreen triggered by html api.
|
||||
|
||||
### console-message
|
||||
|
||||
* `level` Integer
|
||||
* `message` String
|
||||
* `line` Integer
|
||||
* `sourceId` String
|
||||
|
||||
Fired when the guest window logs a console message.
|
||||
|
||||
The following example code forwards all log messages to the embedder's console
|
||||
without regard for log level or other properties.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('console-message', function(e) {
|
||||
console.log('Guest page logged a message:', e.message);
|
||||
});
|
||||
```
|
||||
|
||||
### new-window
|
||||
|
||||
* `url` String
|
||||
* `frameName` String
|
||||
* `disposition` String - Can be `default`, `foreground-tab`, `background-tab`,
|
||||
`new-window` and `other`
|
||||
|
||||
Fired when the guest page attempts to open a new browser window.
|
||||
|
||||
The following example code opens the new url in system's default browser.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('new-window', function(e) {
|
||||
require('shell').openExternal(e.url);
|
||||
});
|
||||
```
|
||||
|
||||
### close
|
||||
|
||||
Fired when the guest page attempts to close itself.
|
||||
|
||||
The following example code navigates the `webview` to `about:blank` when the
|
||||
guest attempts to close itself.
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('close', function() {
|
||||
webview.src = 'about:blank';
|
||||
});
|
||||
```
|
||||
|
||||
### ipc-message
|
||||
|
||||
* `channel` String
|
||||
* `args` Array
|
||||
|
||||
Fired when the guest page has sent an asynchronous message to embedder page.
|
||||
|
||||
With `sendToHost` method and `ipc-message` event you can easily communicate
|
||||
between guest page and embedder page:
|
||||
|
||||
```javascript
|
||||
// In embedder page.
|
||||
webview.addEventListener('ipc-message', function(event) {
|
||||
console.log(event.channel);
|
||||
// Prints "pong"
|
||||
});
|
||||
webview.send('ping');
|
||||
```
|
||||
|
||||
```javascript
|
||||
// In guest page.
|
||||
var ipc = require('ipc');
|
||||
ipc.on('ping', function() {
|
||||
ipc.sendToHost('pong');
|
||||
});
|
||||
```
|
||||
|
||||
### crashed
|
||||
|
||||
Fired when the renderer process is crashed.
|
||||
|
||||
### gpu-crashed
|
||||
|
||||
Fired when the gpu process is crashed.
|
||||
|
||||
### plugin-crashed
|
||||
|
||||
* `name` String
|
||||
* `version` String
|
||||
|
||||
Fired when a plugin process is crashed.
|
||||
|
||||
### destroyed
|
||||
|
||||
Fired when the WebContents is destroyed.
|
||||
23
docs/development/coding-style-ko.md
Normal file
23
docs/development/coding-style-ko.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# 코딩 스타일
|
||||
|
||||
## C++과 Python
|
||||
|
||||
C++과 Python스크립트는 Chromium의 [코딩 스타일](http://www.chromium.org/developers/coding-style)을 따릅니다.
|
||||
파이선 스크립트 `script/cpplint.py`를 사용하여 모든 파일이 해당 코딩스타일에 맞게 코딩 되었는지 확인할 수 있습니다.
|
||||
|
||||
파이선의 버전은 2.7을 사용합니다.
|
||||
|
||||
## CoffeeScript
|
||||
|
||||
CoffeeScript의 경우 GitHub의 [스타일 가이드](https://github.com/styleguide/javascript)를 따릅니다, 동시에 다음 규칙도 따릅니다:
|
||||
|
||||
* Google의 코딩 스타일에도 맞추기 위해, 파일의 끝에는 **절대** 개행을 삽입해선 안됩니다.
|
||||
* 파일 이름의 공백은 `_`대신에 `-`을 사용하여야 합니다. 예를 들어 `file_name.coffee`를
|
||||
`file-name.coffee`로 고쳐야합니다, 왜냐하면 [github/atom](https://github.com/github/atom) 에서 사용되는 모듈의 이름은
|
||||
보통 `module-name`형식이기 때문입니다, 이 규칙은 '.coffee' 파일에만 적용됩니다.
|
||||
|
||||
## API 이름
|
||||
|
||||
새로운 API를 만들 땐, getter, setter스타일 대신 jQuery의 one-function스타일을 사용해야 합니다. 예를 들어,
|
||||
`.getText()`와 `.setText(text)`대신에 `.text([text])`형식으로 설계하면 됩니다.
|
||||
포럼에 이 문제에 대한 [논의](https://github.com/atom/electron/issues/46)가 있습니다.
|
||||
138
docs/tutorial/application-distribution-ko.md
Normal file
138
docs/tutorial/application-distribution-ko.md
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
# 어플리케이션 배포
|
||||
|
||||
Electron 어플리케이션을 배포할 때는 어플리케이션 폴더의 이름을 `app`으로 지정한 후 Electron 실행파일의 리소스 디렉터리에 집어넣어야합니다.
|
||||
리소스 디렉터리는 OS X에선 `Electron.app/Contents/Resources/` Windows와 Linux에선 `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`을 실행하면 (Linux에선 `electron` Windows에선 `electron.exe`입니다), Electron은 해당 앱을 실행시킵니다.
|
||||
최종 사용자에게는 이 `electron` 폴더(Electron.app)를 배포하면 됩니다.
|
||||
|
||||
## asar로 앱 패키징 하기
|
||||
|
||||
소스파일 전체를 복사해서 배포하는 것과는 별개로, [asar](https://github.com/atom/asar) 아카이브를 통해
|
||||
어플리케이션의 소스코드가 사용자에게 노출되는 것을 방지할 수 있습니다.
|
||||
|
||||
`asar` 아카이브를 사용할 땐 단순히 `app` 폴더 대신에 어플리케이션을 패키징한 `app.asar` 파일로 대체하면됩니다.
|
||||
이렇게 하면 Electron은 아카이브를 `app`폴더 대신 asar 아카이브를 기반으로 어플리케이션을 실행합니다.
|
||||
|
||||
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) 또는 [ResEdit](http://www.resedit.net)를 사용하여 아이콘을 변경할 수 있습니다.
|
||||
|
||||
### OS X
|
||||
|
||||
`Electron.app`을 원하는 이름으로 변경할 수 있습니다. 그리고 다음 표시된 어플리케이션 내부 파일에서
|
||||
`CFBundleDisplayName`, `CFBundleIdentifier` and `CFBundleName` 필드를 원하는 이름으로 변경해야합니다:
|
||||
|
||||
* `Electron.app/Contents/Info.plist`
|
||||
* `Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist`
|
||||
|
||||
또한 helper 앱이 프로세스 모니터에 `Electron Helper`로 나오지 않도록 이름을 변경할 수 있습니다.
|
||||
하지만 반드시 내부 및 모든 helper 앱의 이름을 변경해야 합니다.
|
||||
|
||||
어플리케이션 아이콘은 `Electron.app/Contents/Resources/atom.icns`을 원하는 아이콘으로 변경하면 됩니다.
|
||||
|
||||
원하는 이름으로 바꾼 어플리케이션 예제:
|
||||
|
||||
```
|
||||
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`의 이름을 원하는 대로 바꿀 수 있습니다.
|
||||
리눅스 어플리케이션의 아이콘은 [.desktop file](https://developer.gnome.org/integration-guide/stable/desktop-files.html.en)을 사용하여 지정할 수 있습니다.
|
||||
|
||||
### 역자주-자동화
|
||||
|
||||
일일이 Electron의 리소스를 수정하는 것은 상당히 귀찮고 복잡합니다.
|
||||
하지만 이 작업을 자동화 시킬 수 있는 몇가지 방법이 있습니다:
|
||||
|
||||
* [electron-builder](https://github.com/loopline-systems/electron-builder)
|
||||
* [electron-packager](https://github.com/maxogden/electron-packager)
|
||||
|
||||
## Electron 소스코드를 다시 빌드하여 리소스 수정하기
|
||||
|
||||
또한 Electron 소스코드를 다시 빌드할 때 어플리케이션 이름을 변경할 수 있습니다.
|
||||
`GYP_DEFINES` 환경변수를 사용하여 다음과 같이 다시 빌드할 수 있습니다:
|
||||
|
||||
__Windows__
|
||||
|
||||
```bash
|
||||
> set "GYP_DEFINES=project_name=myapp product_name=MyApp"
|
||||
> python script\clean.py
|
||||
> python script\bootstrap.py
|
||||
> python script\build.py -c R -t myapp
|
||||
```
|
||||
|
||||
__Bash__
|
||||
|
||||
```bash
|
||||
$ export GYP_DEFINES="project_name=myapp product_name=MyApp"
|
||||
$ script/clean.py
|
||||
$ script/bootstrap.py
|
||||
$ script/build.py -c Release -t myapp
|
||||
```
|
||||
|
||||
### grunt-build-atom-shell
|
||||
|
||||
Electron의 소스코드를 수정하고 다시 빌드하는 작업은 상당히 복잡합니다.
|
||||
이를 해결하기 위해 [grunt-build-atom-shell](https://github.com/paulcbetts/grunt-build-atom-shell)를 사용하여 빌드를 자동화 시킬 수 있습니다.
|
||||
|
||||
이 툴을 사용하면 자동적으로 `.gyp`파일을 수정하고 다시 빌드합니다. 그리고 어플리케이션의 네이티브 Node 모듈 또한 새로운 실행파일 이름으로 매치 시킵니다.
|
||||
153
docs/tutorial/application-packaging-ko.md
Normal file
153
docs/tutorial/application-packaging-ko.md
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
# 어플리케이션 패키징
|
||||
|
||||
어플리케이션의 리소스와 소스코드를 유저로부터 보호하기 위해, 약간의 구조 변경으로 어플리케이션을 [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를 가지고 있습니다: Node.js로 부터 제공된 Node API, Chromium으로부터 제공된 Web API.
|
||||
두 API 모두 `asar`에서 읽어들일 수 있도록 지원합니다.
|
||||
|
||||
### Node API
|
||||
|
||||
`fs.readFile` 와 `require` 같은 Node API들을 지원하기 위해 Electron에선 `asar` 아카이브가 가상의 디렉터리 구조를 가지도록
|
||||
패치했습니다. 그래서 아카이브 내부에서 리소스들을 정상적인 파일 시스템처럼 접근할 수 있습니다.
|
||||
|
||||
예를들어, `/path/to`라는 경로에 `example.asar`라는 아카이브가 있다고 가정하면:
|
||||
|
||||
```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
|
||||
var fs = require('fs');
|
||||
fs.readFileSync('/path/to/example.asar/file.txt');
|
||||
```
|
||||
|
||||
아카이브 내의 루트 디렉터리를 리스팅합니다:
|
||||
|
||||
```javascript
|
||||
var fs = require('fs');
|
||||
fs.readdirSync('/path/to/example.asar');
|
||||
```
|
||||
|
||||
아카이브 안의 모듈 사용하기:
|
||||
|
||||
```javascript
|
||||
require('/path/to/example.asar/dir/module.js');
|
||||
```
|
||||
|
||||
`BrowserWindow` 클래스를 이용해 원하는 웹 페이지도 표시할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var BrowserWindow = require('browser-window');
|
||||
var win = new BrowserWindow({width: 800, height: 600});
|
||||
win.loadUrl('file:///path/to/example.asar/static/index.html');
|
||||
```
|
||||
|
||||
### Web API
|
||||
|
||||
웹 페이지 내에선, 아카이브 내의 파일을 `file:` 프로토콜을 사용하여 요청할 수 있습니다.
|
||||
이 또한 Node API와 같이 가상 디렉터리 구조를 가집니다.
|
||||
|
||||
예를들어, jQuery의 `$.get`을 사용하여 파일을 가져올 수 있습니다:
|
||||
|
||||
```html
|
||||
<script>
|
||||
var $ = require('./jquery.min.js');
|
||||
$.get('file:///path/to/example.asar/file.txt', function(data) {
|
||||
console.log(data);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### `asar` 아카이브를 일반 파일로 취급하기
|
||||
|
||||
`asar` 아카이브의 체크섬(checksum)등을 검사하기 위해선, `asar` 아카이브를 파일 그대로 읽어들여야 할 필요가 있습니다.
|
||||
이 작업을 하기 위해 `original-fs`라고 하는 빌트인 모듈을 `fs` 모듈 대신에 사용할 수 있습니다.
|
||||
이 모듈은 `asar` 지원이 빠져있습니다. 즉 파일 그대로를 읽어들입니다:
|
||||
|
||||
```javascript
|
||||
var originalFs = require('original-fs');
|
||||
originalFs.readFileSync('/path/to/example.asar');
|
||||
```
|
||||
|
||||
## Node API의 한계
|
||||
|
||||
`asar` 아카이브를 Node API가 최대한 디렉터리 구조로 작동하도록 노력해왔지만, 여전히 저수준(low-level) Node API 때문에 한계가 있습니다.
|
||||
|
||||
Even though we tried hard to make `asar` archives in the Node API work like
|
||||
directories as much as possible, there are still limitations due to the
|
||||
low-level nature of the Node API.
|
||||
|
||||
### 아카이브는 읽기 전용입니다
|
||||
|
||||
아카이브는 수정할 수 없으며 기본적으로는 Node API로 파일을 수정할 수 있지만, `asar` 아카이브에선 작동하지 않습니다.
|
||||
|
||||
### 아카이브 안의 디렉터리를 작업 경로로 설정하면 안됩니다
|
||||
|
||||
`asar` 아카이브는 디렉터리처럼 사용할 수 있도록 구현되었지만, 그것은 실제 파일시스템의 디렉터리가 아닌 가상의 디렉터리입니다.
|
||||
그런 이유로 몇몇 API에서 지원하는 `cwd` 옵션을 `asar` 아카이브 안의 디렉터리 경로로 지정하면 나중에 문제가 발생할 수 있습니다.
|
||||
|
||||
### 특정 API로 인한 예외적인 압축 해제
|
||||
|
||||
많은 `fs` API가 `asar` 아카이브의 압축을 해제하지 않고 바로 아카이브를 읽거나 정보를 가져올 수 있으나,
|
||||
몇몇 API는 시스템의 실제 파일의 경로를 기반으로 작동하므로 이 API들을 사용할 땐 Electron은
|
||||
이 API가 원할하게 작동할 수 있도록 하기 위해 임시경로에 해당 파일들의 압축을 해제합니다. 이 작업은 약간의 오버헤드를 불러 일으킬 수 있습니다.
|
||||
|
||||
해당하는 API 함수는 다음과 같습니다:
|
||||
|
||||
* `child_process.execFile`
|
||||
* `fs.open`
|
||||
* `fs.openSync`
|
||||
* `process.dlopen` - Used by `require` on native modules
|
||||
|
||||
### `fs.stat`의 잘못된 스테이터스
|
||||
|
||||
`fs.stat` 로 부터 반환되는 `Stats` 객체와 비슷한 API들은 `asar` 아카이브를 타겟으로 할 경우 가상의 예측된 정보를 가집니다.
|
||||
왜냐하면 아카이브의 디렉터리 경로는 실제 파일시스템에 존재하지 않기 때문입니다.
|
||||
그러한 이유로 파일 크기와 파일 타입 등을 확인할 때 `Stats` 객체를 신뢰해선 안됩니다.
|
||||
|
||||
## Adding unpacked files in `asar` archive
|
||||
|
||||
전술한 바와 같이, 몇몇 Node API는 호출 시 해당 파일을 임시폴더에 압축을 해제합니다.
|
||||
따로 성능문제가 발생할 수 있습니다. 그리고 백신 소프트웨어의 잘못된 오진을 일으킬 수도 있습니다.
|
||||
|
||||
이 문제를 해결하려면, `--unpack` 옵션을 활용하여 파일을 압축이 풀려진 상태로 유지해야 합니다.
|
||||
다음의 예제는 node 네이티브 모듈의 공유 라이브러리를 unpack 상태로 유지합니다:
|
||||
|
||||
```bash
|
||||
$ asar pack app app.asar --unpack *.node
|
||||
```
|
||||
|
||||
커맨드를 실행한 후, 같은 디렉터리에 `app.asar` 파일 외에 `app.asar.unpacked` 폴더가 같이 생성됩니다.
|
||||
이 폴더안에 unpack 옵션에서 설정한 파일들이 압축이 풀린 상태로 포함되어 있습니다.
|
||||
유저에게 어플리케이션을 배포할 때 반드시 해당 폴더도 같이 배포하여야합니다.
|
||||
|
||||
[asar]: https://github.com/atom/asar
|
||||
45
docs/tutorial/debugging-main-process-ko.md
Normal file
45
docs/tutorial/debugging-main-process-ko.md
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
# 메인 프로세스 디버깅하기
|
||||
|
||||
브라우저 창의 개발자 콘솔은 랜더러 프로세스의 스크립트만 디버깅이 가능합니다. (다시말해 웹 페이지)
|
||||
메인 프로세스의 디버깅 방법을 제공하기 위해, Electron은 `--debug` 과 `--debug-brk` 스위치들을 제공합니다.
|
||||
|
||||
## 커맨드 라인 스위치(command line switches)
|
||||
|
||||
### `--debug=[port]`
|
||||
|
||||
이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다. `port`는 `5858`이 기본적으로 사용됩니다.
|
||||
|
||||
### `--debug-brk=[port]`
|
||||
|
||||
`--debug`와 비슷하지만 스크립트의 첫번째 라인에서 일시정지합니다.
|
||||
|
||||
## node-inspector로 디버깅 하기
|
||||
|
||||
__주의:__ Electron은 node v0.11.13 버전을 사용합니다, node-inspector는 현재 아주 잘 작동하지 않습니다.
|
||||
그리고 메인 프로세스의 `process`를 node-inspector 콘솔 내에서 검사할 경우 크래시가 발생할 수 있습니다.
|
||||
|
||||
### 1. [node-inspector][node-inspector] 서버 시작
|
||||
|
||||
```bash
|
||||
$ node-inspector
|
||||
```
|
||||
|
||||
### 2. Electron용 디버그 모드 활성화
|
||||
|
||||
다음과 같이 debung 플래그로 Electron을 실행할 수도 있습니다:
|
||||
|
||||
```bash
|
||||
$ electron --debug=5858 your/app
|
||||
```
|
||||
|
||||
또는 스크립트 첫번째 라인에서 일시정지:
|
||||
|
||||
```bash
|
||||
$ electron --debug-brk=5858 your/app
|
||||
```
|
||||
|
||||
### 3. 디버그 UI 로드
|
||||
|
||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 주소에 접속합니다. (기본포트 또는 지정한 포트로 접속)
|
||||
|
||||
[node-inspector]: https://github.com/node-inspector/node-inspector
|
||||
201
docs/tutorial/desktop-environment-integration-ko.md
Normal file
201
docs/tutorial/desktop-environment-integration-ko.md
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
# 데스크톱 환경 통합
|
||||
|
||||
Different operating systems provide different features on integrating desktop
|
||||
applications into their desktop environments. For example, on Windows
|
||||
applications can put shortcuts in the JumpList of task bar, and on Mac
|
||||
applications can put a custom menu in the dock menu.
|
||||
|
||||
This guide explains how to integrate your application into those desktop
|
||||
environments with Electron APIs.
|
||||
|
||||
## 최근 사용한 문서 (Windows & OS X)
|
||||
|
||||
Windows and OS X provide easy access to a list of recent documents opened by
|
||||
the application via JumpList and dock menu.
|
||||
|
||||
__JumpList:__
|
||||
|
||||
|
||||
|
||||
__Application dock menu:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png" height="353" width="428" >
|
||||
|
||||
To add a file to recent documents, you can use
|
||||
[app.addRecentDocument][addrecentdocument] API:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
app.addRecentDocument('/Users/USERNAME/Desktop/work.type');
|
||||
```
|
||||
|
||||
And you can use [app.clearRecentDocuments](clearrecentdocuments) API to empty
|
||||
the recent documents list:
|
||||
|
||||
```javascript
|
||||
app.clearRecentDocuments();
|
||||
```
|
||||
|
||||
### Windows에서 주의할 점
|
||||
|
||||
In order to be able to use this feature on Windows, your application has to be
|
||||
registered as a handler of the file type of the document, otherwise the file
|
||||
won't appear in JumpList even after you have added it. You can find everything
|
||||
on registering your application in [Application Registration][app-registration].
|
||||
|
||||
When a user clicks a file from JumpList, a new instance of your application will
|
||||
be started with the path of the file added as a command line argument.
|
||||
|
||||
### OS X에서 주의할 점
|
||||
|
||||
When a file is requested from the recent documents menu, the `open-file` event
|
||||
of `app` module would be emitted for it.
|
||||
|
||||
## 커스텀 독 메뉴 (OS X)
|
||||
|
||||
OS X enables developers to specify a custom menu for the dock, which usually
|
||||
contains some shortcuts for commonly used features of your application:
|
||||
|
||||
__Dock menu of Terminal.app:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png" height="354" width="341" >
|
||||
|
||||
To set your custom dock menu, you can use the `app.dock.setMenu` API, which is
|
||||
only available on OS X:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var Menu = require('menu');
|
||||
var dockMenu = Menu.buildFromTemplate([
|
||||
{ label: 'New Window', click: function() { console.log('New Window'); } },
|
||||
{ label: 'New Window with Settings', submenu: [
|
||||
{ label: 'Basic' },
|
||||
{ label: 'Pro'}
|
||||
]},
|
||||
{ label: 'New Command...'}
|
||||
]);
|
||||
app.dock.setMenu(dockMenu);
|
||||
```
|
||||
|
||||
## 사용자 작업 (Windows)
|
||||
|
||||
On Windows you can specify custom actions in the `Tasks` category of JumpList,
|
||||
as quoted from MSDN:
|
||||
|
||||
> Applications define tasks based on both the program's features and the key
|
||||
> things a user is expected to do with them. Tasks should be context-free, in
|
||||
> that the application does not need to be running for them to work. They
|
||||
> should also be the statistically most common actions that a normal user would
|
||||
> perform in an application, such as compose an email message or open the
|
||||
> calendar in a mail program, create a new document in a word processor, launch
|
||||
> an application in a certain mode, or launch one of its subcommands. An
|
||||
> application should not clutter the menu with advanced features that standard
|
||||
> users won't need or one-time actions such as registration. Do not use tasks
|
||||
> for promotional items such as upgrades or special offers.
|
||||
>
|
||||
> It is strongly recommended that the task list be static. It should remain the
|
||||
> same regardless of the state or status of the application. While it is
|
||||
> possible to vary the list dynamically, you should consider that this could
|
||||
> confuse the user who does not expect that portion of the destination list to
|
||||
> change.
|
||||
|
||||
__Tasks of Internet Explorer:__
|
||||
|
||||
|
||||
|
||||
Unlike the dock menu in OS X which is a real menu, user tasks in Windows work
|
||||
like application shortcuts that when user clicks a task, a program would be
|
||||
executed with specified arguments.
|
||||
|
||||
To set user tasks for your application, you can use
|
||||
[app.setUserTasks][setusertaskstasks] API:
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
app.setUserTasks([
|
||||
{
|
||||
program: process.execPath,
|
||||
arguments: '--new-window',
|
||||
iconPath: process.execPath,
|
||||
iconIndex: 0,
|
||||
title: 'New Window',
|
||||
description: 'Create a new window'
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
||||
To clean your tasks list, just call `app.setUserTasks` with empty array:
|
||||
|
||||
```javascript
|
||||
app.setUserTasks([]);
|
||||
```
|
||||
|
||||
The user tasks will still show even after your application closes, so the icon
|
||||
and program path specified for a task should exist until your application is
|
||||
uninstalled.
|
||||
|
||||
## Unity 런처 숏컷 기능 (Linux)
|
||||
|
||||
In Unity, you can add custom entries to its launcher via modifying `.desktop`
|
||||
file, see [Adding shortcuts to a launcher][unity-launcher].
|
||||
|
||||
__Launcher shortcuts of Audacious:__
|
||||
|
||||
|
||||
|
||||
## Taskbar progress 기능 (Windows & Unity)
|
||||
|
||||
On Windows, a taskbar button can be used to display a progress bar. This enables
|
||||
a window to provide progress information to the user without the user having to
|
||||
switch to the window itself.
|
||||
|
||||
The Unity DE also has a similar feature that allows you to specify the progress
|
||||
bar in the launcher.
|
||||
|
||||
__Progress bar in taskbar button:__
|
||||
|
||||
|
||||
|
||||
__Progress bar in Unity launcher:__
|
||||
|
||||
|
||||
|
||||
To set the progress bar for a Window, you can use the
|
||||
[BrowserWindow.setProgressBar][setprogressbar] API:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setProgressBar(0.5);
|
||||
```
|
||||
|
||||
## 윈도우 파일 제시 (OS X)
|
||||
|
||||
On OS X a window can set its represented file, so the file's icon can show in
|
||||
the title bar, and when users Command-Click or Control-Click on the tile a path
|
||||
popup will show.
|
||||
|
||||
You can also set the edited state of a window so that the file icon can indicate
|
||||
whether the document in this window has been modified.
|
||||
|
||||
__Represented file popup menu:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png" height="232" width="663" >
|
||||
|
||||
To set the represented file of window, you can use the
|
||||
[BrowserWindow.setRepresentedFilename][setrepresentedfilename] and
|
||||
[BrowserWindow.setDocumentEdited][setdocumentedited] APIs:
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow({...});
|
||||
window.setRepresentedFilename('/etc/passwd');
|
||||
window.setDocumentEdited(true);
|
||||
```
|
||||
|
||||
[addrecentdocument]: ../api/app-ko.md#appaddrecentdocumentpath
|
||||
[clearrecentdocuments]: ../api/app-ko.md#appclearrecentdocuments
|
||||
[setusertaskstasks]: ../api/app-ko.md#appsetusertaskstasks
|
||||
[setprogressbar]: ../api/browser-window-ko.md#browserwindowsetprogressbarprogress
|
||||
[setrepresentedfilename]: ../api/browser-window-ko.md#browserwindowsetrepresentedfilenamefilename
|
||||
[setdocumentedited]: ../api/browser-window-ko.md#browserwindowsetdocumenteditededited
|
||||
[app-registration]: http://msdn.microsoft.com/en-us/library/windows/desktop/ee872121(v=vs.85).aspx
|
||||
[unity-launcher]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles#Adding_shortcuts_to_a_launcher
|
||||
46
docs/tutorial/devtools-extension-ko.md
Normal file
46
docs/tutorial/devtools-extension-ko.md
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
# 개발자 콘솔 확장
|
||||
|
||||
어플리케이션의 디버깅을 쉽게 하기 위해, Electron은 기본적으로 [Chrome DevTools Extension][devtools-extension]을 지원합니다.
|
||||
|
||||
개발자 콘솔 확장기능은 간단하게 사용할 확장기능 플러그인의 소스코드를 다운로드한 후 `BrowserWindow.addDevToolsExtension` API를 이용하여
|
||||
어플리케이션 내에 로드할 수 있습니다. 한가지 주의할 점은 확장기능 사용시 창이 생성될 때 마다 일일이 해당 API를 호출할 필요는 없습니다.
|
||||
|
||||
예시로 [React DevTools Extension](https://github.com/facebook/react-devtools)을 사용하자면, 먼저 소스코드를 다운로드 받아야합니다:
|
||||
|
||||
```bash
|
||||
$ cd /some-directory
|
||||
$ git clone --recursive https://github.com/facebook/react-devtools.git
|
||||
```
|
||||
|
||||
그리고 개발자 콘솔이 열린 창에서 다음의 코드를 콘솔에 입력하면 확장기능을 로드할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
require('remote').require('browser-window').addDevToolsExtension('/some-directory/react-devtools');
|
||||
```
|
||||
|
||||
확장기능을 unload 하려면, `BrowserWindow.removeDevToolsExtension` API를 사용하여 다음에 콘솔을 다시 열 때 해당 확장기능이 로드되지 않도록 할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
require('remote').require('browser-window').removeDevToolsExtension('React Developer Tools');
|
||||
```
|
||||
|
||||
## 개발자 콘솔 확장기능의 구성 형식
|
||||
|
||||
완벽하게 모든 개발자 콘솔 확장은 Chrome 브라우저를 위해 작성되었기 때문에 Electron에서도 로드할 수 있습니다.
|
||||
하지만 반드시 확장기능은 소스코드 그대로의 디렉터리(폴더) 형태여야 합니다. 그래서 `crx` 등의 포맷으로 패키징된 확장기능의 경우
|
||||
사용자가 직접 해당 패키지의 압축을 풀어서 로드하지 않는 이상은 Electron에서 해당 확장기능의 압축을 풀 방법이 없습니다.
|
||||
|
||||
## 백그라운드 페이지
|
||||
|
||||
현재 Electron은 Chrome에서 지원하는 백그라운드 페이지(background pages)를 지원하지 않습니다.
|
||||
몇몇 확장기능은 이 기능에 의존하는 경우가 있는데, 이 경우 해당 확장기능은 Electron에서 작동하지 않을 수 있습니다.
|
||||
|
||||
## `chrome.*` API
|
||||
|
||||
몇몇 Chrome 확장기능은 특정 기능을 사용하기 위해 `chrome.*` API를 사용하는데, Electron에선 이 API들을 구현하기 위해 노력했지만,
|
||||
안타깝게도 아직 모든 API가 구현되지는 않았습니다.
|
||||
|
||||
아직 모든 API가 구현되지 않았기 때문에 확장기능에서 `chrome.devtools.*` 대신 `chrome.*` API를 사용할 경우 확장기능이 제대로 작동하지 않을 수 있음을 감안해야 합니다.
|
||||
만약 문제가 발생할 경우 Electron의 GitHub repo에 이슈를 올리면 해당 API를 추가하는데 많은 도움이 됩니다.
|
||||
|
||||
[devtools-extension]: https://developer.chrome.com/extensions/devtools
|
||||
80
docs/tutorial/online-offline-events-ko.md
Normal file
80
docs/tutorial/online-offline-events-ko.md
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
# 온라인/오프라인 이벤트
|
||||
|
||||
온라인/오프라인 이벤트는 다음 예제와 같이 랜더러 프로세스에서 표준 HTML5 API를 이용하여 구현할 수 있습니다.
|
||||
|
||||
_main.js_
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var BrowserWindow = require('browser-window');
|
||||
var onlineStatusWindow;
|
||||
|
||||
app.on('ready', function() {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
|
||||
onlineStatusWindow.loadUrl('file://' + __dirname + '/online-status.html');
|
||||
});
|
||||
```
|
||||
|
||||
_online-status.html_
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
var alertOnlineStatus = function() {
|
||||
window.alert(navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
window.addEventListener('online', alertOnlineStatus);
|
||||
window.addEventListener('offline', alertOnlineStatus);
|
||||
|
||||
alertOnlineStatus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
필요하다면, 이러한 이벤트를 메인 프로세스로 보낼 수도 있습니다.
|
||||
메인 프로세스는 `navigator` 오브젝트를 가지고 있지 않기 때문에 이 이벤트를 직접 사용할 수 없습니다.
|
||||
이는 다음 예제와 같이 electron의 inter-process communication(ipc)유틸리티를 사용하여
|
||||
이벤트를 메인 프로세스로 전달하는 것으로 해결할 수 있습니다.
|
||||
|
||||
_main.js_
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var ipc = require('ipc');
|
||||
var BrowserWindow = require('browser-window');
|
||||
var onlineStatusWindow;
|
||||
|
||||
app.on('ready', function() {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
|
||||
onlineStatusWindow.loadUrl('file://' + __dirname + '/online-status.html');
|
||||
});
|
||||
|
||||
ipc.on('online-status-changed', function(event, status) {
|
||||
console.log(status);
|
||||
});
|
||||
```
|
||||
|
||||
_online-status.html_
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
var ipc = require('ipc');
|
||||
var updateOnlineStatus = function() {
|
||||
ipc.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
|
||||
window.addEventListener('online', updateOnlineStatus);
|
||||
window.addEventListener('offline', updateOnlineStatus);
|
||||
|
||||
updateOnlineStatus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
145
docs/tutorial/quick-start-ko.md
Normal file
145
docs/tutorial/quick-start-ko.md
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
# 시작하기
|
||||
|
||||
## 소개
|
||||
|
||||
Electron은 자바스크립트와 함께 제공되는 풍부한 네이티브 API를 이용하여 데스크톱 어플리케이션을 만들 수 있도록 해주는 프레임워크입니다.
|
||||
이 프레임워크의 io.js(node.js)는 웹 서버 개발이 아닌 데스크톱 어플리케이션 개발에 초점을 맞췄습니다.
|
||||
|
||||
이것은 Electron이 GUI 라이브러리의 자바스크립트 바인딩이라는 뜻이 아닙니다.
|
||||
대신에, Electron은 웹 페이지의 GUI를 사용합니다. 쉽게 말해 Electron은 자바스크립트를 사용하여 조작하는 작은 Chromium
|
||||
브라우저로 볼 수 있습니다.
|
||||
|
||||
### 메인 프로세스
|
||||
|
||||
Electron은 실행될 때 __메인 프로세스__ 로 불리는 `package.json`의 `main` 스크립트를 호출합니다.
|
||||
이 스크립트는 메인 프로세스에서 작동합니다, GUI 컴포넌트를 컨트롤하거나 웹 페이지 창을 생성할 수 있습니다.
|
||||
|
||||
### 랜더러 프로세스
|
||||
|
||||
Electron이 웹페이지를 보여줄 때, Chromium의 multi-processes 구조도 같이 사용됩니다.
|
||||
Electron 프로세스 내에서 작동하는 웹 페이지는 __랜더러 프로세스__ 라고 불립니다.
|
||||
|
||||
보통, 일반 브라우저의 웹 페이지들은 샌드박스가 적용된 환경에서 작동하며 네이티브 리소스에는 접근할 수 없도록 되어 있습니다.
|
||||
하지만 Electron은 웹 페이지 내에서 io.js(node.js) API를 사용하여 low-level 수준으로 운영체제와 상호작용할 수 있습니다.
|
||||
|
||||
### 메인 프로세스와 랜더러 프로세스의 차이점
|
||||
|
||||
메인 프로세스는 `BrowserWindow` Class를 이용하여 창을 만들 수 있습니다. `BrowserWindow` 인스턴스는
|
||||
따로 분리된 프로세스에서 랜더링 되며, `BrowserWindow` 인스턴스가 소멸할 때, 해당하는 랜더러 프로세스도 같이 소멸합니다.
|
||||
|
||||
메인 프로세스는 모든 웹 페이지와 그에 해당하는 랜더러 프로세스를 관리하며,
|
||||
랜더러 프로세스는 각각의 프로세스에 고립되며 웹 페이지의 작동에만 영향을 끼칩니다.
|
||||
|
||||
웹 페이지 내에서 네이티브 GUI 리소스를 관리하는 것은 매우 위험하고,
|
||||
리소스를 누수시킬 수 있기 때문에 웹 페이지 내에서는 네이티브 GUI와 관련된 API를 호출할 수 없도록 되어 있습니다.
|
||||
만약 웹 페이지 내에서 GUI작업이 필요하다면, 메인 프로세스에서 그 작업을 할 수 있도록 통신을 해야합니다.
|
||||
|
||||
Electron에는 메인 프로세스와 랜더러 프로세스간에 통신을 할 수 있도록 [ipc](../api/ipc-renderer-ko.md) 모듈을 제공하고 있습니다.
|
||||
또한 [remote](../api/remote-ko.md) 모듈을 사용하여 RPC 스타일로 통신할 수도 있습니다.
|
||||
|
||||
## 나의 첫번째 Electron 앱 만들기
|
||||
|
||||
보통, Electron 앱은 다음과 같은 폴더 구조를 가집니다:
|
||||
|
||||
```text
|
||||
your-app/
|
||||
├── package.json
|
||||
├── main.js
|
||||
└── index.html
|
||||
```
|
||||
|
||||
`package.json`은 node 모듈의 package.json과 같습니다, 그리고 `main` 필드를 지정하여
|
||||
메인 프로세스로 사용할 어플리케이션 시작점을 정의할 수 있습니다.
|
||||
예를 들어 사용할 수 있는 `package.json`은 다음과 같습니다:
|
||||
|
||||
```json
|
||||
{
|
||||
"name" : "your-app",
|
||||
"version" : "0.1.0",
|
||||
"main" : "main.js"
|
||||
}
|
||||
```
|
||||
|
||||
`main.js`에서 창을 만들거나 시스템 이벤트를 처리할 수 있습니다, 대표적인 예제로 다음과 같이 작성할 수 있습니다:
|
||||
|
||||
```javascript
|
||||
var app = require('app'); // 어플리케이션 기반을 조작 하는 모듈.
|
||||
var BrowserWindow = require('browser-window'); // 네이티브 브라우저 창을 만드는 모듈.
|
||||
|
||||
// Electron 개발자에게 crash-report를 보냄.
|
||||
require('crash-reporter').start();
|
||||
|
||||
// 윈도우 객체를 전역에 유지합니다, 만약 이렇게 하지 않으면,
|
||||
// 자바스크립트 GC가 일어날 때 창이 자동으로 닫혀버립니다.
|
||||
var mainWindow = null;
|
||||
|
||||
// 모든 창이 닫히면 어플리케이션 종료.
|
||||
app.on('window-all-closed', function() {
|
||||
if (process.platform != 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
// 이 메서드는 Electron의 초기화가 모두 끝나고
|
||||
// 브라우저 창을 열 준비가 되었을 때 호출됩니다.
|
||||
app.on('ready', function() {
|
||||
// 새로운 브라우저 창을 생성합니다.
|
||||
mainWindow = new BrowserWindow({width: 800, height: 600});
|
||||
|
||||
// 그리고 현재 디렉터리의 index.html을 로드합니다.
|
||||
mainWindow.loadUrl('file://' + __dirname + '/index.html');
|
||||
|
||||
// 개발자 콘솔을 엽니다.
|
||||
mainWindow.openDevTools();
|
||||
|
||||
// 창이 닫히면 호출됩니다.
|
||||
mainWindow.on('closed', function() {
|
||||
// 윈도우 객체의 참조를 삭제합니다, 보통 멀티 윈도우 지원을 위해
|
||||
// 윈도우 객체를 배열에 저장하는 경우가 있는데, 이 경우
|
||||
// 해당하는 모든 윈도우 객체의 참조를 삭제해 주어야 합니다.
|
||||
mainWindow = null;
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
마지막으로, 사용자에게 보여줄 `index.html` 웹 페이지의 예제입니다:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>헬로 월드!</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>헬로 월드!</h1>
|
||||
우리는 io.js <script>document.write(process.version)</script> 버전과
|
||||
Electron <script>document.write(process.versions['electron'])</script> 버전을 사용합니다.
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 앱 실행하기
|
||||
|
||||
앱을 작성한 후, [어플리케이션 배포](./application-distribution-ko.md) 가이드를 따라 앱을 패키징 하고
|
||||
패키징한 앱을 실행해 볼 수 있습니다. 또한 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`의 release 패키지에 포함되어 있습니다.
|
||||
[여기](https://github.com/atom/electron/releases)에서 다운로드 받을 수 있습니다.
|
||||
56
docs/tutorial/using-native-node-modules-ko.md
Normal file
56
docs/tutorial/using-native-node-modules-ko.md
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
# 네이티브 node 모듈 사용하기
|
||||
|
||||
__역자주: 현재 Electron은 node.js대신 io.js를 사용합니다. 문서에 기재된 버전과 다를 수 있습니다__
|
||||
|
||||
Electron에선 node.js 네이티브 모듈이 지원됩니다. 하지만 Electron은 공식 node.js의 V8 엔진과는 달리 다른 V8 버전을 사용합니다.
|
||||
그런 이유로 네이티브 모듈을 사용하기 위해선 Electron의 V8 버전에 맞춰 네이티브 모듈을 다시 빌드하고 헤더를 변경해야 합니다.
|
||||
|
||||
## 네이티브 node 모듈 호환성
|
||||
|
||||
Node v0.11.x 버전부터는 V8 API의 중대한 변경이 있었습니다. 하지만 일반적으로 모든 네이티브 모듈은 Node v0.10.x 버전을 타겟으로 작성 되었기 때문에
|
||||
Node v0.11.x 버전에선 작동하지 않습니다. Electron은 내부적으로 Node v0.11.13 버전을 사용합니다. 그래서 위에서 설명한 문제가 발생합니다.
|
||||
|
||||
이 문제를 해결하기 위해, 모듈이 Node v0.11.x 버전을 지원할 수 있도록 해야합니다.
|
||||
현재 [많은 모듈들](https://www.npmjs.org/browse/depended/nan)이 안정적으로 두 버전 모두 지원하고 있지만,
|
||||
오래된 모듈의 경우 Node v0.10.x 버전만을 지원하고 있습니다.
|
||||
예를들어 [nan](https://github.com/rvagg/nan) 모듈을 사용해야 하는 경우, Node v0.11.x 버전으로 포팅 할 필요가 있습니다.
|
||||
|
||||
## 네이티브 모듈 설치하는 방법
|
||||
|
||||
### 쉬운 방법 - 권장
|
||||
|
||||
[`electron-rebuild`](https://github.com/paulcbetts/electron-rebuild) 패키지를 사용하면 아주 빠르고 정확하게 네이티브 모듈을 다시 빌드할 수 있습니다.
|
||||
다음의 간단한 절차를 통해 자동으로 헤더를 다운로드하고 네이티브 모듈을 빌드할 수 있습니다:
|
||||
|
||||
```sh
|
||||
npm install --save-dev electron-rebuild
|
||||
|
||||
# 필요한 네이티브 모듈을 `npm install`로 설치한 후 다음 작업을 실행하세요:
|
||||
./node_modules/.bin/electron-rebuild
|
||||
```
|
||||
|
||||
### node-gyp을 이용한 방법
|
||||
|
||||
Node 모듈을 `node-gyp`를 사용하여 Electron을 타겟으로 빌드할 땐, `node-gyp`에 헤더 다운로드 주소와 버전을 알려주어야합니다:
|
||||
|
||||
```bash
|
||||
$ cd /path-to-module/
|
||||
$ HOME=~/.electron-gyp node-gyp rebuild --target=0.25.0 --arch=ia64 --dist-url=https://atom.io/download/atom-shell
|
||||
```
|
||||
|
||||
|
||||
|
||||
`HOME=~/.electron-gyp`은 변경할 헤더의 위치를 찾습니다. `--target=0.25.0`은 Electron의 버전입니다.
|
||||
`--dist-url=...`은 헤더를 다운로드 하는 주소입니다. `--arch=ia64`는 64비트 시스템을 타겟으로 빌드 한다는 것을 `node-gyp`에게 알려줍니다.
|
||||
|
||||
### npm을 이용한 방법
|
||||
|
||||
또한 `npm`을 사용하여 모듈을 설치할 수도 있습니다.
|
||||
환경변수가 필요한 것을 제외하고는 일반 Node 모듈을 설치하는 방법과 완전히 똑같습니다:
|
||||
|
||||
```bash
|
||||
export npm_config_disturl=https://atom.io/download/atom-shell
|
||||
export npm_config_target=0.25.0
|
||||
export npm_config_arch=x64
|
||||
HOME=~/.electron-gyp npm install module-name
|
||||
```
|
||||
59
docs/tutorial/using-pepper-flash-plugin-ko.md
Normal file
59
docs/tutorial/using-pepper-flash-plugin-ko.md
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
# Pepper 플래시 플러그인 사용하기
|
||||
|
||||
필요하다면 Pepper 플래시 플러그인을 사용할 수 있습니다. Electron에서 pepper 플래시 플러그인을 사용하기 위해서는, 따로 pepper 플래시 플러그인의 위치를 지정해 주어야합니다.
|
||||
|
||||
## 플래시 플러그인 준비하기
|
||||
|
||||
크롬 브라우저의 `chrome://plugins` 페이지에 접속한 후 `세부정보`에서 플래시 플러그인의 위치와 버전을 찾을 수 있습니다.
|
||||
Electron에서 플래시 플러그인을 지원하기 위해선 이 두 가지를 복사해 와야 합니다.
|
||||
|
||||
## Electron 스위치 추가
|
||||
|
||||
플러그인을 사용하기 위해 직접적으로 `--ppapi-flash-path` 와 `ppapi-flash-version` 플래그를 ready 이벤트가 호출되기 전에 추가해야합니다.
|
||||
그리고 `browser-window`에 `plugins` 스위치도 추가해야합니다.
|
||||
|
||||
```javascript
|
||||
var app = require('app');
|
||||
var BrowserWindow = require('browser-window');
|
||||
|
||||
// Report crashes to our server.
|
||||
require('crash-reporter').start();
|
||||
|
||||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the javascript object is GCed.
|
||||
var mainWindow = null;
|
||||
|
||||
// Quit when all windows are closed.
|
||||
app.on('window-all-closed', function() {
|
||||
if (process.platform != 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
// 플래시 플러그인의 위치를 설정합니다.
|
||||
// Windows의 경우, /path/to/pepflashplayer.dll
|
||||
// Mac의 경우, /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
|
||||
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
|
||||
}
|
||||
});
|
||||
mainWindow.loadUrl('file://' + __dirname + '/index.html');
|
||||
// Something else
|
||||
});
|
||||
```
|
||||
|
||||
## `<webview>` 태그를 이용하여 플러그인을 활성화
|
||||
`plugins` 속성을 `<webview>` 태그에 추가합니다.
|
||||
```html
|
||||
<webview src="http://www.adobe.com/software/flash/about/" plugins></webview>
|
||||
```
|
||||
74
docs/tutorial/using-selenium-and-webdriver-ko.md
Normal file
74
docs/tutorial/using-selenium-and-webdriver-ko.md
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
# Selenium 과 WebDriver 사용하기
|
||||
|
||||
[ChromeDriver - WebDriver for Chrome][chrome-driver]로 부터 인용:
|
||||
|
||||
> WebDriver는 많은 브라우저에서 웹 앱을 자동적으로 테스트하는 툴입니다.
|
||||
> 이 툴은 웹 페이지를 자동으로 탐색하고, 유저 폼을 사용하거나, 자바스크립트를 실행하는 등의 작업을 수행할 수 있습니다.
|
||||
> ChromeDriver는 Chromium의 WebDriver wire 프로토콜 스텐드얼론 서버 구현입니다.
|
||||
> Chromium 과 WebDriver 팀 멤버에 의해 개발되었습니다.
|
||||
|
||||
Electron의 [releases](https://github.com/atom/electron/releases) 페이지에서 `chromedriver` 릴리즈 압축파일을 찾을 수 있습니다.
|
||||
`chromedriver`의 Electron 배포판과 upstream과의 차이는 없습니다.
|
||||
`chromedriver`와 Electron을 함께 사용하려면, 몇가지 설정이 필요합니다.
|
||||
|
||||
또한 releases에는 `chromedriver`를 포함하여 주 버전만 업데이트 됩니다. (예시: `vX.X.0` releases)
|
||||
왜냐하면 `chromedriver`는 Electron 자체에서 자주 업데이트하지 않기 때문입니다.
|
||||
|
||||
## WebDriverJs 설정하기
|
||||
|
||||
[WebDriverJs](https://code.google.com/p/selenium/wiki/WebDriverJs)는 WebDriver를 사용하여 테스팅 할 수 있도록 도와주는 node 패키지입니다.
|
||||
다음 예제를 참고하세요:
|
||||
|
||||
### 1. 크롬 드라이버 시작
|
||||
|
||||
먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다:
|
||||
|
||||
```bash
|
||||
$ ./chromedriver
|
||||
Starting ChromeDriver (v2.10.291558) on port 9515
|
||||
Only local connections are allowed.
|
||||
```
|
||||
|
||||
포트 `9515`를 기억하세요, 나중에 사용합니다
|
||||
|
||||
### 2. WebDriverJS 설치
|
||||
|
||||
```bash
|
||||
$ npm install selenium-webdriver
|
||||
```
|
||||
|
||||
### 3. 크롬 드라이버에 연결
|
||||
|
||||
`selenium-webdriver`를 Electron과 같이 사용할 땐 기본적으로 upstream과 같습니다.
|
||||
한가지 다른점이 있다면 수동으로 크롬 드라이버 연결에 대해 설정하고 , Electron 실행파일의 위치를 전달합니다:
|
||||
|
||||
```javascript
|
||||
var webdriver = require('selenium-webdriver');
|
||||
|
||||
var driver = new webdriver.Builder()
|
||||
// 작동하고 있는 크롬 드라이버의 포트 "9515"를 사용합니다.
|
||||
.usingServer('http://localhost:9515')
|
||||
.withCapabilities({chromeOptions: {
|
||||
// 여기에 사용중인 Electron 바이너리의 경로를 기재하세요.
|
||||
binary: '/Path-to-Your-App.app/Contents/MacOS/Atom'}})
|
||||
.forBrowser('electron')
|
||||
.build();
|
||||
|
||||
driver.get('http://www.google.com');
|
||||
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');
|
||||
driver.findElement(webdriver.By.name('btnG')).click();
|
||||
driver.wait(function() {
|
||||
return driver.getTitle().then(function(title) {
|
||||
return title === 'webdriver - Google Search';
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
driver.quit();
|
||||
```
|
||||
|
||||
## 작업환경
|
||||
|
||||
따로 Electron을 다시 빌드하지 않는다면, 간단히 어플리케이션을 Electron의 리소스 디렉터리에
|
||||
[배치](https://github.com/atom/electron/blob/master/docs/tutorial/application-distribution-ko.md)하여 바로 테스트 할 수 있습니다.
|
||||
|
||||
[chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/
|
||||
Loading…
Reference in a new issue