접근하는 예시입니다:
```javascript
-const BrowserWindow = require('electron').BrowserWindow;
+const {BrowserWindow} = require('electron');
let win = new BrowserWindow({width: 800, height: 1500});
win.loadURL('http://github.com');
이 이벤트는 `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'
* `issuerName` String - 인증서 발급자 이름
* `callback` Function
-클라이언트 인증이 요청되었을 때 발생하는 이벤트 입니다.
+클라이언트 인증이 요청되었을 때 발생하는 이벤트입니다.
사용법은 [`app`의 `select-client-certificate` 이벤트](app.md#event-select-client-certificate)와
같습니다.
* `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`,
`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`객체는 다음과 같은 인스턴스 메서드들을 가지고 있습니다.
```
```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) => {
* `detach` Boolean - 새 창에서 개발자 도구를 엽니다.
* `mode` String - 개발자 도구 표시 상태를 지정합니다. 옵션은 "right", "bottom",
"undocked", "detach"가 될 수 있습니다. 기본값은 마지막 표시 상태를
- ì\82¬ì\9a©í\95©ë\8b\88ë\8b¤. `undocked` 모ë\93\9cì\97\90ì\84 ë\8b¤ì\8b\9c ë\8f\85ì\9d\84 할 수 있습니다. 하지만 `detach`
+ ì\82¬ì\9a©í\95©ë\8b\88ë\8b¤. `undocked` 모ë\93\9cì\97\90ì\84 ë\8b¤ì\8b\9c ë\8f\84í\82¹할 수 있습니다. 하지만 `detach`
모드에선 할 수 없습니다.
개발자 도구를 엽니다.
* `x` Integer
* `y` Integer
-(`x`, `y`)ì\9c\84ì¹\98ì\9d\98 ì\97\98ë \88먼í\8a¸를 조사합니다.
+(`x`, `y`)ì\9c\84ì¹\98ì\9d\98 ì\9a\94ì\86\8c를 조사합니다.
### `webContents.inspectServiceWorker()`
<body>
<script>
require('electron').ipcRenderer.on('ping', (event, message) => {
- console.log(message); // Prints "whoooooooh!"
+ console.log(message); // "whoooooooh!" 출력
});
</script>
</body>
### `webContents.sendInputEvent(event)`
* `event` Object
- * `type` String (**required**) - 이벤트의 타입. 다음 값들을 사용할 수 있습니다:
+ * `type` String (**required**) - 이벤트의 종류. 다음 값들을 사용할 수 있습니다:
`mouseDown`, `mouseUp`, `mouseEnter`, `mouseLeave`, `contextMenu`,
`mouseWheel`, `mouseMove`, `keyDown`, `keyUp`, `char`.
* `modifiers` Array - 이벤트의 수정자(modifier)들에 대한 배열. 다음 값들을 포함
### `webContents.savePage(fullPath, saveType, callback)`
* `fullPath` String - 전체 파일 경로.
-* `saveType` String - 저장 타입을 지정합니다.
+* `saveType` String - 저장 종류를 지정합니다.
* `HTMLOnly` - 페이지의 HTML만 저장합니다.
* `HTMLComplete` - 페이지의 완성된 HTML을 저장합니다.
* `MHTML` - 페이지의 완성된 HTML을 MHTML로 저장합니다.
* `method` String - 메서드 이름, 반드시 원격 디버깅 프로토콜에 의해 정의된 메서드중
하나가 됩니다.
-* `commandParams` Object (optional) - 요청 매개변수를 표현한 JSON 객체.
+* `commandParams` Object (optional) - 요청 인수를 표현한 JSON 객체.
* `callback` Function (optional) - 응답
* `error` Object - 커맨드의 실패를 표시하는 에러 메시지.
* `result` Object - 원격 디버깅 프로토콜에서 커맨드 설명의 'returns' 속성에 의해
* `event` Event
* `method` String - 메서드 이름.
-* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트
- 매개변수
+* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 인수
디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다.
# 보안, 네이티브 호환성, 그리고 신뢰성
웹 개발자로써, 우리는 일반적으로 브라우저의 강력한 웹 보안을 잘 이용해왔습니다 - 작성한
-ì½\94ë\93\9cì\97\90 ê´\80ë ¨ë\90\9c ë³´ì\95\88 문ì \9cë\8a\94 ì\95\84주 ì \81ì\97\88ì\8aµë\8b\88ë\8b¤. ì\9b¹ ì\82¬ì\9d´í\8a¸ì\97\90 ë\8c\80í\95´ ì\83\81ë\8b¹í\9e\88 ì \9cí\95\9cë\90\9c ê¶\8cí\95\9cê³¼ 기ë\8a¥ì\97\90
-ì\9d\98ì¡´í\95´ì\99\94ì\8aµë\8b\88ë\8b¤ - ê·¸ë¦¬ê³ ì\82¬ì\9a©ì\9e\90ë\93¤ì\9d´ ì\83\88ë¡\9cì\9a´ ë³´ì\95\88 ì\9c\84í\98\91ì\97\90 ë\8c\80í\95´ ë°\9c ë¹ ë¥´ê²\8c ë\8c\80ì\9d\91í\95 ì\88\98 ì\9e\88ë\8a\94
-아주 커다란 팀의 엔지니어들에 의해 만들어진 브라우저를 마음 놓고 즐길 것이라고
-믿어왔습니다.
+ì½\94ë\93\9cì\97\90 ê´\80ë ¨ë\90\9c ë³´ì\95\88 문ì \9cë\8a\94 ì\95\84주 ì \81ì\97\88ì\8aµë\8b\88ë\8b¤. ì\9a°ë¦¬ë\8a\94 ì\9b¹ ì\82¬ì\9d´í\8a¸ì\9d\98 ì\83\8cë\93\9cë°\95ì\8a¤ì\95\88ì\97\90ì\84\9c í\97\88ì\9a©ë\90\9c
+ì\83\81ë\8b¹í\9e\88 ì \9cí\95\9cë\90\9c ê¶\8cí\95\9cê³¼ 기ë\8a¥ì\97\90 ì\9d\98ì¡´í\95´ì\99\94ì\9c¼ë©°, ì\9a°ë¦¬ë\8a\94 ì\83\88ë¡\9cì\9a´ ë³´ì\95\88 ì\9c\84í\98\91ì\97\90 ë\8c\80í\95´ ë°\9c ë¹ ë¥´ê²\8c
+대응할 수 있는 엔지니어들로 이루어진 커다란 팀으로부터 만들어진 브라우저를 사용자들이
+ë§\88ì\9d\8c ë\86\93ê³ ì¦\90길 ê²\83ì\9d´ë\9d¼ê³ 믿ì\96´ì\99\94ì\8aµë\8b\88ë\8b¤.
-하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 이해하는
-것이 중요합니다. Electron은 웹 기술을 사용하여 강력한 데스크톱 어플리케이션을 만들 수
-있도록 해줍니다. 가장 핵심 기능은 바로 제한된 웹 사이트의 기능을 커버할 정도로 완전한
-네이티브 어플리케이션과 동일한 기능을 하는 강력한 소프트웨어를 만들 수 있는 능력입니다.
-하지만 코드에 부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 수 있습니다.
+하지만 Electron을 사용하여 작업한다면, Electron은 웹 브라우저가 아니라는 것을 기억해
+두어야 합니다. Electron은 친근한 웹 기술을 사용하여 풍부한 기능의 데스크톱
+어플리케이션을 만들 수 있도록 해주지만 그만큼 코드가 더 큰 힘을 사용합니다.
+JavaScript가 파일 시스템, 유저 쉘, 그외 여러가지 기능에 접근할 수 있습니다. 이러한
+능력은 높은 퀄리티를 가진 네이티브 어플리케이션을 개발할 수 있도록 해주지만 코드에
+부여된 추가적인 기능만큼 고유한 보안 문제가 발생할 가능성이 있습니다.
이를 염두해두고, 신뢰할 수 없는 출처의 임의의 콘텐츠를 표시할 때 Electron에서
자체적으로 처리하지 않는 심각한 보안 문제를 야기할 수 있다는 점을 주의해야 합니다.
(`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` 또는
> 등의 작업을 수행할 수 있습니다. 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 설정하기
먼저, `chromedriver` 바이너리를 다운로드 받고 실행합니다:
```bash
-$ ./chromedriver
+$ npm install electron-chromedriver
+$ ./node_modules/.bin/chromedriver
Starting ChromeDriver (v2.10.291558) on port 9515
Only local connections are allowed.
```
먼저, `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.
```
디렉터리로 복사하는 불필요한 과정을 생략할 수 있습니다.
[chrome-driver]: https://sites.google.com/a/chromium.org/chromedriver/
+[spectron]: http://electron.atom.io/spectron
projects / platform / framework / web / crosswalk-tizen.git / commitdiff