From d7fdb16078bf5ea1d7813a13376fbf5ee0fccbf1 Mon Sep 17 00:00:00 2001 From: Plusb Preco Date: Wed, 18 May 2016 16:41:21 +0900 Subject: [PATCH] :memo: Update Korean docs as upstream [ci skip] --- docs-translations/ko-KR/api/web-contents.md | 88 +++++++++++++++++----- docs-translations/ko-KR/api/web-frame.md | 36 +++++++++ docs-translations/ko-KR/tutorial/security.md | 23 +++--- .../ko-KR/tutorial/using-selenium-and-webdriver.md | 49 +++++++++++- 4 files changed, 166 insertions(+), 30 deletions(-) diff --git a/docs-translations/ko-KR/api/web-contents.md b/docs-translations/ko-KR/api/web-contents.md index d0d7bd4..d75c791 100644 --- a/docs-translations/ko-KR/api/web-contents.md +++ b/docs-translations/ko-KR/api/web-contents.md @@ -8,7 +8,7 @@ 접근하는 예시입니다: ```javascript -const BrowserWindow = require('electron').BrowserWindow; +const {BrowserWindow} = require('electron'); let win = new BrowserWindow({width: 800, height: 1500}); win.loadURL('http://github.com'); @@ -37,8 +37,9 @@ Returns: 이 이벤트는 `did-finish-load`와 비슷하나, 로드가 실패했거나 취소되었을 때 발생합니다. 예를 들면 `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' @@ -225,7 +226,7 @@ Returns: * `issuerName` String - 인증서 발급자 이름 * `callback` Function -클라이언트 인증이 요청되었을 때 발생하는 이벤트 입니다. +클라이언트 인증이 요청되었을 때 발생하는 이벤트입니다. 사용법은 [`app`의 `select-client-certificate` 이벤트](app.md#event-select-client-certificate)와 같습니다. @@ -292,7 +293,7 @@ Returns: * `image` NativeImage (optional) * `scale` Float (optional) -커서 타입이 변경될 때 발생하는 이벤트입니다. `type` 매개변수는 다음 값이 될 수 있습니다: +커서 종류가 변경될 때 발생하는 이벤트입니다. `type` 인수는 다음 값이 될 수 있습니다: `default`, `crosshair`, `pointer`, `text`, `wait`, `help`, `e-resize`, `n-resize`, `ne-resize`, `nw-resize`, `s-resize`, `se-resize`, `sw-resize`, `w-resize`, `ns-resize`, `ew-resize`, `nesw-resize`, `nwse-resize`, `col-resize`, @@ -301,10 +302,64 @@ Returns: `cell`, `context-menu`, `alias`, `progress`, `nodrop`, `copy`, `none`, `not-allowed`, `zoom-in`, `zoom-out`, `grab`, `grabbing`, `custom`. -만약 `type` 매개변수가 `custom` 이고 `image` 매개변수가 `NativeImage`를 통한 커스텀 -커서를 지정했을 때, 해당 이미지로 커서가 변경됩니다. 또한 `scale` 매개변수는 이미지의 +만약 `type` 인수가 `custom` 이고 `image` 인수가 `NativeImage`를 통한 커스텀 +커서를 지정했을 때, 해당 이미지로 커서가 변경됩니다. 또한 `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 `webContents`객체는 다음과 같은 인스턴스 메서드들을 가지고 있습니다. @@ -604,14 +659,14 @@ Chromium의 미리보기 프린팅 커스텀 설정을 이용하여 윈도우의 ``` ```javascript -const BrowserWindow = require('electron').BrowserWindow; +const {BrowserWindow} = require('electron'); const fs = require('fs'); let win = new BrowserWindow({width: 800, height: 600}); win.loadURL('http://github.com'); win.webContents.on('did-finish-load', () => { - // Use default printing options + // 기본 프린트 옵션을 사용합니다 win.webContents.printToPDF({}, (error, data) => { if (error) throw error; fs.writeFile('/tmp/print.pdf', data, (error) => { @@ -648,7 +703,7 @@ win.webContents.on('devtools-opened', () => { * `detach` Boolean - 새 창에서 개발자 도구를 엽니다. * `mode` String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom", "undocked", "detach"가 될 수 있습니다. 기본값은 마지막 표시 상태를 - 사용합니다. `undocked` 모드에선 다시 독을 할 수 있습니다. 하지만 `detach` + 사용합니다. `undocked` 모드에선 다시 도킹할 수 있습니다. 하지만 `detach` 모드에선 할 수 없습니다. 개발자 도구를 엽니다. @@ -674,7 +729,7 @@ win.webContents.on('devtools-opened', () => { * `x` Integer * `y` Integer -(`x`, `y`)위치의 엘레먼트를 조사합니다. +(`x`, `y`)위치의 요소를 조사합니다. ### `webContents.inspectServiceWorker()` @@ -712,7 +767,7 @@ app.on('ready', () => { @@ -759,7 +814,7 @@ app.on('ready', () => { ### `webContents.sendInputEvent(event)` * `event` Object - * `type` String (**required**) - 이벤트의 타입. 다음 값들을 사용할 수 있습니다: + * `type` String (**required**) - 이벤트의 종류. 다음 값들을 사용할 수 있습니다: `mouseDown`, `mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`, `mouseWheel`, `mouseMove`, `keyDown`, `keyUp`, `char`. * `modifiers` Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함 @@ -816,7 +871,7 @@ Input `event`를 웹 페이지로 전송합니다. ### `webContents.savePage(fullPath, saveType, callback)` * `fullPath` String - 전체 파일 경로. -* `saveType` String - 저장 타입을 지정합니다. +* `saveType` String - 저장 종류를 지정합니다. * `HTMLOnly` - 페이지의 HTML만 저장합니다. * `HTMLComplete` - 페이지의 완성된 HTML을 저장합니다. * `MHTML` - 페이지의 완성된 HTML을 MHTML로 저장합니다. @@ -898,7 +953,7 @@ win.webContents.debugger.sendCommand('Network.enable'); * `method` String - 메서드 이름, 반드시 원격 디버깅 프로토콜에 의해 정의된 메서드중 하나가 됩니다. -* `commandParams` Object (optional) - 요청 매개변수를 표현한 JSON 객체. +* `commandParams` Object (optional) - 요청 인수를 표현한 JSON 객체. * `callback` Function (optional) - 응답 * `error` Object - 커맨드의 실패를 표시하는 에러 메시지. * `result` Object - 원격 디버깅 프로토콜에서 커맨드 설명의 'returns' 속성에 의해 @@ -918,8 +973,7 @@ win.webContents.debugger.sendCommand('Network.enable'); * `event` Event * `method` String - 메서드 이름. -* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 - 매개변수 +* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 인수 디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다. diff --git a/docs-translations/ko-KR/api/web-frame.md b/docs-translations/ko-KR/api/web-frame.md index 69e563d..fdc68d2 100644 --- a/docs-translations/ko-KR/api/web-frame.md +++ b/docs-translations/ko-KR/api/web-frame.md @@ -103,4 +103,40 @@ ServiceWorker의 등록과 fetch API를 사용할 수 있도록 지원합니다. 브라우저 윈도우에서 어떤 `requestFullScreen` 같은 HTML API는 사용자의 승인이 필요합니다. `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 diff --git a/docs-translations/ko-KR/tutorial/security.md b/docs-translations/ko-KR/tutorial/security.md index 2466efe..5d16d86 100644 --- a/docs-translations/ko-KR/tutorial/security.md +++ b/docs-translations/ko-KR/tutorial/security.md @@ -1,16 +1,17 @@ # 보안, 네이티브 호환성, 그리고 신뢰성 웹 개발자로써, 우리는 일반적으로 브라우저의 강력한 웹 보안을 잘 이용해왔습니다 - 작성한 -코드에 관련된 보안 문제는 아주 적었습니다. 웹 사이트에 대해 상당히 제한된 권한과 기능에 -의존해왔습니다 - 그리고 사용자들이 새로운 보안 위협에 대해 발 빠르게 대응할 수 있는 -아주 커다란 팀의 엔지니어들에 의해 만들어진 브라우저를 마음 놓고 즐길 것이라고 -믿어왔습니다. +코드에 관련된 보안 문제는 아주 적었습니다. 우리는 웹 사이트의 샌드박스안에서 허용된 +상당히 제한된 권한과 기능에 의존해왔으며, 우리는 새로운 보안 위협에 대해 발 빠르게 +대응할 수 있는 엔지니어들로 이루어진 커다란 팀으로부터 만들어진 브라우저를 사용자들이 +마음 놓고 즐길 것이라고 믿어왔습니다. -하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 이해하는 -것이 중요합니다. Electron은 웹 기술을 사용하여 강력한 데스크톱 어플리케이션을 만들 수 -있도록 해줍니다. 가장 핵심 기능은 바로 제한된 웹 사이트의 기능을 커버할 정도로 완전한 -네이티브 어플리케이션과 동일한 기능을 하는 강력한 소프트웨어를 만들 수 있는 능력입니다. -하지만 코드에 부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 수 있습니다. +하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 기억해 +두어야 합니다. Electron은 친근한 웹 기술을 사용하여 풍부한 기능의 데스크톱 +어플리케이션을 만들 수 있도록 해주지만 그만큼 코드가 더 큰 힘을 사용합니다. +JavaScript가 파일 시스템, 유저 쉘, 그외 여러가지 기능에 접근할 수 있습니다. 이러한 +능력은 높은 퀄리티를 가진 네이티브 어플리케이션을 개발할 수 있도록 해주지만 코드에 +부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 가능성이 있습니다. 이를 염두해두고, 신뢰할 수 없는 출처의 임의의 콘텐츠를 표시할 때 Electron에서 자체적으로 처리하지 않는 심각한 보안 문제를 야기할 수 있다는 점을 주의해야 합니다. @@ -55,6 +56,10 @@ request와 기여는 언제나 환영합니다. (`webPreferences` 사용) * `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`로 설정하지 마세요. * `allowRunningInsecureContent`를 `true`로 설정하지 마세요. * 무엇을 하고 있는지 확실히 알고 있지않는 이상 `experimentalFeatures` 또는 diff --git a/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md b/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md index baa5dd7..e4d333c 100644 --- a/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md +++ b/docs-translations/ko-KR/tutorial/using-selenium-and-webdriver.md @@ -7,8 +7,46 @@ > 등의 작업을 수행할 수 있습니다. ChromeDriver는 Chromium의 WebDriver wire 프로토콜 > 스텐드얼론 서버 구현입니다. Chromium 과 WebDriver 팀 멤버에 의해 개발되었습니다. -Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을 찾을 수 있도록 해야 -하며 Electron은 Chrome 브라우저와 비슷하다는 점을 기억해야 합니다. +## Spectron 설정하기 + +[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 설정하기 @@ -20,7 +58,8 @@ Electron에서 `chromedriver`를 사옹하려면 드라이버에서 Electron을 먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다: ```bash -$ ./chromedriver +$ npm install electron-chromedriver +$ ./node_modules/.bin/chromedriver Starting ChromeDriver (v2.10.291558) on port 9515 Only local connections are allowed. ``` @@ -76,7 +115,8 @@ node 패키지입니다. 먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다: ```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 Only local connections are allowed. ``` @@ -127,3 +167,4 @@ client 디렉터리로 복사하는 불필요한 과정을 생략할 수 있습니다. [chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/ +[spectron]: http://electron.atom.io/spectron -- 2.7.4