📝 Update Korean docs as upstream

[ci skip]
This commit is contained in:
Plusb Preco 2016-05-18 16:41:21 +09:00
parent 7fd3149031
commit d7fdb16078
4 changed files with 166 additions and 30 deletions

View file

@ -8,7 +8,7 @@
접근하는 예시입니다: 접근하는 예시입니다:
```javascript ```javascript
const BrowserWindow = require('electron').BrowserWindow; const {BrowserWindow} = require('electron');
let win = new BrowserWindow({width: 800, height: 1500}); let win = new BrowserWindow({width: 800, height: 1500});
win.loadURL('http://github.com'); win.loadURL('http://github.com');
@ -37,8 +37,9 @@ Returns:
이 이벤트는 `did-finish-load`와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다. 이 이벤트는 `did-finish-load`와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다.
예를 들면 `window.stop()`이 실행되었을 때 발생합니다. 발생할 수 있는 전체 에러 코드의 예를 들면 `window.stop()`이 실행되었을 때 발생합니다. 발생할 수 있는 전체 에러 코드의
목록과 설명은 [여기](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)서 목록과 설명은 [여기서](https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h)
확인할 수 있습니다. 확인할 수 있습니다. 참고로 리다이렉트 응답은 `errorCode` -3과 함께 발생합니다; 이
에러는 명시적으로 무시할 수 있습니다.
### Event: 'did-frame-finish-load' ### Event: 'did-frame-finish-load'
@ -292,7 +293,7 @@ Returns:
* `image` NativeImage (optional) * `image` NativeImage (optional)
* `scale` Float (optional) * `scale` Float (optional)
커서 타입이 변경될 때 발생하는 이벤트입니다. `type` 매개변수는 다음 값이 될 수 있습니다: 커서 종류가 변경될 때 발생하는 이벤트입니다. `type`수는 다음 값이 될 수 있습니다:
`default`, `crosshair`, `pointer`, `text`, `wait`, `help`, `e-resize`, `n-resize`, `default`, `crosshair`, `pointer`, `text`, `wait`, `help`, `e-resize`, `n-resize`,
`ne-resize`, `nw-resize`, `s-resize`, `se-resize`, `sw-resize`, `w-resize`, `ne-resize`, `nw-resize`, `s-resize`, `se-resize`, `sw-resize`, `w-resize`,
`ns-resize`, `ew-resize`, `nesw-resize`, `nwse-resize`, `col-resize`, `ns-resize`, `ew-resize`, `nesw-resize`, `nwse-resize`, `col-resize`,
@ -301,10 +302,64 @@ Returns:
`cell`, `context-menu`, `alias`, `progress`, `nodrop`, `copy`, `none`, `cell`, `context-menu`, `alias`, `progress`, `nodrop`, `copy`, `none`,
`not-allowed`, `zoom-in`, `zoom-out`, `grab`, `grabbing`, `custom`. `not-allowed`, `zoom-in`, `zoom-out`, `grab`, `grabbing`, `custom`.
만약 `type` 매개변수가 `custom` 이고 `image` 매개변수가 `NativeImage`를 통한 커스텀 만약 `type` 인수가 `custom` 이고 `image`수가 `NativeImage`를 통한 커스텀
커서를 지정했을 때, 해당 이미지로 커서가 변경됩니다. 또한 `scale` 매개변수는 이미지의 커서를 지정했을 때, 해당 이미지로 커서가 변경됩니다. 또한 `scale` 수는 이미지의
크기를 조정합니다. 크기를 조정합니다.
### Event: 'context-menu'
Returns:
* `event` Event
* `params` Object
* `x` Integer - x 좌표
* `y` Integer - y 좌표
* `linkURL` String - 컨텍스트 메뉴가 호출된 노드를 둘러싸는 링크의 URL.
* `linkText` String - 링크에 연관된 텍스트. 콘텐츠의 링크가 이미지인 경우 빈
문자열이 됩니다.
* `pageURL` String - 컨텍스트 메뉴가 호출된 상위 수준 페이지의 URL.
* `frameURL` String - 컨텍스트 메뉴가 호출된 서브 프레임의 URL.
* `srcURL` String - 컨텍스트 메뉴가 호출된 요소에 대한 소스 URL. 요소와 소스 URL은
이미지, 오디오, 비디오입니다.
* `mediaType` String - 컨텍스트 메뉴가 호출된 노드의 종류. 값은 `none`, `image`,
`audio`, `video`, `canvas`, `file` 또는 `plugin`이 될 수 있습니다.
* `hasImageContent` Boolean - 컨텍스트 메뉴가 내용이 있는 이미지에서 호출되었는지
여부.
* `isEditable` Boolean - 컨텍스트를 편집할 수 있는지 여부.
* `selectionText` String - 컨텍스트 메뉴가 호출된 부분에 있는 선택된 텍스트.
* `titleText` String - 컨텍스트 메뉴가 호출된 선택된 제목 또는 알림 텍스트.
* `misspelledWord` String - 만약 있는 경우, 커서가 가르키는 곳에서 발생한 오타.
* `frameCharset` String - 메뉴가 호출된 프레임의 문자열 인코딩.
* `inputFieldType` String - 컨텍스트 메뉴가 입력 필드에서 호출되었을 때, 그 필드의
종류. 값은 `none`, `plainText`, `password`, `other` 중 한 가지가 될 수 있습니다.
* `menuSourceType` String - 컨텍스트 메뉴를 호출한 입력 소스. 값은 `none`,
`mouse`, `keyboard`, `touch`, `touchMenu` 중 한 가지가 될 수 있습니다.
* `mediaFlags` Object - 컨텍스트 메뉴가 호출된 미디어 요소에 대한 플래그. 자세한
사항은 아래를 참고하세요.
* `editFlags` Object - 이 플래그는 렌더러가 어떤 행동을 이행할 수 있는지 여부를
표시합니다. 자세한 사항은 아래를 참고하세요.
`mediaFlags`는 다음과 같은 속성을 가지고 있습니다:
* `inError` Boolean - 미디어 객체가 크래시되었는지 여부.
* `isPaused` Boolean - 미디어 객체가 일시중지되었는지 여부.
* `isMuted` Boolean - 미디어 객체가 음소거되었는지 여부.
* `hasAudio` Boolean - 미디어 객체가 오디오를 가지고 있는지 여부.
* `isLooping` Boolean - 미디어 객체가 루프중인지 여부.
* `isControlsVisible` Boolean - 미디어 객체의 컨트롤이 보이는지 여부.
* `canToggleControls` Boolean - 미디어 객체의 컨트롤을 토글할 수 있는지 여부.
* `canRotate` Boolean - 미디어 객체를 돌릴 수 있는지 여부.
`editFlags`는 다음과 같은 속성을 가지고 있습니다:
* `canUndo` Boolean - 렌더러에서 실행 취소할 수 있는지 여부.
* `canRedo` Boolean - 렌더러에서 다시 실행할 수 있는지 여부.
* `canCut` Boolean - 렌더러에서 잘라내기를 실행할 수 있는지 여부.
* `canCopy` Boolean - 렌더러에서 복사를 실행할 수 있는지 여부.
* `canPaste` Boolean - 렌더러에서 붙여넣기를 실행할 수 있는지 여부.
* `canDelete` Boolean - 렌더러에서 삭제를 실행할 수 있는지 여부.
* `canSelectAll` Boolean - 렌더러에서 모두 선택을 실행할 수 있는지 여부.
새로운 컨텍스트 메뉴의 제어가 필요할 때 발생하는 이벤트입니다.
## Instance Methods ## Instance Methods
`webContents`객체는 다음과 같은 인스턴스 메서드들을 가지고 있습니다. `webContents`객체는 다음과 같은 인스턴스 메서드들을 가지고 있습니다.
@ -604,14 +659,14 @@ Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의
``` ```
```javascript ```javascript
const BrowserWindow = require('electron').BrowserWindow; const {BrowserWindow} = require('electron');
const fs = require('fs'); const fs = require('fs');
let win = new BrowserWindow({width: 800, height: 600}); let win = new BrowserWindow({width: 800, height: 600});
win.loadURL('http://github.com'); win.loadURL('http://github.com');
win.webContents.on('did-finish-load', () => { win.webContents.on('did-finish-load', () => {
// Use default printing options // 기본 프린트 옵션을 사용합니다
win.webContents.printToPDF({}, (error, data) => { win.webContents.printToPDF({}, (error, data) => {
if (error) throw error; if (error) throw error;
fs.writeFile('/tmp/print.pdf', data, (error) => { fs.writeFile('/tmp/print.pdf', data, (error) => {
@ -648,7 +703,7 @@ win.webContents.on('devtools-opened', () => {
* `detach` Boolean - 새 창에서 개발자 도구를 엽니다. * `detach` Boolean - 새 창에서 개발자 도구를 엽니다.
* `mode` String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom", * `mode` String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom",
"undocked", "detach"가 될 수 있습니다. 기본값은 마지막 표시 상태를 "undocked", "detach"가 될 수 있습니다. 기본값은 마지막 표시 상태를
사용합니다. `undocked` 모드에선 다시 독을 할 수 있습니다. 하지만 `detach` 사용합니다. `undocked` 모드에선 다시 도킹할 수 있습니다. 하지만 `detach`
모드에선 할 수 없습니다. 모드에선 할 수 없습니다.
개발자 도구를 엽니다. 개발자 도구를 엽니다.
@ -674,7 +729,7 @@ win.webContents.on('devtools-opened', () => {
* `x` Integer * `x` Integer
* `y` Integer * `y` Integer
(`x`, `y`)위치의 엘레먼트를 조사합니다. (`x`, `y`)위치의 요소를 조사합니다.
### `webContents.inspectServiceWorker()` ### `webContents.inspectServiceWorker()`
@ -712,7 +767,7 @@ app.on('ready', () => {
<body> <body>
<script> <script>
require('electron').ipcRenderer.on('ping', (event, message) => { require('electron').ipcRenderer.on('ping', (event, message) => {
console.log(message); // Prints "whoooooooh!" console.log(message); // "whoooooooh!" 출력
}); });
</script> </script>
</body> </body>
@ -759,7 +814,7 @@ app.on('ready', () => {
### `webContents.sendInputEvent(event)` ### `webContents.sendInputEvent(event)`
* `event` Object * `event` Object
* `type` String (**required**) - 이벤트의 타입. 다음 값들을 사용할 수 있습니다: * `type` String (**required**) - 이벤트의 종류. 다음 값들을 사용할 수 있습니다:
`mouseDown`, `mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`, `mouseDown`, `mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`,
`mouseWheel`, `mouseMove`, `keyDown`, `keyUp`, `char`. `mouseWheel`, `mouseMove`, `keyDown`, `keyUp`, `char`.
* `modifiers` Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함 * `modifiers` Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함
@ -816,7 +871,7 @@ Input `event`를 웹 페이지로 전송합니다.
### `webContents.savePage(fullPath, saveType, callback)` ### `webContents.savePage(fullPath, saveType, callback)`
* `fullPath` String - 전체 파일 경로. * `fullPath` String - 전체 파일 경로.
* `saveType` String - 저장 타입을 지정합니다. * `saveType` String - 저장 종류를 지정합니다.
* `HTMLOnly` - 페이지의 HTML만 저장합니다. * `HTMLOnly` - 페이지의 HTML만 저장합니다.
* `HTMLComplete` - 페이지의 완성된 HTML을 저장합니다. * `HTMLComplete` - 페이지의 완성된 HTML을 저장합니다.
* `MHTML` - 페이지의 완성된 HTML을 MHTML로 저장합니다. * `MHTML` - 페이지의 완성된 HTML을 MHTML로 저장합니다.
@ -898,7 +953,7 @@ win.webContents.debugger.sendCommand('Network.enable');
* `method` String - 메서드 이름, 반드시 원격 디버깅 프로토콜에 의해 정의된 메서드중 * `method` String - 메서드 이름, 반드시 원격 디버깅 프로토콜에 의해 정의된 메서드중
하나가 됩니다. 하나가 됩니다.
* `commandParams` Object (optional) - 요청 매개변수를 표현한 JSON 객체. * `commandParams` Object (optional) - 요청 수를 표현한 JSON 객체.
* `callback` Function (optional) - 응답 * `callback` Function (optional) - 응답
* `error` Object - 커맨드의 실패를 표시하는 에러 메시지. * `error` Object - 커맨드의 실패를 표시하는 에러 메시지.
* `result` Object - 원격 디버깅 프로토콜에서 커맨드 설명의 'returns' 속성에 의해 * `result` Object - 원격 디버깅 프로토콜에서 커맨드 설명의 'returns' 속성에 의해
@ -918,8 +973,7 @@ win.webContents.debugger.sendCommand('Network.enable');
* `event` Event * `event` Event
* `method` String - 메서드 이름. * `method` String - 메서드 이름.
* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 * `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 인수
매개변수
디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다. 디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다.

View file

@ -103,4 +103,40 @@ ServiceWorker의 등록과 fetch API를 사용할 수 있도록 지원합니다.
브라우저 윈도우에서 어떤 `requestFullScreen` 같은 HTML API는 사용자의 승인이 브라우저 윈도우에서 어떤 `requestFullScreen` 같은 HTML API는 사용자의 승인이
필요합니다. `userGesture``true`로 설정하면 이러한 제약을 제거할 수 있습니다. 필요합니다. `userGesture``true`로 설정하면 이러한 제약을 제거할 수 있습니다.
### `webFrame.getResourceUsage()`
Blink의 내부 메모리 캐시 사용 정보를 담고있는 객체를 반환합니다.
```javascript
console.log(webFrame.getResourceUsage())
```
다음이 출력됩니다:
```javascript
{
images: {
count: 22,
size: 2549,
liveSize: 2542,
decodedSize: 478,
purgedSize: 0,
purgeableSize: 0
},
cssStyleSheets: { /* same with "images" */ },
xslStyleSheets: { /* same with "images" */ },
fonts: { /* same with "images" */ },
other: { /* same with "images" */ },
}
```
### `webFrame.clearCache()`
사용하지 않는 메모리 비우기를 시도합니다. (이전 페이지의 이미지 등)
참고로 맹목적으로 이 메서드를 호출하는 것은 이 빈 캐시를 다시 채워야하기 때문에
Electron을 느리게 만듭니다. 따라서 이 메서드는 페이지가 예상했던 것 보다 실질적으로 더
적은 메모리를 사용하게 만드는 어플리케이션 이벤트가 발생했을 때만 호출해야 합니다.
(i.e. 아주 무거운 페이지에서 거의 빈 페이지로 이동한 후 계속 유지할 경우)
[spellchecker]: https://github.com/atom/node-spellchecker [spellchecker]: https://github.com/atom/node-spellchecker

View file

@ -1,16 +1,17 @@
# 보안, 네이티브 호환성, 그리고 신뢰성 # 보안, 네이티브 호환성, 그리고 신뢰성
웹 개발자로써, 우리는 일반적으로 브라우저의 강력한 웹 보안을 잘 이용해왔습니다 - 작성한 웹 개발자로써, 우리는 일반적으로 브라우저의 강력한 웹 보안을 잘 이용해왔습니다 - 작성한
코드에 관련된 보안 문제는 아주 적었습니다. 웹 사이트에 대해 상당히 제한된 권한과 기능에 코드에 관련된 보안 문제는 아주 적었습니다. 우리는 웹 사이트의 샌드박스안에서 허용된
의존해왔습니다 - 그리고 사용자들이 새로운 보안 위협에 대해 발 빠르게 대응할 수 있는 상당히 제한된 권한과 기능에 의존해왔으며, 우리는 새로운 보안 위협에 대해 발 빠르게
아주 커다란 팀의 엔지니어들에 의해 만들어진 브라우저를 마음 놓고 즐길 것이라고 대응할 수 있는 엔지니어들로 이루어진 커다란 팀으로부터 만들어진 브라우저를 사용자들이
믿어왔습니다. 마음 놓고 즐길 것이라고 믿어왔습니다.
하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 이해하는 하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 기억해
것이 중요합니다. Electron은 웹 기술을 사용하여 강력한 데스크톱 어플리케이션을 만들 수 두어야 합니다. Electron은 친근한 웹 기술을 사용하여 풍부한 기능의 데스크톱
있도록 해줍니다. 가장 핵심 기능은 바로 제한된 웹 사이트의 기능을 커버할 정도로 완전한 어플리케이션을 만들 수 있도록 해주지만 그만큼 코드가 더 큰 힘을 사용합니다.
네이티브 어플리케이션과 동일한 기능을 하는 강력한 소프트웨어를 만들 수 있는 능력입니다. JavaScript가 파일 시스템, 유저 쉘, 그외 여러가지 기능에 접근할 수 있습니다. 이러한
하지만 코드에 부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 수 있습니다. 능력은 높은 퀄리티를 가진 네이티브 어플리케이션을 개발할 수 있도록 해주지만 코드에
부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 가능성이 있습니다.
이를 염두해두고, 신뢰할 수 없는 출처의 임의의 콘텐츠를 표시할 때 Electron에서 이를 염두해두고, 신뢰할 수 없는 출처의 임의의 콘텐츠를 표시할 때 Electron에서
자체적으로 처리하지 않는 심각한 보안 문제를 야기할 수 있다는 점을 주의해야 합니다. 자체적으로 처리하지 않는 심각한 보안 문제를 야기할 수 있다는 점을 주의해야 합니다.
@ -55,6 +56,10 @@ request와 기여는 언제나 환영합니다.
(`webPreferences` 사용) (`webPreferences` 사용)
* `webSecurity`를 비활성화하지 않습니다. 이 옵션을 비활성화하면 동일-출처 정책도 * `webSecurity`를 비활성화하지 않습니다. 이 옵션을 비활성화하면 동일-출처 정책도
비활성화됩니다. 비활성화됩니다.
* [`Content-Security-Policy`](http://www.html5rocks.com/en/tutorials/security/content-security-policy/)
를 정의하고, 한정적인 규칙을 사용하세요 (ie: `script-src 'self'`)
* 문자열을 코드로 실행할 수 있는
[`eval`을 덮어쓰고 비활성화](https://github.com/nylas/N1/blob/0abc5d5defcdb057120d726b271933425b75b415/static/index.js#L6)하세요.
* `allowDisplayingInsecureContent``true`로 설정하지 마세요. * `allowDisplayingInsecureContent``true`로 설정하지 마세요.
* `allowRunningInsecureContent``true`로 설정하지 마세요. * `allowRunningInsecureContent``true`로 설정하지 마세요.
* 무엇을 하고 있는지 확실히 알고 있지않는 이상 `experimentalFeatures` 또는 * 무엇을 하고 있는지 확실히 알고 있지않는 이상 `experimentalFeatures` 또는

View file

@ -7,8 +7,46 @@
> 등의 작업을 수행할 수 있습니다. ChromeDriver는 Chromium의 WebDriver wire 프로토콜 > 등의 작업을 수행할 수 있습니다. ChromeDriver는 Chromium의 WebDriver wire 프로토콜
> 스텐드얼론 서버 구현입니다. Chromium 과 WebDriver 팀 멤버에 의해 개발되었습니다. > 스텐드얼론 서버 구현입니다. Chromium 과 WebDriver 팀 멤버에 의해 개발되었습니다.
Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을 찾을 수 있도록 해야 ## Spectron 설정하기
하며 Electron은 Chrome 브라우저와 비슷하다는 점을 기억해야 합니다.
[Spectron][spectron]은 공식적으로 지원하는 Electron을 위한 ChromeDriver 테스팅
프레임워크입니다. 이는 [WebdriverIO](http://webdriver.io/)를 기반으로 만들어졌고,
테스트에서 Electron API에 접근하기 위한 헬퍼를 가지고 있으며 ChromeDriver를 포함하고
있습니다.
```bash
$ npm install --save-dev spectron
```
```js
// 윈도우가 제목과 함께 보이는지 검증하는 간단한 테스트.
var Application = require('spectron').Application
var assert = require('assert')
var app = new Application({
path: '/Applications/MyApp.app/Contents/MacOS/MyApp'
})
app.start().then(function () {
// 윈도우가 보이는지 확인합니다.
return app.browserWindow.isVisible()
}).then(function (isVisible) {
// 윈도우가 보이는지 검증합니다.
assert.equal(isVisible, true)
}).then(function () {
// 윈도우의 제목을 가져옵니다.
return app.client.getTitle()
}).then(function (title) {
// 윈도우의 제목을 검증합니다.
assert.equal(title, 'My App')
}).then(function () {
// 어플리케이션을 중지합니다.
return app.stop()
}).catch(function (error) {
// 테스트의 실패가 있다면 로깅합니다.
console.error('Test failed', error.message)
})
```
## WebDriverJs 설정하기 ## WebDriverJs 설정하기
@ -20,7 +58,8 @@ Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을
먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다: 먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다:
```bash ```bash
$ ./chromedriver $ npm install electron-chromedriver
$ ./node_modules/.bin/chromedriver
Starting ChromeDriver (v2.10.291558) on port 9515 Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed. Only local connections are allowed.
``` ```
@ -76,7 +115,8 @@ node 패키지입니다.
먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다: 먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다:
```bash ```bash
$ chromedriver --url-base=wd/hub --port=9515 $ npm install electron-chromedriver
$ ./node_modules/.bin/chromedriver --url-base=wd/hub --port=9515
Starting ChromeDriver (v2.10.291558) on port 9515 Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed. Only local connections are allowed.
``` ```
@ -127,3 +167,4 @@ client
디렉터리로 복사하는 불필요한 과정을 생략할 수 있습니다. 디렉터리로 복사하는 불필요한 과정을 생략할 수 있습니다.
[chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/ [chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/
[spectron]: http://electron.atom.io/spectron