Merge pull request #5604 from preco21/korean-docs-5

docs: Update Korean docs as upstream
This commit is contained in:
Cheng Zhao 2016-05-19 10:27:03 +00:00
commit 590c2bcf23
20 changed files with 391 additions and 91 deletions

View file

@ -21,8 +21,10 @@ Electron에 대해 자주 묻는 질문이 있습니다. 이슈를 생성하기
* [지원하는 플랫폼](tutorial/supported-platforms.md)
* [보안](tutorial/security.md)
* [Electron 버전 관리](tutorial/electron-versioning.md)
* [어플리케이션 배포](tutorial/application-distribution.md)
* [Mac 앱스토어 어플리케이션 제출 가이드](tutorial/mac-app-store-submission-guide.md)
* [Windows 스토어 가이드](tutorial/windows-store-guide.md)
* [어플리케이션 패키징](tutorial/application-packaging.md)
* [네이티브 Node 모듈 사용하기](tutorial/using-native-node-modules.md)
* [메인 프로세스 디버깅하기](tutorial/debugging-main-process.md)

View file

@ -39,6 +39,7 @@ Linux와 Windows에서는 `Command`키가 없으므로 작동하지 않습니다
* `~`, `!`, `@`, `#`, `$`, etc 와 같은 구두점 기호들
* `Plus`
* `Space`
* `Tab`
* `Backspace`
* `Delete`
* `Insert`

View file

