From 30dfd54575adb2ba3ae9b5dae12220b0fec0914f Mon Sep 17 00:00:00 2001 From: Plusb Preco Date: Mon, 22 Jun 2015 14:06:06 +0900 Subject: [PATCH] First translation Translate docs to korean --- README-ko.md | 43 ++ docs/README-ko.md | 69 +++ docs/api/accelerator-ko.md | 46 ++ docs/api/menu-item-ko.md | 20 + docs/api/power-monitor-ko.md | 33 ++ docs/api/tray-ko.md | 139 +++++ docs/api/web-view-tag-ko.md | 479 ++++++++++++++++++ docs/development/coding-style-ko.md | 23 + docs/tutorial/application-distribution-ko.md | 138 +++++ docs/tutorial/application-packaging-ko.md | 153 ++++++ docs/tutorial/debugging-main-process-ko.md | 45 ++ .../desktop-environment-integration-ko.md | 201 ++++++++ docs/tutorial/devtools-extension-ko.md | 46 ++ docs/tutorial/online-offline-events-ko.md | 80 +++ docs/tutorial/quick-start-ko.md | 145 ++++++ docs/tutorial/using-native-node-modules-ko.md | 56 ++ docs/tutorial/using-pepper-flash-plugin-ko.md | 59 +++ .../using-selenium-and-webdriver-ko.md | 74 +++ 18 files changed, 1849 insertions(+) create mode 100644 README-ko.md create mode 100644 docs/README-ko.md create mode 100644 docs/api/accelerator-ko.md create mode 100644 docs/api/menu-item-ko.md create mode 100644 docs/api/power-monitor-ko.md create mode 100644 docs/api/tray-ko.md create mode 100644 docs/api/web-view-tag-ko.md create mode 100644 docs/development/coding-style-ko.md create mode 100644 docs/tutorial/application-distribution-ko.md create mode 100644 docs/tutorial/application-packaging-ko.md create mode 100644 docs/tutorial/debugging-main-process-ko.md create mode 100644 docs/tutorial/desktop-environment-integration-ko.md create mode 100644 docs/tutorial/devtools-extension-ko.md create mode 100644 docs/tutorial/online-offline-events-ko.md create mode 100644 docs/tutorial/quick-start-ko.md create mode 100644 docs/tutorial/using-native-node-modules-ko.md create mode 100644 docs/tutorial/using-pepper-flash-plugin-ko.md create mode 100644 docs/tutorial/using-selenium-and-webdriver-ko.md diff --git a/README-ko.md b/README-ko.md new file mode 100644 index 00000000000..cc862a3e89e --- /dev/null +++ b/README-ko.md @@ -0,0 +1,43 @@ +[![Electron Logo](http://electron.atom.io/images/electron-logo.svg)](http://electron.atom.io/) + +[![Build Status](https://travis-ci.org/atom/electron.svg?branch=master)](https://travis-ci.org/atom/electron) +[![devDependency Status](https://david-dm.org/atom/electron/dev-status.svg)](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) 에 커뮤니티가 운영중인 유용한 예제 앱과 툴, 리소스가 있으니 한번 탐색해 보시기 바랍니다. diff --git a/docs/README-ko.md b/docs/README-ko.md new file mode 100644 index 00000000000..0a00d7a479d --- /dev/null +++ b/docs/README-ko.md @@ -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) +* [`` 태그](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]이 번역하였습니다. diff --git a/docs/api/accelerator-ko.md b/docs/api/accelerator-ko.md new file mode 100644 index 00000000000..67f94b60a6c --- /dev/null +++ b/docs/api/accelerator-ko.md @@ -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` + +__키코드는 `단축어`로도 사용할 수 있습니다__ diff --git a/docs/api/menu-item-ko.md b/docs/api/menu-item-ko.md new file mode 100644 index 00000000000..09c2b782a22 --- /dev/null +++ b/docs/api/menu-item-ko.md @@ -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` ̿Ͽ ޴ ġ ϰ մϴ. diff --git a/docs/api/power-monitor-ko.md b/docs/api/power-monitor-ko.md new file mode 100644 index 00000000000..e21c70a77fe --- /dev/null +++ b/docs/api/power-monitor-ko.md @@ -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 + +시스템이 배터리를 사용하기 시작할 때 호출됩니다. diff --git a/docs/api/tray-ko.md b/docs/api/tray-ko.md new file mode 100644 index 00000000000..2678b6812dc --- /dev/null +++ b/docs/api/tray-ko.md @@ -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 diff --git a/docs/api/web-view-tag-ko.md b/docs/api/web-view-tag-ko.md new file mode 100644 index 00000000000..198deec8dd6 --- /dev/null +++ b/docs/api/web-view-tag-ko.md @@ -0,0 +1,479 @@ +# `` ± + +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 + +``` + +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 + +``` + +## ± Ӽ + +### src + +```html + +``` + +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 + +``` + +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 + +``` + +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 + +``` + +If "on", the guest page in `webview` will be able to use browser plugins. + +### preload + +```html + +``` + +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 + +``` + +Sets the referrer URL for the guest page. + +### useragent + +```html + +``` + +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 + +``` + +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(); +}); +``` + +### ``.getUrl() + +Returns URL of guest page. + +### ``.getTitle() + +Returns the title of guest page. + +### ``.isLoading() + +Returns whether guest page is still loading resources. + +### ``.isWaitingForResponse() + +Returns whether guest page is waiting for a first-response for the main resource +of the page. + +### ``.stop() + +Stops any pending navigation. + +### ``.reload() + +Reloads guest page. + +### ``.reloadIgnoringCache() + +Reloads guest page and ignores cache. + +### ``.canGoBack() + +Returns whether guest page can go back. + +### ``.canGoForward() + +Returns whether guest page can go forward. + +### ``.canGoToOffset(offset) + +* `offset` Integer + +Returns whether guest page can go to `offset`. + +### ``.clearHistory() + +Clears the navigation history. + +### ``.goBack() + +Makes guest page go back. + +### ``.goForward() + +Makes guest page go forward. + +### ``.goToIndex(index) + +* `index` Integer + +Navigates to the specified absolute index. + +### ``.goToOffset(offset) + +* `offset` Integer + +Navigates to the specified offset from the "current entry". + +### ``.isCrashed() + +Whether the renderer process has crashed. + +### ``.setUserAgent(userAgent) + +* `userAgent` String + +Overrides the user agent for guest page. + +### ``.insertCSS(css) + +* `css` String + +Injects CSS into guest page. + +### ``.executeJavaScript(code) + +* `code` String + +Evaluates `code` in guest page. + +### ``.openDevTools() + +Opens a devtools window for guest page. + +### ``.closeDevTools() + +Closes the devtools window of guest page. + +### ``.isDevToolsOpened() + +Returns whether guest page has a devtools window attached. + +### ``.inspectElement(x, y) + +* `x` Integer +* `y` Integer + +Starts inspecting element at position (`x`, `y`) of guest page. + +### ``.inspectServiceWorker() + +Opens the devtools for the service worker context present in the guest page. + +### ``.undo() + +Executes editing command `undo` in page. + +### ``.redo() + +Executes editing command `redo` in page. + +### ``.cut() + +Executes editing command `cut` in page. + +### ``.copy() + +Executes editing command `copy` in page. + +### ``.paste() + +Executes editing command `paste` in page. + +### ``.pasteAndMatchStyle() + +Executes editing command `pasteAndMatchStyle` in page. + +### ``.delete() + +Executes editing command `delete` in page. + +### ``.selectAll() + +Executes editing command `selectAll` in page. + +### ``.unselect() + +Executes editing command `unselect` in page. + +### ``.replace(text) + +* `text` String + +Executes editing command `replace` in page. + +### ``.replaceMisspelling(text) + +* `text` String + +Executes editing command `replaceMisspelling` in page. + +### ``.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. diff --git a/docs/development/coding-style-ko.md b/docs/development/coding-style-ko.md new file mode 100644 index 00000000000..40328cd6c5e --- /dev/null +++ b/docs/development/coding-style-ko.md @@ -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)가 있습니다. diff --git a/docs/tutorial/application-distribution-ko.md b/docs/tutorial/application-distribution-ko.md new file mode 100644 index 00000000000..fff2453fc0a --- /dev/null +++ b/docs/tutorial/application-distribution-ko.md @@ -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 모듈 또한 새로운 실행파일 이름으로 매치 시킵니다. diff --git a/docs/tutorial/application-packaging-ko.md b/docs/tutorial/application-packaging-ko.md new file mode 100644 index 00000000000..3e4798f1f52 --- /dev/null +++ b/docs/tutorial/application-packaging-ko.md @@ -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 + +``` + +### `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 diff --git a/docs/tutorial/debugging-main-process-ko.md b/docs/tutorial/debugging-main-process-ko.md new file mode 100644 index 00000000000..ae8d6c897ac --- /dev/null +++ b/docs/tutorial/debugging-main-process-ko.md @@ -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 diff --git a/docs/tutorial/desktop-environment-integration-ko.md b/docs/tutorial/desktop-environment-integration-ko.md new file mode 100644 index 00000000000..fbf00215443 --- /dev/null +++ b/docs/tutorial/desktop-environment-integration-ko.md @@ -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:__ + +![JumpList Recent Files](http://i.msdn.microsoft.com/dynimg/IC420538.png) + +__Application dock menu:__ + + + +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:__ + + + +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:__ + +![IE](http://i.msdn.microsoft.com/dynimg/IC420539.png) + +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:__ + +![audacious](https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles?action=AttachFile&do=get&target=shortcuts.png) + +## 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:__ + +![Taskbar Progress Bar](https://cloud.githubusercontent.com/assets/639601/5081682/16691fda-6f0e-11e4-9676-49b6418f1264.png) + +__Progress bar in Unity launcher:__ + +![Unity Launcher](https://cloud.githubusercontent.com/assets/639601/5081747/4a0a589e-6f0f-11e4-803f-91594716a546.png) + +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:__ + + + +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 diff --git a/docs/tutorial/devtools-extension-ko.md b/docs/tutorial/devtools-extension-ko.md new file mode 100644 index 00000000000..8642e30441c --- /dev/null +++ b/docs/tutorial/devtools-extension-ko.md @@ -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 diff --git a/docs/tutorial/online-offline-events-ko.md b/docs/tutorial/online-offline-events-ko.md new file mode 100644 index 00000000000..bf4a4124c39 --- /dev/null +++ b/docs/tutorial/online-offline-events-ko.md @@ -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 + + + + + + +``` + +필요하다면, 이러한 이벤트를 메인 프로세스로 보낼 수도 있습니다. +메인 프로세스는 `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 + + + + + + +``` diff --git a/docs/tutorial/quick-start-ko.md b/docs/tutorial/quick-start-ko.md new file mode 100644 index 00000000000..9cd5f51230f --- /dev/null +++ b/docs/tutorial/quick-start-ko.md @@ -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 + + + + 헬로 월드! + + +

헬로 월드!

+ 우리는 io.js 버전과 + Electron 버전을 사용합니다. + + +``` + +## 앱 실행하기 + +앱을 작성한 후, [어플리케이션 배포](./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)에서 다운로드 받을 수 있습니다. diff --git a/docs/tutorial/using-native-node-modules-ko.md b/docs/tutorial/using-native-node-modules-ko.md new file mode 100644 index 00000000000..c36346b6536 --- /dev/null +++ b/docs/tutorial/using-native-node-modules-ko.md @@ -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 +``` diff --git a/docs/tutorial/using-pepper-flash-plugin-ko.md b/docs/tutorial/using-pepper-flash-plugin-ko.md new file mode 100644 index 00000000000..92dce61716e --- /dev/null +++ b/docs/tutorial/using-pepper-flash-plugin-ko.md @@ -0,0 +1,59 @@ +# Pepper ÷ ÷ ϱ + +ʿϴٸ Pepper ÷ ÷ ֽϴ. Electron pepper ÷ ÷ ϱ ؼ, pepper ÷ ÷ ġ ־մϴ. + +## ÷ ÷ غϱ + +ũ `chrome://plugins` `` ÷ ÷ ġ ã ֽϴ. +Electron ÷ ÷ ϱ ؼ ; մϴ. + +## Electron ġ ߰ + +÷ ϱ `--ppapi-flash-path` `ppapi-flash-version` ÷׸ ready ̺Ʈ ȣDZ ߰ؾմϴ. +׸ `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 +}); +``` + +## `` ±׸ ̿Ͽ ÷ Ȱȭ +`plugins` Ӽ `` ±׿ ߰մϴ. +```html + +``` diff --git a/docs/tutorial/using-selenium-and-webdriver-ko.md b/docs/tutorial/using-selenium-and-webdriver-ko.md new file mode 100644 index 00000000000..ddd39165387 --- /dev/null +++ b/docs/tutorial/using-selenium-and-webdriver-ko.md @@ -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/