From 691ad97abe5eba51ca1a65163e3598bcb6d33570 Mon Sep 17 00:00:00 2001 From: tinydew4 Date: Tue, 1 Nov 2016 02:56:55 +0000 Subject: [PATCH] Update the korean docs up to '379c347' commit. Swap two debugging tutorials with each other. --- docs-translations/ko-KR/api/app.md | 9 +- docs-translations/ko-KR/api/net.md | 316 +++++++++++++++++++++ .../debugging-main-process-node-inspector.md | 144 ++++++++-- .../tutorial/debugging-main-process-vscode.md | 144 ++-------- .../ko-KR/tutorial/debugging-main-process.md | 4 + docs-translations/ko-KR/tutorial/quick-start.md | 22 +- 6 files changed, 478 insertions(+), 161 deletions(-) create mode 100644 docs-translations/ko-KR/api/net.md diff --git a/docs-translations/ko-KR/api/app.md b/docs-translations/ko-KR/api/app.md index f6b9124..df0a8e5 100644 --- a/docs-translations/ko-KR/api/app.md +++ b/docs-translations/ko-KR/api/app.md @@ -185,14 +185,7 @@ Returns: * `webContents` [WebContents](web-contents.md) * `url` URL * `error` String - 에러 코드 -* `certificate` Object - * `data` String - PEM 인코딩된 데이터 - * `issuerName` String - 인증서 발급자의 공통 이름 - * `subjectName` String - 대상의 공통 이름 - * `serialNumber` String - 문자열로 표현된 hex 값 - * `validStart` Integer - 초 단위의 인증서가 유효하기 시작한 날짜 - * `validExpiry` Integer - 초 단위의 인증서가 만료되는 날짜 - * `fingerprint` String - 인증서의 지문 +* `certificate` [Certificate](structures/certificate.md) * `callback` Function * `isTrusted` Boolean - 인증서를 신뢰할지 여부 diff --git a/docs-translations/ko-KR/api/net.md b/docs-translations/ko-KR/api/net.md new file mode 100644 index 0000000..fa2cdd6 --- /dev/null +++ b/docs-translations/ko-KR/api/net.md @@ -0,0 +1,316 @@ +# net + +> Chromium 의 네이티브 네트워크 라이브러리를 사용한 HTTP/HTTPS 요청 실행. + +`net` 모듈은 HTTP(S) 요청을 실행하기 위한 클라이언트 측 API 입니다. 이것은 +Node.js 의 [HTTP](https://nodejs.org/api/http.html) 와 +[HTTPS](https://nodejs.org/api/https.html) 모듈과 유사합니다. 하지만 Node.js +구현 대신 Chromium 의 네이티브 네트워크 라이브러리를 사용하는 것은, 웹 프록시에 +대한 더 나은 지원을 제공합니다. + +다음은 왜 네이티브 Node.js 모듈대신 `net` 모듈 사용을 고려해야하는지에 대한 +대략적인 이유입니다: + +* WPAD 프로토콜과 프록시 PAC 환경설정 파일 지원을 통한 시스템 프록시 구성 자동 + 관리. +* HTTPS 요청의 자동 터널링. +* 기본, digest, NTLM, Kerberos, 협상 인증 스킴을 사용한 프록시 인증 지원. +* 트래픽 모니터링 프록시 지원: 접근 제어와 모니터링에 사용되는 Fiddler 같은 + 프록시. + +`net` 모듈 API 는 Node.js API 와 최대한 가까워 보이도록 설계되었습니다. 클래스, +메소드, 속성, 이벤트를 포함하는 API 컴포넌트는 일반적으로 Node.js 에서 사용되는 +것과 유사합니다. + +예를 들면, 다음 예제는 `net` API 가 사용될 수 있는 방법을 빠르게 보여줍니다: + +```javascript +const {app} = require('electron') +app.on('ready', () => { + const {net} = require('electron') + const request = net.request('https://github.com') + request.on('response', (response) => { + console.log(`STATUS: ${response.statusCode}`) + console.log(`HEADERS: ${JSON.stringify(response.headers)}`) + response.on('data', (chunk) => { + console.log(`BODY: ${chunk}`) + }) + response.on('end', () => { + console.log('No more data in response.') + }) + }) + request.end() +}) +``` + +그런데, 일반적으로 Node.js 의 [HTTP](https://nodejs.org/api/http.html)/ +[HTTPS](https://nodejs.org/api/https.html) 모듈을 사용하는 방법과 거의 +동일합니다. + +`net` API 는 애플리케이션이 `ready` 이벤트를 발생한 이후부터 사용할 수 있습니다. +`ready` 이벤트 전에 모듈을 사용하려고 하면 오류가 발생할 것 입니다. + +## Methods + +`net` 모듈은 다음의 메소드를 가지고 있습니다: + +### `net.request(options)` + +* `options` (Object | String) - `ClientRequest` 생성자 옵션. + +Returns `ClientRequest` + +주어진 `options` 을 사용해 `ClientRequest` 인스턴스를 생성합니다. +`ClientRequest` 생성자에 직접 전달됩니다. `net.request` 메소드는 `options` +객체의 명시된 프로토콜 스킴에 따라 보안 및 비보안 HTTP 요청을 실행하는데 +사용됩니다. + +## Class: ClientRequest + +> HTTP/HTTPS 요청을 합니다. + +`ClientRequest` 는 +[Writable Stream](https://nodejs.org/api/stream.html#stream_writable_streams) +인터페이스를 구현하였고 따라서 +[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) +입니다. + +### `new ClientRequest(options)` + +* `options` (Object | String) - `options` 이 문자열이면, 요청 URL 로 해석됩니다. + 객체라면, 다음 속성을 통해 HTTP 요청을 완전히 명시한 것으로 예상됩니다: + * `method` String (optional) - TheHTTP 요청 방법. 기본값은 GET 방법입니다. + * `url` String (optional) - 요청 URL. HTTP 또는 HTTPS 로 지정된 프로토콜 + 스킴과 함께 절대적인 형식으로 제공되어야 합니다. + * `session` Object (optional) - 요청과 연관된 [`Session`](session.md)인스턴스. + * `partition` String (optional) - 요청과 연관된 [`partition`](session.md) 의 + 이름. 기본값은 빈 문자열입니다. `session` 옵션은 `partition` 에 우선합니다. + 그러므로 `session` 이 명시적으로 지정된 경우, `partition` 은 무시됩니다. + * `protocol` String (optional) - 'scheme:' 형식의 프로토콜 스킴. 현재 지원되는 + 값은 'http:' 또는 'https:' 입니다. 기본값은 'http:' 입니다. + * `host` String (optional) - 호스트명과 포트번호의 연결로 제공되는 서버 호스트 + '호스트명:포트' + * `hostname` String (optional) - 서버 호스트명. + * `port` Integer (optional) - 서버의 리스닝 포트 번호. + * `path` String (optional) - 요청 URL 의 경로 부분. + +`protocol`, `host`, `hostname`, `port`, `path` 같은 `options` 속성은 +[URL](https://nodejs.org/api/url.html) 모듈에 설명 된대로 Node.js 모델을 엄격히 +따릅니다. + +예를 들어, 다음과 같이 'github.com' 에 대한 같은 요청을 만들 수 있습니다: + +```JavaScript +const request = net.request({ + method: 'GET', + protocol: 'https:', + hostname: 'github.com', + port: 443, + path: '/' +}) +``` + +### Instance Events + +#### Event: 'response' + +Returns: + +* `response` IncomingMessage - HTTP 응답 메시지를 나타내는 객체. + +#### Event: 'login' + +Returns: + +* `authInfo` Object + * `isProxy` Boolean + * `scheme` String + * `host` String + * `port` Integer + * `realm` String +* `callback` Function + +인증 프록시가 사용자 자격 증명을 요구하는 경우 발생됩니다. + +`callback` 함수는 사용자 자격 증명으로 다시 호출될 것으로 예상됩니다: + +* `username` String +* `password` String + +```JavaScript +request.on('login', (authInfo, callback) => { + callback('username', 'password') +}) +``` + +빈 자격증명을 제공하면 요청이 취소되고 응답 객체에서 인증 오류가 보고될 것 +입니다: + +```JavaScript +request.on('response', (response) => { + console.log(`STATUS: ${response.statusCode}`); + response.on('error', (error) => { + console.log(`ERROR: ${JSON.stringify(error)}`) + }) +}) +request.on('login', (authInfo, callback) => { + callback() +}) +``` + +#### Event: 'finish' + +`request` 객체에 `request` 데이터의 마지막 덩어리가 기록된 후 발생됩니다. + +#### Event: 'abort' + +`request` 가 취소된 경우 발생됩니다. `request` 가 이미 닫힌 경우 `abort` +이벤트는 발생되지 않습니다. + +#### Event: 'error' + +Returns: + +* `error` Error - 실패에 대한 몇가지 정보를 제공하는 오류 객체입니다. + +`net` 모듈이 네트워크 요청 실행을 실패한 경우 발생됩니다. 일반적으로 `request` +객체가 `error` 이벤트를 발생할 때, `close` 이벤트가 연속적으로 발생하고 응답 +객체는 제공되지 않습니다. + +#### Event: 'close' + +HTTP 요청-응답 처리의 마지막 이벤트로써 발생됩니다. `close` 이벤트는 `request` +또는 `reponse` 객체에서 더이상 이벤트가 발생되지 않을 것임을 나타냅니다. + +### Instance Properties + +#### `request.chunkedEncoding` + +HTTP 덩어리 전송 인코딩을 사용할지 여부를 명시하는 불 값입니다. 기본값은 `false` +입니다. 속성은 읽고 쓸 수 있습니다. 그러나 HTTP 헤더가 아직 네트워크 선에 +쓰여지지 않은 첫 쓰기 작업 전에만 쓸 수 있습니다. 첫 쓰기 이후에 +`chunkedEncoding` 을 쓰려고 하면 오류가 발생합니다. + +Electron 프로세스 메모리에서 내부적으로 버퍼링하는 대신 작은 덩어리로 데이터로써 +큰 요청 본문을 전송하려면 덩어리 인코딩을 사용하는 것이 좋습니다. + +### Instance Methods + +#### `request.setHeader(name, value)` + +* `name` String - 추가 HTTP 헤더 이름. +* `value` String - 추가 HTTP 헤더 값. + +추가 HTTP 헤더를 추가합니다. 헤더 이름은 소문자화 되지 않고 실행됩니다. 첫 쓰기 +전까지만 호출할 수 있습니다. 첫 쓰기 후 이 메소드를 호출하면 오류가 발생합니다. + +#### `request.getHeader(name)` + +* `name` String - 추가 헤더 이름을 명시합니다. + +Returns String - 이전에 설정된 추가 헤더 이름에 대한 값. + +#### `request.removeHeader(name)` + +* `name` String - 추가 헤더 이름을 명시합니다. + +이전에 설정된 추가 헤더 이름을 삭제합니다. 이 메소드는 첫 쓰기 전까지만 호출할 +수 있습니다. 첫 쓰기 후 호출하면 오류가 발생합니다. + +#### `request.write(chunk[, encoding][, callback])` + +* `chunk` (String | Buffer) - 요청 본문 데이터의 덩어리. 문자열이라면, 지정된 + 인코딩을 사용한 버퍼로 변환됩니다. +* `encoding` String (optional) - 버퍼 객체로 문자열을 변환하는데 사용됩니다. + 기본값은 'utf-8' 입니다. +* `callback` Function (optional) - 쓰기 작업이 끝난 이후 호출됩니다. + +`callback` 은 근본적으로 Node.js API 와의 유사성을 유지하는 목적으로 도입된 더미 +함수입니다. 그것은 `chunk` 내용이 Chromium 네트워크 계층에 전달 된 후 다음 +틱에서 비동기적으로 호출됩니다. Node.js 구현과 달리, `callback` 호출 이전에 +`chunk` 내용이 네트워크 선에 내보내진 것을 보장하지 않습니다. + +요청 본문에 데이터의 덩어리를 추가합니다. 첫 쓰기 작업은 네트워크 선에 요청 +헤더를 쓸 것 입니다. 첫 쓰기 작업 이후, 사용자 정의 헤더 추가 또는 삭제는 +허용되지 않습니다. + +#### `request.end([chunk][, encoding][, callback])` + +* `chunk` (String | Buffer) (optional) +* `encoding` String (optional) +* `callback` Function (optional) + +요청 데이터의 마지막 덩어리를 보냅니다. 이후 쓰기 또는 종료 명령은 허용되지 +않습니다. `finish` 이벤트는 `end` 명령 이후에 발생합니다. + +#### `request.abort()` + +현재 진행중인 HTTP 처리를 취소합니다. 요청이 이미 `close` 이벤트를 발생했다면, +취소 명령은 적용되지 않습니다. 그렇지 않으면 진행중인 이벤트는 `abort` 와 +`close` 이벤트를 발생시킵니다. 또한, 현재 진행중인 응답 객체가 있다면, `aborted` +이벤트를 발생할 것 입니다. + +## Class: IncomingMessage + +> HTTP/HTTPS 요청에 대한 응답을 처리합니다. + +`IncomingMessage` 는 +[Readable Stream](https://nodejs.org/api/stream.html#stream_readable_streams) +인터페이스를 구현하였고 따라서 +[EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) +입니다. + +### Instance Events + +#### Event: 'data' + +Returns: + +* `chunk` Buffer - 응답 본문 데이터의 덩어리. + +`data` 이벤트는 응용 코드에 응답 데이터를 전송하는 통상적인 방법입니다. + +#### Event: 'end' + +응답 본문이 종료되었음을 나타냅니다. + +#### Event: 'aborted' + +요청이 계속 진행중인 HTTP 처리 도중 취소되었을 때 발생합니다. + +#### Event: 'error' + +Returns: + +`error` Error - 일반적으로 실패 원인을 식별하는 오류 문자열을 가지고 있습니다. + +스트리밍 응답 데이터 이벤트를 처리하는 동안 오류가 발생했을 때 발생됩니다. +예를 들어, 응답이 여전히 스트리밍되는 동안 서버가 닫히는 경우, 응답 객체에서 +`error` 이벤트가 발생할 것이며 그 후에 요청 객체에서 `close` 이벤트가 발생할 것 +입니다. + +### Instance Properties + +`IncomingMessage` 인스턴스는 다음의 읽을 수 있는 속성을 가지고 있습니다: + +#### `response.statusCode` + +HTTP 응답 상태 코드를 나타내는 정수. + +#### `response.statusMessage` + +HTTP 상태 메시지를 나타내는 문자열. + +#### `response.headers` + +응답 HTTP 헤더를 나타내는 객체. `headers` 객체는 다음 형식입니다: + +* 모든 헤더 이름은 소문자입니다. +* 각 헤더 이름은 헤더 객체에 배열-값 속성을 생성합니다. +* 각 헤더 값은 헤더 이름과 연관된 배열에 푸시됩니다. + +#### `response.httpVersion` + +HTTP 프로토콜 버전 번호를 나타내는 문자열. 일반적으로 '1.0' 또는 '1.1' 입니다. +또한 `httpVersionMajor` 와 `httpVersionMinor` 는 각각 HTTP 메이저와 마이너 버전 +번호를 반환하는 두개의 정수값 형태로 읽을 수 있는 속성입니다. diff --git a/docs-translations/ko-KR/tutorial/debugging-main-process-node-inspector.md b/docs-translations/ko-KR/tutorial/debugging-main-process-node-inspector.md index adab502..04017cd 100644 --- a/docs-translations/ko-KR/tutorial/debugging-main-process-node-inspector.md +++ b/docs-translations/ko-KR/tutorial/debugging-main-process-node-inspector.md @@ -1,38 +1,128 @@ -# VSCode 에서 메인 프로세스 디버깅하기 +# node-inspector 에서 메인 프로세스 디버깅하기 -### 1. VS Code 에서 Electron 프로젝트 열기. +[`node-inspector``][node-inspector] 는 Electron 의 메인 프로세스를 디버깅하기 +위해 크롬에서 사용할 수 있는 익숙한 개발도구 GUI 를 제공합니다. 그러나, +`node-inspector` 가 네이티브 Node 모듈에 의존적이기 때문에 디버깅하려는 +Electron 버전에 맞춰 다시 빌드해야 합니다. `node-inspector` 다시 빌드하여 +의존성을 재구성하거나 [`electron-inspector`] 가 대신 하게 할 수 있으며, 두 +방식이 이 문서에 나와있습니다. + +**참고**: 글쓴 시점 현재 `node-inspector` 최종버전 (0.12.8) 은 Electron 1.3.0 +이상에서 해당 의존성 중 하나를 패치하지 않고 빌드 할 수 없습니다. +`electron-inspector` 을 사용한다면 알아서 처리될 것 입니다. + + +## 디버깅에 `electron-inspector` 사용하기 + +### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치 + +### 2. [`electron-rebuild`][electron-rebuild]가 없다면, 설치 + +```shell +npm install electron-rebuild --save-dev +``` + +### 3. [`electron-inspector`][electron-inspector] 설치 + +```shell +npm install electron-inspector --save-dev +``` + +### 4. Electron 시작 + +`--debug` 스위치와 함께 Electron 실행: + +```shell +electron --debug=5858 your/app +``` + +또는, 스크립트의 첫번째 줄에서 실행 중단: + +```shell +electron --debug-brk=5858 your/app +``` + +### 5. electron-inspector 시작 + +macOS / Linux: + +```shell +node_modules/.bin/electron-inspector +``` + +Windows: + +```shell +node_modules\\.bin\\electron-inspector +``` + +`electron-inspector` 는 첫 실행과 Electron 버전 변경시에 `node-inspector` +의존성을 다시 빌드 할 것 입니다. 다시 빌드하는 과정에 Node 헤더와 라이브러리를 +다운받기 위해 인터넷 연결이 필요하며, 이 작업은 몇 분 정도 시간이 소요됩니다. + +### 6. 디버거 UI 로드 + +Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 +주소에 접속합니다. `--debug-brk` 로 시작한 경우 UI 갱신을 위해 일시정지 버튼을 +클릭해야 할 수도 있습니다. + + +## 디버깅에 `node-inspector` 사용하기 + +### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치 + +### 2. [`node-inspector`][node-inspector] 설치 ```bash -$ git clone git@github.com:electron/electron-quick-start.git -$ code electron-quick-start +$ npm install node-inspector ``` -### 2. 다음 설정으로 `.vscode/launch.json` 파일 추가하기: +### 3. [`node-pre-gyp`][node-pre-gyp] 설치 -```javascripton -{ - "version": "0.2.0", - "configurations": [ - { - "name": "Debug Main Process", - "type": "node", - "request": "launch", - "cwd": "${workspaceRoot}", - "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", - "program": "${workspaceRoot}/main.js" - } - ] -} +```bash +$ npm install node-pre-gyp ``` -**참고:** 윈도우에서, `runtimeExecutable` 을 위해 -`"${workspaceRoot}/node_modules/.bin/electron.cmd"` 를 사용하세요. +### 4. Electron 용 `node-inspector` `v8` 모듈 재 컴파일 + +**참고:** 사용하는 Electron의 버전에 맞춰 target 인수를 변경하세요. + +```bash +$ node_modules/.bin/node-pre-gyp --target=1.2.5 --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=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall +``` + +또한 [네이티브 모듈 설치 방법][how-to-install-native-modules] 문서도 참고해보세요. + +### 5. Electron 디버그 모드 활성화 + +다음과 같이 debung 플래그로 Electron 을 실행할 수 있습니다: + +```bash +$ electron --debug=5858 your/app +``` + +또는 스크립트 첫번째 줄에서 일시 정지할 수 있습니다: + +```bash +$ electron --debug-brk=5858 your/app +``` + +### 6. Electron을 사용하는 [`node-inspector`][node-inspector] 서버 시작하기 + +```bash +$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js +``` -### 3. 디버깅 +### 7. 디버거 UI 로드 -`main.js` 에 중단점을 설정하고, -[Debug View](https://code.visualstudio.com/docs/editor/debugging) 에서 디버깅을 -시작하세요. 중단점을 만나게 될 것 입니다. +Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 +주소에 접속합니다. `--debug-brk` 로 시작한 경우 엔트리 라인을 보기 위해 +일시정지 버튼을 클릭해야 할 수도 있습니다. -VSCode 에서 바로 디버깅 할 수 있는 프로젝트를 미리 준비했습니다: -https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start +[electron-inspector]: https://github.com/enlight/electron-inspector +[electron-rebuild]: https://github.com/electron/electron-rebuild +[node-inspector]: https://github.com/node-inspector/node-inspector +[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp +[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation +[how-to-install-native-modules]: using-native-node-modules.md#how-to-install-native-modules diff --git a/docs-translations/ko-KR/tutorial/debugging-main-process-vscode.md b/docs-translations/ko-KR/tutorial/debugging-main-process-vscode.md index 04017cd..adab502 100644 --- a/docs-translations/ko-KR/tutorial/debugging-main-process-vscode.md +++ b/docs-translations/ko-KR/tutorial/debugging-main-process-vscode.md @@ -1,128 +1,38 @@ -# node-inspector 에서 메인 프로세스 디버깅하기 +# VSCode 에서 메인 프로세스 디버깅하기 -[`node-inspector``][node-inspector] 는 Electron 의 메인 프로세스를 디버깅하기 -위해 크롬에서 사용할 수 있는 익숙한 개발도구 GUI 를 제공합니다. 그러나, -`node-inspector` 가 네이티브 Node 모듈에 의존적이기 때문에 디버깅하려는 -Electron 버전에 맞춰 다시 빌드해야 합니다. `node-inspector` 다시 빌드하여 -의존성을 재구성하거나 [`electron-inspector`] 가 대신 하게 할 수 있으며, 두 -방식이 이 문서에 나와있습니다. - -**참고**: 글쓴 시점 현재 `node-inspector` 최종버전 (0.12.8) 은 Electron 1.3.0 -이상에서 해당 의존성 중 하나를 패치하지 않고 빌드 할 수 없습니다. -`electron-inspector` 을 사용한다면 알아서 처리될 것 입니다. - - -## 디버깅에 `electron-inspector` 사용하기 - -### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치 - -### 2. [`electron-rebuild`][electron-rebuild]가 없다면, 설치 - -```shell -npm install electron-rebuild --save-dev -``` - -### 3. [`electron-inspector`][electron-inspector] 설치 - -```shell -npm install electron-inspector --save-dev -``` - -### 4. Electron 시작 - -`--debug` 스위치와 함께 Electron 실행: - -```shell -electron --debug=5858 your/app -``` - -또는, 스크립트의 첫번째 줄에서 실행 중단: - -```shell -electron --debug-brk=5858 your/app -``` - -### 5. electron-inspector 시작 - -macOS / Linux: - -```shell -node_modules/.bin/electron-inspector -``` - -Windows: - -```shell -node_modules\\.bin\\electron-inspector -``` - -`electron-inspector` 는 첫 실행과 Electron 버전 변경시에 `node-inspector` -의존성을 다시 빌드 할 것 입니다. 다시 빌드하는 과정에 Node 헤더와 라이브러리를 -다운받기 위해 인터넷 연결이 필요하며, 이 작업은 몇 분 정도 시간이 소요됩니다. - -### 6. 디버거 UI 로드 - -Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 -주소에 접속합니다. `--debug-brk` 로 시작한 경우 UI 갱신을 위해 일시정지 버튼을 -클릭해야 할 수도 있습니다. - - -## 디버깅에 `node-inspector` 사용하기 - -### 1. [node-gyp 필수 도구][node-gyp-required-tools] 설치 - -### 2. [`node-inspector`][node-inspector] 설치 +### 1. VS Code 에서 Electron 프로젝트 열기. ```bash -$ npm install node-inspector +$ git clone git@github.com:electron/electron-quick-start.git +$ code electron-quick-start ``` -### 3. [`node-pre-gyp`][node-pre-gyp] 설치 +### 2. 다음 설정으로 `.vscode/launch.json` 파일 추가하기: -```bash -$ npm install node-pre-gyp +```javascripton +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Debug Main Process", + "type": "node", + "request": "launch", + "cwd": "${workspaceRoot}", + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron", + "program": "${workspaceRoot}/main.js" + } + ] +} ``` -### 4. Electron 용 `node-inspector` `v8` 모듈 재 컴파일 - -**참고:** 사용하는 Electron의 버전에 맞춰 target 인수를 변경하세요. - -```bash -$ node_modules/.bin/node-pre-gyp --target=1.2.5 --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=1.2.5 --runtime=electron --fallback-to-build --directory node_modules/v8-profiler/ --dist-url=https://atom.io/download/atom-shell reinstall -``` - -또한 [네이티브 모듈 설치 방법][how-to-install-native-modules] 문서도 참고해보세요. - -### 5. Electron 디버그 모드 활성화 - -다음과 같이 debung 플래그로 Electron 을 실행할 수 있습니다: - -```bash -$ electron --debug=5858 your/app -``` - -또는 스크립트 첫번째 줄에서 일시 정지할 수 있습니다: - -```bash -$ electron --debug-brk=5858 your/app -``` - -### 6. Electron을 사용하는 [`node-inspector`][node-inspector] 서버 시작하기 - -```bash -$ ELECTRON_RUN_AS_NODE=true path/to/electron.exe node_modules/node-inspector/bin/inspector.js -``` +**참고:** 윈도우에서, `runtimeExecutable` 을 위해 +`"${workspaceRoot}/node_modules/.bin/electron.cmd"` 를 사용하세요. -### 7. 디버거 UI 로드 +### 3. 디버깅 -Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858 -주소에 접속합니다. `--debug-brk` 로 시작한 경우 엔트리 라인을 보기 위해 -일시정지 버튼을 클릭해야 할 수도 있습니다. +`main.js` 에 중단점을 설정하고, +[Debug View](https://code.visualstudio.com/docs/editor/debugging) 에서 디버깅을 +시작하세요. 중단점을 만나게 될 것 입니다. -[electron-inspector]: https://github.com/enlight/electron-inspector -[electron-rebuild]: https://github.com/electron/electron-rebuild -[node-inspector]: https://github.com/node-inspector/node-inspector -[node-pre-gyp]: https://github.com/mapbox/node-pre-gyp -[node-gyp-required-tools]: https://github.com/nodejs/node-gyp#installation -[how-to-install-native-modules]: using-native-node-modules.md#how-to-install-native-modules +VSCode 에서 바로 디버깅 할 수 있는 프로젝트를 미리 준비했습니다: +https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start diff --git a/docs-translations/ko-KR/tutorial/debugging-main-process.md b/docs-translations/ko-KR/tutorial/debugging-main-process.md index 70cd375..4b04bdf 100644 --- a/docs-translations/ko-KR/tutorial/debugging-main-process.md +++ b/docs-translations/ko-KR/tutorial/debugging-main-process.md @@ -14,6 +14,10 @@ Electron 브라우저 창의 개발자 도구는 웹 페이지 같은 창에서 이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다. 기본 `port`는 `5858` 입니다. +```shell +electron --debug=5858 your/app +``` + ### `--debug-brk=[port]` `--debug`와 비슷하지만 스크립트의 첫번째 라인에서 일시정지합니다. diff --git a/docs-translations/ko-KR/tutorial/quick-start.md b/docs-translations/ko-KR/tutorial/quick-start.md index 3650505..671937e 100644 --- a/docs-translations/ko-KR/tutorial/quick-start.md +++ b/docs-translations/ko-KR/tutorial/quick-start.md @@ -61,7 +61,7 @@ your-app/ 파일을 지정하면 메인 프로세스의 엔트리 포인트로 사용합니다. 예를 들어 사용할 수 있는 `package.json`은 다음과 같습니다: -```javascripton +```json { "name" : "your-app", "version" : "0.1.0", @@ -76,11 +76,9 @@ __알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으 다음과 같이 작성할 수 있습니다: ```javascript -const electron = require('electron') -// 애플리케이션 생명주기를 조작 하는 모듈. -const {app} = electron -// 네이티브 브라우저 창을 만드는 모듈. -const {BrowserWindow} = electron +const {app, BrowserWindow} = require('electron') +const path = require('path') +const url = require('url') // 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면 // 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다. @@ -91,7 +89,11 @@ function createWindow () { win = new BrowserWindow({width: 800, height: 600}) // 그리고 현재 디렉터리의 index.html을 로드합니다. - win.loadURL(`file://${__dirname}/index.html`) + win.loadURL(url.format({ + pathname: path.join(__dirname, 'index.html'), + protocol: 'file:', + slashes: true + })) // 개발자 도구를 엽니다. win.webContents.openDevTools() @@ -234,8 +236,10 @@ $ ./Electron.app/Contents/MacOS/Electron your-app/ $ git clone https://github.com/electron/electron-quick-start # 저장소 안으로 들어갑니다 $ cd electron-quick-start -# 애플리케이션의 의존성 모듈을 설치한 후 실행합니다 -$ npm install && npm start +# 의존성 모듈을 설치합니다 +$ npm install +# 앱을 실행합니다 +$ npm start ``` 더 많은 예시 앱을 보려면 대단한 Electron 커뮤니티에 의해 만들어진 -- 2.7.4