@ -24,7 +24,7 @@ Windows, Linux 운영체제에서의 `will-finish-launching` 이벤트는 `ready
`open-file``open-url` 이벤트 리스너를 설정하고 crash reporter와 auto updater를
시작합니다.
대부분의 경우, 모든 것을 `ready` 이벤트 핸들러 해결해야 합니다.
대부분의 경우, 모든 것을 `ready` 이벤트 핸들러 안에서 해결해야 합니다.
### Event: 'ready'
@ -34,8 +34,9 @@ Electron이 초기화를 끝냈을 때 발생하는 이벤트입니다.
모든 윈도우가 종료되었을 때 발생하는 이벤트입니다.
이 이벤트는 어플리케이션이 완전히 종료되지 않았을 때만 발생합니다.
만약 사용자가 `Cmd + Q`를 입력했거나 개발자가 `app.quit()`를 호출했다면,
만약 이 이벤트를 구독하지 않은 상태로 모든 윈도우가 닫혔을 때의 기본 동작은 앱을
종료하는 것입니다. 하지만, 이 이벤트를 구독하면, 앱을 종료할지 다른 일을 할지 제어할
수 있습니다. 만약 사용자가 `Cmd + Q`를 입력했거나 개발자가 `app.quit()`를 호출했다면,
Electron은 먼저 모든 윈도우의 종료를 시도하고 `will-quit` 이벤트를 발생시킵니다.
그리고 `will-quit` 이벤트가 발생했을 땐 `window-all-closed` 이벤트가 발생하지
않습니다.
@ -63,7 +64,7 @@ Returns:
모든 윈도우들이 종료되고 어플리케이션이 종료되기 시작할 때 발생하는 이벤트입니다.
`event.preventDefault()` 호출을 통해 어플리케이션의 종료를 방지할 수 있습니다.
`will-quit``window-all-closed` 이벤트의 차이점을 확인하려면 `window-all-close`
`will-quit``window-all-closed` 이벤트의 차이점을 확인하려면 `window-all-closed`
이벤트의 설명을 참고하세요.
### Event: 'quit'

View file

@ -26,7 +26,7 @@ OS X에선 `auto-updater` 모듈이 [Squirrel.Mac][squirrel-mac]를 기반으로
서버 사이드 요구 사항은 [서버 지원][server-support]을 참고하세요.
**참고:** Mac OS X에서 자동 업데이트를 지원하려면 반드시 사인이 되어있어야 합니다.
이것은 `Squirrel.Mac`의 요구사항입니다.
이것은 `Squirrel.Mac`의 요구 사항입니다.
### Windows
@ -34,6 +34,11 @@ Windows에선 `auto-updater` 모듈을 사용하기 전에 어플리케이션을
설치해야 합니다. [grunt-electron-installer][installer]를 사용하여 어플리케이션
인스톨러를 만드는 것을 권장합니다.
Windows에선 `autoUpdater` 모듈을 사용하기 전에 사용자의 장치에 어플리케이션을
설치해야 합니다. 따라서 [electron-winstaller][installer-lib] 모듈이나
[grunt-electron-installer][installer] 패키지를 사용하여 어플리케이션 인스톨러를
만드는 것을 권장합니다.
Squirrel로 생성된 인스톨러는 [Application User Model ID][app-user-model-id]와 함께
`com.squirrel.PACKAGE_ID.YOUR_EXE_WITHOUT_DOT_EXE`으로 형식화된 바로가기 아이콘을
생성합니다. `com.squirrel.slack.Slack``com.squirrel.code.Code`가 그 예시입니다.
@ -108,6 +113,7 @@ Returns:
[server-support]: https://github.com/Squirrel/Squirrel.Mac#server-support
[squirrel-windows]: https://github.com/Squirrel/Squirrel.Windows
[installer]: https://github.com/electron/grunt-electron-installer
[installer-lib]: https://github.com/electron/windows-installer
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
[electron-release-server]: https://github.com/ArekSredzki/electron-release-server
[squirrel-updates-server]: https://github.com/Aluxian/squirrel-updates-server

View file

@ -27,6 +27,8 @@ const {dialog} = require('electron').remote;
* `options` Object
* `title` String
* `defaultPath` String
* `buttonLabel` String - 확인 버튼을 위한 커스텀 라벨이며, 빈칸으로 둘 경우 기본
라벨이 사용됩니다.
* `filters` Array
* `properties` Array - 대화 상자가 사용할 기능(모드)이 담긴 배열입니다.
다음을 포함할 수 있습니다: `openFile`, `openDirectory`, `multiSelections`,
@ -71,6 +73,8 @@ const {dialog} = require('electron').remote;
* `options` Object
* `title` String
* `defaultPath` String
* `buttonLabel` String - 확인 버튼을 위한 커스텀 라벨이며, 빈칸으로 둘 경우 기본
라벨이 사용됩니다.
* `filters` Array
* `callback` Function (optional)
@ -90,7 +94,8 @@ const {dialog} = require('electron').remote;
* `type` String - `"none"`, `"info"`, `"error"`, `"question"`, `"warning"`
하나를 사용할 수 있습니다. Windows에선 따로 `icon`을 설정하지 않은 이상
"question"과 "info"는 같은 아이콘으로 표시됩니다.
* `buttons` Array - 버튼들의 라벨을 포함한 배열입니다.
* `buttons` Array - 버튼들의 라벨을 포함한 배열입니다. Windows에서 빈 배열로 둘
경우, "OK" 버튼 하나가 포함됩니다.
* `defaultId` Integer - 메시지 박스가 열렸을 때 기본적으로 선택될 버튼 배열의
버튼 인덱스입니다.
* `title` String - 대화 상자의 제목입니다. 몇몇 플랫폼에선 보이지 않을 수 있습니다.

View file

@ -50,8 +50,4 @@ Electron이 크래시되면, 크래시 정보 창을 표시합니다.
## `ELECTRON_FORCE_WINDOW_MENU_BAR` _Linux_
Linux의 글로벌 메뉴 막대를 사용하지 않습니다.
## `ELECTRON_HIDE_INTERNAL_MODULES`
`require('ipc')`같은 예전 방식의 빌트인 모듈을 비활성화합니다.
Linux의 전역 메뉴바를 사용하지 않습니다.

View file

@ -107,7 +107,7 @@ remote.getCurrentWindow().on('close', () => {
창을 새로고침 할 때마다 콜백을 새로 설치합니다. 게다가 이전 콜백이 제거되지 않고
계속해서 쌓이면서 메모리 누수가 발생합니다.
설상가상으로 이전에 등록된 콜백의 텍스트가 릴리즈 되고 난 후 (e.g. 페이지 새로고침)
설상가상으로 이전에 등록된 콜백의 텍스트가 릴리즈 되고 난 후 (e.g. 페이지 새로고침)
`close` 이벤트가 발생하면 예외가 발생하고 메인 프로세스가 작동 중지됩니다.
이러한 문제를 피하려면 렌더러 프로세스에서 메인 프로세스로 넘긴 함수의 참조를 사용 후

View file

@ -71,25 +71,5 @@ const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
```
## 이전 스타일의 빌트인 모듈 비활성화
v0.35.0 이전 버전에선 빌트인 모듈이 모두 `require('module-name')`같은 형식으로
사용되었습니다. 하지만 [많은 단점][issue-387]이 있기 때문에 현재 API가 변경되었습니다.
하지만 오래된 앱의 호환성 유지를 위해 아직 구 버전 API를 지원하고 있습니다.
완벽하게 모든 구 버전 API를 비활성화하려면 `ELECTRON_HIDE_INTERNAL_MODULES` 환경
변수를 설정하면 됩니다:
```javascript
process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true'
```
또는 `hideInternalModules` API를 사용해도 됩니다:
```javascript
require('electron').hideInternalModules();
```
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface
[destructuring-assignment]: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
[issue-387]: https://github.com/electron/electron/issues/387

