몇몇 GTK+3 데스크톱 환경에서만 작동합니다. 기본값은 `false`입니다.
* `transparent` Boolean - 윈도우 창을 [투명화](frameless-window.md)합니다. 기본값은
`false`입니다.
-* `type` String - 특정 플랫폼에만 적용되는 윈도우 창의 종류를 지정합니다. 기본적으로
- 이 속성이 `undefined`일 경우 표준 윈도우가 사용됩니다. 사용할 수 있는 창의 종류는
- 다음과 같습니다:
- * Linux의 경우: `desktop`, `dock`, `toolbar`, `splash`, `notification` 종류를
- 사용할 수 있습니다.
- * OS X의 경우: `desktop`, `textured` 종류를 사용할 수 있습니다. `textured` 종류는
- 창을 그라디언트 형태로 표현합니다 (`NSTexturedBackgroundWindowMask`) `desktop`
- 종류는 데스크탑 배경 레벨에 윈도우를 배치합니다 (`kCGDesktopWindowLevel - 1`).
- 참고로 이렇게 만들어진 윈도우는 포커스, 키보드, 마우스 이벤트를 받을 수 없습니다.
- 하지만 편법으로 `globalShortcut`을 통해 키 입력을 받을 수 있습니다.
+* `type` String - 특정 플랫폼에만 적용되는 윈도우 창의 종류를 지정합니다. 기본값은
+ 일반 윈도우 입니다. 사용할 수 있는 창의 종류는 아래를 참고하세요.
* `standardWindow` Boolean - OS X의 표준 윈도우를 텍스쳐 윈도우 대신 사용합니다.
기본 값은 `true`입니다.
-* `titleBarStyle` String, OS X - 윈도우 타이틀 바 스타일을 지정합니다. 이 속성은
- OS X 10.10 Yosemite 이후 버전만 지원합니다. 다음 3가지 종류의 값을 사용할 수
- 있습니다:
- * `default` 또는 미지정: 표준 Mac 회색 불투명 스타일을 사용합니다.
- * `hidden`: 타이틀 바를 숨기고 컨텐츠 전체를 윈도우 크기에 맞춥니다.
- 타이틀 바는 없어지지만 표준 창 컨트롤 ("신호등 버튼")은 왼쪽 상단에 유지됩니다.
- * `hidden-inset`: `hidden` 타이틀 바 속성과 함께 신호등 버튼이 윈도우 모서리로부터
- 약간 더 안쪽으로 들어가도록합니다.
+* `titleBarStyle` String, OS X - 윈도우 타이틀 바 스타일을 지정합니다. 자세한 사항은
+ 아래를 참고하세요.
* `webPreferences` Object - 웹 페이지 기능을 설정합니다. 사용할 수 있는 속성은
- 다음과 같습니다:
- * `nodeIntegration` Boolean - node(node.js) 통합 여부. 기본값은 `true`입니다.
- * `preload` String - 스크립트를 지정하면 페이지 내의 다른 스크립트가 작동하기 전에
- 로드됩니다. 여기서 지정한 스크립트는 node 통합 활성화 여부에 상관없이 언제나 모든
- node API에 접근할 수 있습니다. 이 속성의 스크립트 경로는 절대 경로로 지정해야
- 합니다. node 통합이 비활성화되어있을 경우, preload 스크립트는 node의 global
- 심볼들을 다시 global 스코프로 다시 포함 시킬 수 있습니다.
- [여기](process.md#event-loaded)의 예제를 참고하세요.
- * `partition` String - 페이지에서 사용할 세션을 지정합니다. 만약 `partition`이
- `persist:`로 시작하면 페이지는 지속성 세션을 사용하며 다른 모든 앱 내의
- 페이지에서 같은 `partition`을 사용할 수 있습니다. 만약 `persist:` 접두어로
- 시작하지 않으면 페이지는 인-메모리 세션을 사용합니다. 여러 페이지에서 같은
- `partition`을 지정하면 같은 세션을 공유할 수 있습니다. `partition`을 지정하지
- 않으면 어플리케이션의 기본 세션이 사용됩니다.
- * `zoomFactor` Number - 페이지의 기본 줌 값을 지정합니다. 예를 들어 `300%`를
- 표현하려면 `3.0`으로 지정합니다. 기본값은 `1.0`입니다.
- * `javascript` Boolean - 자바스크립트를 활성화합니다. 기본값은 `false`입니다.
- * `webSecurity` Boolean - `false`로 지정하면 same-origin 정책을 비활성화합니다.
- (이 속성은 보통 사람들에 의해 웹 사이트를 테스트할 때 사용합니다) 그리고
- `allowDisplayingInsecureContent`와 `allowRunningInsecureContent` 두 속성을
- 사용자가 `true`로 지정되지 않은 경우 `true`로 지정합니다. 기본값은
- `true`입니다.
- * `allowDisplayingInsecureContent` Boolean - https 페이지에서 http URL에서
- 로드한 이미지 같은 리소스를 표시할 수 있도록 허용합니다. 기본값은 `false`입니다.
- * `allowRunningInsecureContent` Boolean - https 페이지에서 http URL에서 로드한
- JavaScript와 CSS 또는 플러그인을 실행시킬 수 있도록 허용합니다. 기본값은
- `false`입니다.
- * `images` Boolean - 이미지 지원을 활성화합니다. 기본값은 `true`입니다.
- * `textAreasAreResizable` Boolean - HTML TextArea 요소의 크기를 재조정을
- 허용합니다. 기본값은 `true`입니다.
- * `webgl` Boolean - WebGL 지원을 활성화합니다. 기본값은 `true`입니다.
- * `webaudio` Boolean - WebAudio 지원을 활성화합니다. 기본값은 `true`입니다.
- * `plugins` Boolean - 플러그인 활성화 여부를 지정합니다. 기본값은 `false`입니다.
- * `experimentalFeatures` Boolean - Chrome의 실험적인 기능을 활성화합니다.
- 기본값은 `false`입니다.
- * `experimentalCanvasFeatures` Boolean - Chrome의 실험적인 캔버스(canvas) 기능을
- 활성화합니다. 기본값은 `false`입니다.
- * `overlayScrollbars` Boolean - 오버레이 스크롤바를 활성화합니다. 기본값은
- `false`입니다.
- * `sharedWorker` Boolean - SharedWorker 기능을 활성화합니다. 기본값은
- `false`입니다.
- * `directWrite` Boolean - Windows에서 폰트 랜더링을 위해 DirectWrite를
- 사용하는지를 지정합니다. 기본값은 `true`입니다.
- * `pageVisibility` Boolean - 현재 윈도우의 가시성을 반영하는 대신 페이지가
- visible 또는 hidden 중 지정된 상태를 계속 유지하도록 합니다. 이 속성을 `true`로
- 지정하면 DOM 타이머의 스로틀링을 방지할 수 있습니다. 기본값은 `false`입니다.
+ 아래를 참고하세요.
+
+`type` 속성에서 사용할 수 있는 값과 동작은 다음과 같으며, 플랫폼에 따라 다릅니다:
+
+* Linux의 경우, `desktop`, `dock`, `toolbar`, `splash`, `notification` 종류를
+ 사용할 수 있습니다.
+* OS X의 경우, `desktop`, `textured` 종류를 사용할 수 있습니다.
+ * `textured`는 창에 메탈 그라디언트 외관(`NSTexturedBackgroundWindowMask`)을
+ 설정합니다.
+ * `desktop`은 데스크탑 배경 레벨(`kCGDesktopWindowLevel - 1`)에 윈도우를
+ 배치합니다. 참고로 이렇게 만들어진 윈도우는 포커스, 키보드, 마우스 이벤트를 받을
+ 수 없습니다. 하지만 편법으로 `globalShortcut`을 통해 키 입력을 받을 수 있습니다.
+
+`titleBarStyle` 속성은 OS X 10.10 Yosemite 이후 버전만 지원하며, 다음 3가지 종류의
+값을 사용할 수 있습니다:
+
+* `default` 또는 미지정: 표준 Mac 회색 불투명 스타일을 사용합니다.
+* `hidden`: 타이틀 바를 숨기고 컨텐츠 전체를 윈도우 크기에 맞춥니다.
+ 타이틀 바는 없어지지만 표준 창 컨트롤 ("신호등 버튼")은 왼쪽 상단에 유지됩니다.
+* `hidden-inset`: `hidden` 타이틀 바 속성과 함께 신호등 버튼이 윈도우 모서리로부터
+ 약간 더 안쪽으로 들어가도록합니다.
+
+`webPreferences` 속성은 다음과 같은 속성을 가질 수 있습니다:
+
+* `nodeIntegration` Boolean - node(node.js) 통합 여부. 기본값은 `true`입니다.
+* `preload` String - 스크립트를 지정하면 페이지 내의 다른 스크립트가 작동하기 전에
+ 로드됩니다. 여기서 지정한 스크립트는 node 통합 활성화 여부에 상관없이 언제나 모든
+ node API에 접근할 수 있습니다. 이 속성의 스크립트 경로는 절대 경로로 지정해야
+ 합니다. node 통합이 비활성화되어있을 경우, preload 스크립트는 node의 global
+ 심볼들을 다시 global 스코프로 다시 포함 시킬 수 있습니다.
+ [여기](process.md#event-loaded)의 예제를 참고하세요.
+* `partition` String - 페이지에서 사용할 세션을 지정합니다. 만약 `partition`이
+ `persist:`로 시작하면 페이지는 지속성 세션을 사용하며 다른 모든 앱 내의
+ 페이지에서 같은 `partition`을 사용할 수 있습니다. 만약 `persist:` 접두어로
+ 시작하지 않으면 페이지는 인-메모리 세션을 사용합니다. 여러 페이지에서 같은
+ `partition`을 지정하면 같은 세션을 공유할 수 있습니다. `partition`을 지정하지
+ 않으면 어플리케이션의 기본 세션이 사용됩니다.
+* `zoomFactor` Number - 페이지의 기본 줌 값을 지정합니다. 예를 들어 `300%`를
+ 표현하려면 `3.0`으로 지정합니다. 기본값은 `1.0`입니다.
+* `javascript` Boolean - 자바스크립트를 활성화합니다. 기본값은 `false`입니다.
+* `webSecurity` Boolean - `false`로 지정하면 same-origin 정책을 비활성화합니다.
+ (이 속성은 보통 사람들에 의해 웹 사이트를 테스트할 때 사용합니다) 그리고
+ `allowDisplayingInsecureContent`와 `allowRunningInsecureContent` 두 속성을
+ 사용자가 `true`로 지정되지 않은 경우 `true`로 지정합니다. 기본값은
+ `true`입니다.
+* `allowDisplayingInsecureContent` Boolean - https 페이지에서 http URL에서
+ 로드한 이미지 같은 리소스를 표시할 수 있도록 허용합니다. 기본값은 `false`입니다.
+* `allowRunningInsecureContent` Boolean - https 페이지에서 http URL에서 로드한
+ JavaScript와 CSS 또는 플러그인을 실행시킬 수 있도록 허용합니다. 기본값은
+ `false`입니다.
+* `images` Boolean - 이미지 지원을 활성화합니다. 기본값은 `true`입니다.
+* `textAreasAreResizable` Boolean - HTML TextArea 요소의 크기를 재조정을
+ 허용합니다. 기본값은 `true`입니다.
+* `webgl` Boolean - WebGL 지원을 활성화합니다. 기본값은 `true`입니다.
+* `webaudio` Boolean - WebAudio 지원을 활성화합니다. 기본값은 `true`입니다.
+* `plugins` Boolean - 플러그인 활성화 여부를 지정합니다. 기본값은 `false`입니다.
+* `experimentalFeatures` Boolean - Chrome의 실험적인 기능을 활성화합니다.
+ 기본값은 `false`입니다.
+* `experimentalCanvasFeatures` Boolean - Chrome의 실험적인 캔버스(canvas) 기능을
+ 활성화합니다. 기본값은 `false`입니다.
+* `directWrite` Boolean - Windows에서 폰트 랜더링을 위해 DirectWrite를
+ 사용하는지를 지정합니다. 기본값은 `true`입니다.
+* `blinkFeatures` String - `CSSVariables,KeyboardEventKey`같은 `,`로 구분된
+ 기능 문자열들의 리스트입니다. 지원하는 전체 기능 문자열들은
+ [setFeatureEnabledFromString][blink-feature-string] 함수에서 찾을 수 있습니다.
## Events
* `ignore` Boolean
윈도우에서 일어나는 모든 마우스 이벤트를 무시합니다.
+
+[blink-feature-string]: https://code.google.com/p/chromium/codesearch#chromium/src/out/Debug/gen/blink/platform/RuntimeEnabledFeatures.cpp&sq=package:chromium&type=cs&l=527
--- /dev/null
+# Electron FAQ
+
+## 언제 Electron이 최신 버전의 Chrome으로 업그레이드 되나요?
+
+Electron의 Chrome 버전은 보통 새로운 Chrome 안정 버전이 릴리즈 된 이후 1주 내지 2주
+내로 업데이트됩니다.
+
+또한 우리는 크롬의 안정된 채널만을 이용합니다, 만약 중요한 수정이 베타 또는 개발 채널인
+경우, 우리는 해당 버전 대신 이전 버전을 다시 사용합니다.
+
+## Electron은 언제 최신 버전의 Node.js로 업그레이드 하나요?
+
+새로운 버전의 Node.js가 릴리즈 되면, 우리는 보통 Electron을 업그레이드 하기 전에 한
+달 정도 대기합니다. 이렇게 하면 새로운 Node.js 버전을 업데이트 함으로써 발생하는
+버그들을 피할 수 있습니다. 이러한 상황은 자주 발생합니다.
+
+Node.js의 새로운 기능은 보통 V8 업그레이드에서 가져옵니다. Electron은 Chrome
+브라우저에 탑재된 V8을 사용하고 있습니다. 눈부신 새로운 Node.js 버전의 자바스크립트
+기능은 보통 이미 Electron에 있습니다.
+
+## 제작한 어플리케이션의 윈도우/트레이가 몇 분 후에나 나타납니다.
+
+이러한 문제가 발생하는 이유는 보통 윈도우/트레이를 담은 변수에 가비지 컬렉션이 작동해서
+그럴 가능성이 높습니다.
+
+이러한 문제를 맞닥뜨린 경우 다음 문서를 읽어보는 것이 좋습니다:
+
+* [메모리 관리][memory-management]
+* [변수 스코프][variable-scope]
+
+만약 빠르게 고치고 싶다면, 다음과 같이 변수를 전역 변수로 만드는 방법이 있습니다:
+
+```javascript
+app.on('ready', function() {
+ var tray = new Tray('/path/to/icon.png');
+})
+```
+
+를 이렇게:
+
+```javascript
+var tray = null;
+app.on('ready', function() {
+ tray = new Tray('/path/to/icon.png');
+})
+```
+
+## Electron에서 jQuery/RequireJS/Meteor/AngularJS를 사용할 수 없습니다.
+
+Node.js가 Electron에 합쳐졌기 때문에, DOM에 `module`, `exports`, `require` 같은
+몇 가지 심볼들이 추가됬습니다. 따라서 같은 이름의 심볼을 사용하는 몇몇 라이브러리들과
+충돌이 발생할 수 있습니다.
+
+이러한 문제를 해결하려면, Electron에서 node 포함을 비활성화시켜야 합니다:
+
+```javascript
+// 메인 프로세스에서.
+var mainWindow = new BrowserWindow({
+ webPreferences: {
+ nodeIntegration: false
+ }
+});
+```
+
+하지만 Node.js의 기능과 Electron API를 유지하고 싶다면 페이지에 다른 라이브러리를
+추가하기 전에 심볼들의 이름을 변경해야 합니다:
+
+```html
+<head>
+<script>
+window.nodeRequire = require;
+delete window.require;
+delete window.exports;
+delete window.module;
+</script>
+<script type="text/javascript" src="jquery.js"></script>
+</head>
+```
+
+[memory-management]: https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management
+[variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
node-inspector 콘솔 내에서 메인 프로세스의 `process` 객체를 탐색할 경우 크래시가
발생할 수 있습니다.
-### 1. [node-inspector][node-inspector] 서버 시작
+### 1. [node-gyp 필수 도구][node-gyp-required-tools]를 설치했는지 확인
+
+### 2. [node-inspector][node-inspector] 설치
+
+```bash
+$ npm install node-inspector
+```
+
+### 3. 패치된 버전의 `node-pre-gyp` 설치
+
+```bash
+$ npm install git+https://git@github.com/enlight/node-pre-gyp.git#detect-electron-runtime-in-find
+```
+
+### 4. Electron용 `node-inspector` `v8` 모듈을 재 컴파일 (target을 사용하는 Electron의 버전에 맞춰 변경)
```bash
-$ node-inspector
+$ node_modules/.bin/node-pre-gyp --target=0.36.2 --runtime=electron --fallback-to-build --directory node_modules/v8-debug/ --dist-url=https://atom.io/download/atom-shell reinstall
+$ node_modules/.bin/node-pre-gyp --target=0.36.2 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall
```
-### 2. Electron용 디버그 모드 활성화
+또한 [네이티브 모듈을 사용하는 방법](how-to-install-native-modules) 문서도 참고해보세요.
+
+### 5. Electron 디버그 모드 활성화
다음과 같이 debung 플래그로 Electron을 실행할 수 있습니다:
$ electron --debug-brk=5858 your/app
```
-### 3. 디버그 UI 로드
+### 5. Electron을 사용하는 [node-inspector][node-inspector] 시작
+
+```bash
+$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js
+```
+
+### 6. 디버거 UI 로드
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 주소에
-접속합니다. (기본포트 또는 지정한 포트로 접속)
+접속합니다. (기본 포트 또는 지정한 포트로 접속) 엔트리의 라인이 debug-brk로 시작하는
+경우 일시정지 버튼을 클릭해야 할 수도 있습니다.
[node-inspector]: https://github.com/node-inspector/node-inspector
+[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation
+[how-to-install-native-modules]: using-native-node-modules.md#네이티브-모듈을-설치하는-방법
projects / platform / framework / web / crosswalk-tizen.git / commitdiff