View file

@ -14,11 +14,14 @@
* `event` String
* `callback` Function
OS X의 네이티브 알림을 구독하며, 해당하는 `event`가 발생하면 `callback`이 호출됩니다.
OS X의 네이티브 알림을 구독하며, 해당하는 `event`가 발생하면 `callback`
`callback(event, userInfo)` 형태로 호출됩니다. `userInfo`는 알림과 함께 전송되는
사용자 정보 딕셔너리를 포함하는 객체입니다.
구독자의 `id`가 반환되며 `event`를 구독 해제할 때 사용할 수 있습니다.
이 API는 후드에서 `NSDistributedNotificationCenter`를 구독하며, `event`에서 사용
가능한 값은 다음과 같습니다:
이 API는 후드에서 `NSDistributedNotificationCenter`를 구독하며, `event`의 예시
값은 다음과 같습니다:
* `AppleInterfaceThemeChangedNotification`
* `AppleAquaColorVariantChanged`

View file

@ -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', () => {
<body>
<script>
require('electron').ipcRenderer.on('ping', (event, message) => {
console.log(message); // Prints "whoooooooh!"
console.log(message); // "whoooooooh!" 출력
});
</script>
</body>
@ -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로 저장합니다.
@ -840,6 +895,10 @@ win.webContents.on('did-finish-load', () => {
`WebContents`객체들은 다음 속성들을 가지고 있습니다:
### `webContents.id`
이 WebContents의 유일 ID.
### `webContents.session`
이 webContents에서 사용하는 [session](session.md) 객체를 반환합니다.
@ -898,7 +957,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 +977,7 @@ win.webContents.debugger.sendCommand('Network.enable');
* `event` Event
* `method` String - 메서드 이름.
* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트
매개변수
* `params` Object - 원격 디버깅 프로토콜의 'parameters' 속성에서 정의된 이벤트 인수
디버깅 타겟이 관련 이벤트를 발생시킬 때 마다 발생하는 이벤트입니다.

View file

@ -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

View file

@ -11,6 +11,8 @@
상호작용이 비동기로 작동한다는 것을 의미합니다. 따라서 임베디드 콘텐츠로부터
어플리케이션을 안전하게 유지할 수 있습니다.
보안상의 이유로, `webview``nodeIntegration`이 활성화된 `BrowserWindow`에서만 사용할 수 있습니다.
## 예시
웹 페이지를 어플리케이션에 삽입하려면 `webview` 태그를 사용해 원하는 타겟 페이지에

View file

@ -8,7 +8,7 @@ Electron 소스 코드가 중단점을 통해 순차적으로 쉽게 디버깅
## 요구 사항
* **Electron의 디버그 빌드**: 가장 쉬운 방법은 보통
[Windows용 빌드 설명서](build-instructions-windows.md)에 명시된 요구사항과 툴을
[Windows용 빌드 설명서](build-instructions-windows.md)에 명시된 요구 사항과 툴을
사용하여 스스로 빌드하는 것입니다. 물론 직접 다운로드 받은 Electron 바이너리에도
디버거 연결 및 디버깅을 사용할 수 있지만, 실질적으로 디버깅이 까다롭게 고도의
최적화가 되어있음을 발견하게 될 것입니다: 인라인화, 꼬리 호출, 이외 여러 가지

View file

@ -60,7 +60,7 @@ Electron
## Git 서브 모듈 최신 버전으로 유지
Electron 저장소는 몇 가지 외부 벤더 종속성을 가지고 있으며 [/vendor](/vendor)
Electron 저장소는 몇 가지 외부 벤더 종속성을 가지고 있으며 [/vendor][vendor]
디렉터리에서 확인할 수 있습니다. 때때로 `git status`를 실행했을 때 아마 다음과 같은
메시지를 흔히 목격할 것입니다:
@ -84,3 +84,5 @@ git submodule update --init --recursive
[alias]
su = submodule update --init --recursive
```
[vendor]: https://github.com/electron/electron/tree/master/vendor

View file

@ -9,7 +9,7 @@ Electron의 Chrome 버전은 보통 새로운 Chrome 안정 버전이 릴리즈
Electron은 크롬이 사용하는 안정된 채널만을 이용합니다, 만약 중요한 수정이 베타 또는
개발 채널에 패치된 경우, 이전 버전의 채널로 롤백합니다.
자세한 내용은 [보안 설명](../tutorial/electron-security.md)을 참고하세요.
자세한 내용은 [보안 설명](../tutorial/security.md)을 참고하세요.
## Electron은 언제 최신 버전의 Node.js로 업그레이드 하나요?

View file

@ -0,0 +1,20 @@
# Electron 버전 관리
노련한 Node 개발자라면, `semver` (유의적 버전)에 대해 확실히 알고 있을 것입니다 -
그리고 제공된 의존성 관리 시스템은 고정된 버전 숫자 대신 견고한 가이드라인을 따릅니다.
Electron은 Node와 Chromium에 큰 의존성을 지니고 있는 만큼, 유의적 버전을 그대로
따르지 않습니다. 따라서 항상 Electron의 특정 버전을 참조해야 합니다.
버전 숫자는 다음과 같은 규칙으로 올라갑니다:
* Major: Electron API의 주요 변경 사항을 반영합니다 - 만약 `0.37.0`에서 `1.0.0`
업그레이드하는 경우, 어플리케이션을 업데이트해야 합니다.
* Minor: 주요 Chrome과 Node 버전의 업그레이드를 반영하거나; Electron의 중요한 변경
사항을 반영합니다 - 만약 `1.0.0`에서 `1.1.0`로 업그레이드하는 경우, 어플리케이션은
여전히 작동하겠지만, 약간의 업데이트가 필요할 수 있습니다.
* Patch: 새로운 기능과 버그 수정을 반영합니다 - 만약 `1.0.0`에서 `1.0.1`
업그레이드하는 경우, 어플리케이션은 잘 작동할 것입니다.
`electron-prebuilt`를 사용하고 있다면, Electron의 변경 사항을 확실하게 인지하고
개발자 스스로 업그레이드를 적용하기 위해 고정된 버전 숫자를 사용하는 것을 권장합니다.
(`^1.1.0` 대신 `1.1.0` 사용)

View file

@ -20,13 +20,32 @@ Electron은 v0.34.0 버전부터 앱 패키지를 Mac App Store(MAS)에 제출
앱 스토어에 어플리케이션을 제출하려면, 먼저 Apple로부터 인증서를 취득해야 합니다. 취득
방법은 웹에서 찾아볼 수 있는 [가이드][nwjs-guide]를 참고하면 됩니다.
### Team ID 얻기
어플리케이션에 서명하기 전에, 먼저 개발 계정의 Team ID를 알아야 합니다. Team ID를
알아보려면 [Apple Developer Center](https://developer.apple.com/account/)에
로그인한 후, 사이드바의 Membership을 클릭합니다. Team ID는 Membership Information
섹션의 팀 이름 밑에 위치합니다.
### 앱에 서명하기
Apple로부터 인증서를 취득했다면, [어플리케이션 배포](application-distribution.md)
문서에 따라 어플리케이션을 패키징한 후 어플리케이션에 서명 합니다. 이 절차는 기본적으로
다른 프로그램과 같습니다. 하지만 키는 Electron 종속성 파일에 각각 따로 서명 해야 합니다.
준비 작업이 끝난 후, [어플리케이션 배포](application-distribution.md) 문서에 따라
어플리케이션을 패키징한 후 어플리케이션에 서명 합니다.
첫번째, 다음 두 자격(plist) 파일을 준비합니다.
먼저, Team ID를 키로 가지고 있는 어플리케이션의 `Info.plist``ElectronTeamID` 키를
추가해야 합니다:
```xml
<plist version="1.0">
<dict>
...
<key>ElectronTeamID</key>
<string>TEAM_ID</string>
</dict>
</plist>
```
그리고, 다음 두 자격 파일을 준비해야 합니다.
`child.plist`:
@ -52,13 +71,16 @@ Apple로부터 인증서를 취득했다면, [어플리케이션 배포](applica
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.temporary-exception.sbpl</key>
<string>(allow mach-lookup (global-name-regex #"^org.chromium.Chromium.rohitfork.[0-9]+$"))</string>
<key>com.apple.security.application-groups</key>
<string>TEAM_ID.your.bundle.id</string>
</dict>
</plist>
```
그리고 다음 스크립트에 따라 어플리케이션에 서명합니다:
`TEAM_ID` 부분은 Team ID로 치환하고, `your.bundle.id` 부분은 어플리케이션의 Bundle
ID로 치환해야 합니다.
그리고 다음 스크립트를 통해 어플리케이션에 서명합니다:
```bash
#!/bin/bash
@ -101,22 +123,6 @@ productbuild --component "$APP_PATH" /Applications --sign "$INSTALLER_KEY" "$RES
사용할 수 있습니다. 참고로 업로드하기 전에 [레코드][create-record]를 만들었는지
확인해야 합니다.
### `temporary-exception`의 사용처 설명
어플리케이션을 샌드박싱할 때 `temporary-exception` 엔트리가 자격에 추가되며
[어플리케이션 샌드박스 임시 예외 적용][temporary-exception] 문서에 따라
왜 이 엔트리가 필요한지 설명해야 합니다:
> Note: If you request a temporary-exception entitlement, be sure to follow the
guidance regarding entitlements provided on the iTunes Connect website. In
particular, identify the entitlement and corresponding issue number in the App
Sandbox Entitlement Usage Information section in iTunes Connect and explain why
your app needs the exception.
아마 제출하려는 어플리케이션이 Chromium 브라우저를 기반으로 만들어졌고, 또한
멀티-프로세스 구조를 위해 Mach 포트를 사용하는 것도 설명해야 할 수 있습니다. 하지만
여전히 이러한 문제 때문에 어플리케이션 심사에 실패할 수 있습니다.
### 어플리케이션을 심사에 제출
위 과정을 마치면 [어플리케이션을 심사를 위해 제출][submit-for-review]할 수 있습니다.

View file

@ -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` 또는

View file

@ -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

View file

@ -0,0 +1,136 @@
# Windows 스토어 가이드
Windows 8부터, 오래되고 좋은 win32 실행 파일이 새로운 형제를 얻었습니다: Universial
Windows Platform. 새로운 `.appx` 포맷은 Cortana와 푸시 알림과 같은 다수의 강력한
API뿐만 아니라, Windows Store를 통해 설치와 업데이트를 단순화합니다.
Microsoft는 개발자들이 새로운 어플리케이션 모델의 좋은 기능들을 사용할 수 있도록
[Electron 어플리케이션을 `.appx` 패키지로 컴파일시키는 도구를 개발했습니다](http://github.com/catalystcode/electron-windows-store).
이 가이드는 이 도구를 사용하는 방법과 Electron AppX 패키지의 호환성과 한정 사항을
설명합니다.
## 기본 상식과 요구 사항
Windows 10 "기념일 업데이트"는 win32 `.exe` 바이너리를 가상화된 파일 시스템과
레지스트리를 함께 실행시킬 수 있도록 만들었습니다. 두 가지 모두 실행 중인
어플리케이션과 Windows 컨테이너 안의 인스톨러에 의해 컴파일되는 동안 만들어지며,
설치가 되는 동안 Windows가 확실하게 어떤 변경 사항이 운영 체제에 적용되는지 식별할 수
있도록 합니다. 가상 파일 시스템과 가상 레지스트리를 페어링 하는 실행 파일은 Windows가
원-클릭으로 설치와 삭제를 할 수 있도록 만듭니다.
더 나아가서, exe는 appx 모델 안에서 실행됩니다 - 이 말은 즉 Universial Windows
Platform에서 제공되는 수많은 API를 사용할 수 있다는 이야기입니다. 더 많은 기능을
사용하기 위해, Electron 어플리케이션은 숨겨진 UWP 앱과 페어링 하여 `exe`와 같이
실행할 수 있습니다 - 이렇게 헬퍼와 비슷하게 실행되고 작업을 실행하기 위해
백그라운드에서 작동하며, 푸시 알림을 받거나, 다른 UWP 어플리케이션과 통신하는 역할을
합니다.
현재 존재하는 Electron 어플리케이션을 컴파일 하려면, 다음 요구 사항을 충족해야 합니다:
* Windows 10 기념일 업데이트 - 엔터프라이즈 에디션 (이 업데이트는 빌드 번호가 14316
이거나, 더 높습니다 - 2016년 5월, Windows Insiders Preview 업데이트에 포함되어
있습니다)
* 64 비트 (x64) 머신과 프로세서, 하드웨어-보조 가상화, 그리고 Second Level Address
Translation (SLAT)
* Windows 10 SDK, [여기서](https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk)
다운로드할 수 있습니다.
* 최소 Node 4 버전 이상 (버전을 확인하려면 `node -v`를 실행하세요)
그리고 CLI에서 `electron-windows-store`를 설치합니다:
```
npm install -g electron-windows-store
```
## 설정과 준비
처음 CLI를 실행하기 전에, "Windows Desktop App Converter"를 먼저 설정해야 합니다.
이 작업은 약 몇 분 정도 소요됩니다. 하지만 걱정하지 않아도 됩니다 - 이 작업은 딱 한
번만 하면 됩니다. Desktop App Converter는 [여기](https://www.microsoft.com/en-us/download/details.aspx?id=51691)에서
다운로드받을 수 있고, `DesktopAppConverter.zip``BaseImage-14316.wim` 두 파일을
모두 받아야 합니다.
1. `DesktopAppConverter.zip`의 압축을 풉니다. 그다음 PowerShell을 관리자 권한으로
실행하고 압축을 푼 위치로 이동합니다. (실행하는 모든 명령에 "관리자 권한"을
적용하려면 `Set-ExecutionPolicy bypass`를 실행하면 됩니다)
2. 그리고, `.\DesktopAppConverter.ps1 -Setup -BaseImage .\BaseImage-14316.wim`
실행하여 Windows 베이스 이미지 (`BaseImage-14316.wim`)를 Desktop App Converter로
전달하고 설치를 진행합니다.
3. 만약 위 명령이 재시작을 요구하면, 기기를 재시작하고 위 명령을 다시 실행시키세요.
설치가 완료되면, 컴파일할 Electron 어플리케이션 경로로 이동합니다.
## Electron 어플리케이션 패키지 만들기
[electron-packager](https://github.com/electron-userland/electron-packager)를
사용하여 어플리케이션을 패키징합니다. (또는 비슷한 도구를 사용합니다) 마지막으로 최종
어플리케이션에선 `node_modules`가 필요 없으며 그저 어플리케이션의 크기를 늘릴 뿐이니
확실하게 지웠는지 확인합니다.
출력된 파일들은 대충 다음과 같아야 합니다:
```
├── Ghost.exe
├── LICENSE
├── content_resources_200_percent.pak
├── content_shell.pak
├── d3dcompiler_47.dll
├── ffmpeg.dll
├── icudtl.dat
├── libEGL.dll
├── libGLESv2.dll
├── locales
│ ├── am.pak
│ ├── ar.pak
│ ├── [...]
├── msvcp120.dll
├── msvcr120.dll
├── natives_blob.bin
├── node.dll
├── pdf.dll
├── resources
│ ├── app
│ └── atom.asar
├── snapshot_blob.bin
├── squirrel.exe
├── ui_resources_200_percent.pak
├── vccorlib120.dll
└── xinput1_3.dll
```
## 명령줄 도구 실행하기
관리자 권한의 PowerShell ("관리자 권한으로 실행")을 실행하고, 디렉토리 입력과 출력,
어플리케이션의 이름과 버전, 마지막으로 `node_modules`를 평탄화시키는 인수들과 함께
`electron-windows-store`를 실행합니다.
```
electron-windows-store `
--input-directory C:\myelectronapp `
--output-directory C:\output\myelectronapp `
--flatten true `
--package-version 1.0.0.0 `
--package-name myelectronapp
```
명령이 실행되면, 도구는 다음과 같이 작동합니다: Electron 어플리케이션을 입력으로 받고,
`node_modules`를 평탄화하고 어플리케이션을 `app.zip`으로 압축합니다. 그리고
인스톨러와 Windows Container를 사용하여, "확장된" AppX 패키지를 만듭니다 -
Windows Application Manifest (`AppXManifest.xml`)와 동시에 가상 파일 시스템과 가상
레지스트리를 포함하여 출력 폴더로 내보냅니다.
확장된 AppX 파일이 만들어지면, 도구는 Windows App Packager (`MakeAppx.exe`)를
사용하여 디스크의 파일로부터 단일-파일 AppX 패키지를 생성해냅니다. 최종적으로, 이
도구는 새 AppX 패키지에 서명하기 위해 컴퓨터에서 신뢰된 인증서를 만드는 데 사용할 수
있습니다. 서명된 AppX 패키지로, CLI는 자동으로 기기에 패키지를 설치할 수 있습니다.
## AppX 패키지 사용하기
Windows 기념일 업데이트 (코드네임 Windows 레드스톤)가 아직 모든 일반 사용자에게
배포되지 않았기 때문에, 올해까지는 어플리케이션을 Windows Store에 올릴 수 없을 것
입니다 - 하지만 개발자 또는 회사 환경에서 `Add-AppxPackage`
[PowerShell Cmdlet을 통해](https://technet.microsoft.com/en-us/library/hh856048.aspx)
기기에 어플리케이션을 설치할 수 있습니다.
또 다른 중요한 제약은 컴파일된 AppX 패키지는 여전히 win32 실행 파일이 담겨있다는
것입니다 - 따라서 Xbox, HoloLen, Phone에서 실행할 수 없습니다.