Merge pull request #7822 from tinydew4/translate-ko
Update the korean docs up to '379c347' commit.
This commit is contained in:
Kevin Sawicki
GitHub
commit
97d468cf35
6 changed files with 478 additions and 161 deletions
|
|
@ -185,14 +185,7 @@ Returns:
|
||||||
* `webContents` [WebContents](web-contents.md)
|
* `webContents` [WebContents](web-contents.md)
|
||||||
* `url` URL
|
* `url` URL
|
||||||
* `error` String - 에러 코드
|
* `error` String - 에러 코드
|
||||||
* `certificate` Object
|
* `certificate` [Certificate](structures/certificate.md)
|
||||||
* `data` String - PEM 인코딩된 데이터
|
|
||||||
* `issuerName` String - 인증서 발급자의 공통 이름
|
|
||||||
* `subjectName` String - 대상의 공통 이름
|
|
||||||
* `serialNumber` String - 문자열로 표현된 hex 값
|
|
||||||
* `validStart` Integer - 초 단위의 인증서가 유효하기 시작한 날짜
|
|
||||||
* `validExpiry` Integer - 초 단위의 인증서가 만료되는 날짜
|
|
||||||
* `fingerprint` String - 인증서의 지문
|
|
||||||
* `callback` Function
|
* `callback` Function
|
||||||
* `isTrusted` Boolean - 인증서를 신뢰할지 여부
|
* `isTrusted` Boolean - 인증서를 신뢰할지 여부
|
||||||
|
|
||||||
|
|
|
||||||
316
docs-translations/ko-KR/api/net.md
Normal file
316
docs-translations/ko-KR/api/net.md
Normal file
|
|
@ -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 메이저와 마이너 버전
|
||||||
|
번호를 반환하는 두개의 정수값 형태로 읽을 수 있는 속성입니다.
|
||||||
|
|
@ -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
|
```bash
|
||||||
$ git clone git@github.com:electron/electron-quick-start.git
|
$ npm install node-inspector
|
||||||
$ code electron-quick-start
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. 다음 설정으로 `.vscode/launch.json` 파일 추가하기:
|
### 3. [`node-pre-gyp`][node-pre-gyp] 설치
|
||||||
|
|
||||||
```javascripton
|
```bash
|
||||||
{
|
$ npm install node-pre-gyp
|
||||||
"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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**참고:** 윈도우에서, `runtimeExecutable` 을 위해
|
### 4. Electron 용 `node-inspector` `v8` 모듈 재 컴파일
|
||||||
`"${workspaceRoot}/node_modules/.bin/electron.cmd"` 를 사용하세요.
|
|
||||||
|
|
||||||
### 3. 디버깅
|
**참고:** 사용하는 Electron의 버전에 맞춰 target 인수를 변경하세요.
|
||||||
|
|
||||||
`main.js` 에 중단점을 설정하고,
|
```bash
|
||||||
[Debug View](https://code.visualstudio.com/docs/editor/debugging) 에서 디버깅을
|
$ 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
|
||||||
|
```
|
||||||
|
|
||||||
VSCode 에서 바로 디버깅 할 수 있는 프로젝트를 미리 준비했습니다:
|
또한 [네이티브 모듈 설치 방법][how-to-install-native-modules] 문서도 참고해보세요.
|
||||||
https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start
|
|
||||||
|
### 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
|
||||||
|
```
|
||||||
|
|
||||||
|
### 7. 디버거 UI 로드
|
||||||
|
|
||||||
|
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
||||||
|
주소에 접속합니다. `--debug-brk` 로 시작한 경우 엔트리 라인을 보기 위해
|
||||||
|
일시정지 버튼을 클릭해야 할 수도 있습니다.
|
||||||
|
|
||||||
|
[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
|
||||||
|
|
|
||||||
|
|
@ -1,128 +1,38 @@
|
||||||
# node-inspector 에서 메인 프로세스 디버깅하기
|
# VSCode 에서 메인 프로세스 디버깅하기
|
||||||
|
|
||||||
[`node-inspector``][node-inspector] 는 Electron 의 메인 프로세스를 디버깅하기
|
### 1. VS Code 에서 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
|
```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
|
```javascripton
|
||||||
$ npm install node-pre-gyp
|
{
|
||||||
|
"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` 모듈 재 컴파일
|
**참고:** 윈도우에서, `runtimeExecutable` 을 위해
|
||||||
|
`"${workspaceRoot}/node_modules/.bin/electron.cmd"` 를 사용하세요.
|
||||||
|
|
||||||
**참고:** 사용하는 Electron의 버전에 맞춰 target 인수를 변경하세요.
|
### 3. 디버깅
|
||||||
|
|
||||||
```bash
|
`main.js` 에 중단점을 설정하고,
|
||||||
$ 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
|
[Debug View](https://code.visualstudio.com/docs/editor/debugging) 에서 디버깅을
|
||||||
$ 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] 문서도 참고해보세요.
|
VSCode 에서 바로 디버깅 할 수 있는 프로젝트를 미리 준비했습니다:
|
||||||
|
https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start
|
||||||
### 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
|
|
||||||
```
|
|
||||||
|
|
||||||
### 7. 디버거 UI 로드
|
|
||||||
|
|
||||||
Chrome 브라우저에서 http://127.0.0.1:8080/debug?ws=127.0.0.1:8080&port=5858
|
|
||||||
주소에 접속합니다. `--debug-brk` 로 시작한 경우 엔트리 라인을 보기 위해
|
|
||||||
일시정지 버튼을 클릭해야 할 수도 있습니다.
|
|
||||||
|
|
||||||
[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
|
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,10 @@ Electron 브라우저 창의 개발자 도구는 웹 페이지 같은 창에서
|
||||||
이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다.
|
이 스위치를 사용하면 Electron은 지정한 `port`에 V8 디버거 프로토콜을 리스닝합니다.
|
||||||
기본 `port`는 `5858` 입니다.
|
기본 `port`는 `5858` 입니다.
|
||||||
|
|
||||||
|
```shell
|
||||||
|
electron --debug=5858 your/app
|
||||||
|
```
|
||||||
|
|
||||||
### `--debug-brk=[port]`
|
### `--debug-brk=[port]`
|
||||||
|
|
||||||
`--debug`와 비슷하지만 스크립트의 첫번째 라인에서 일시정지합니다.
|
`--debug`와 비슷하지만 스크립트의 첫번째 라인에서 일시정지합니다.
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ your-app/
|
||||||
파일을 지정하면 메인 프로세스의 엔트리 포인트로 사용합니다. 예를 들어 사용할 수 있는
|
파일을 지정하면 메인 프로세스의 엔트리 포인트로 사용합니다. 예를 들어 사용할 수 있는
|
||||||
`package.json`은 다음과 같습니다:
|
`package.json`은 다음과 같습니다:
|
||||||
|
|
||||||
```javascripton
|
```json
|
||||||
{
|
{
|
||||||
"name" : "your-app",
|
"name" : "your-app",
|
||||||
"version" : "0.1.0",
|
"version" : "0.1.0",
|
||||||
|
|
@ -76,11 +76,9 @@ __알림__: 만약 `main` 필드가 `package.json`에 설정되어 있지 않으
|
||||||
다음과 같이 작성할 수 있습니다:
|
다음과 같이 작성할 수 있습니다:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const electron = require('electron')
|
const {app, BrowserWindow} = require('electron')
|
||||||
// 애플리케이션 생명주기를 조작 하는 모듈.
|
const path = require('path')
|
||||||
const {app} = electron
|
const url = require('url')
|
||||||
// 네이티브 브라우저 창을 만드는 모듈.
|
|
||||||
const {BrowserWindow} = electron
|
|
||||||
|
|
||||||
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
|
// 윈도우 객체를 전역에 유지합니다. 만약 이렇게 하지 않으면
|
||||||
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
|
// 자바스크립트 GC가 일어날 때 창이 멋대로 닫혀버립니다.
|
||||||
|
|
@ -91,7 +89,11 @@ function createWindow () {
|
||||||
win = new BrowserWindow({width: 800, height: 600})
|
win = new BrowserWindow({width: 800, height: 600})
|
||||||
|
|
||||||
// 그리고 현재 디렉터리의 index.html을 로드합니다.
|
// 그리고 현재 디렉터리의 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()
|
win.webContents.openDevTools()
|
||||||
|
|
@ -234,8 +236,10 @@ $ ./Electron.app/Contents/MacOS/Electron your-app/
|
||||||
$ git clone https://github.com/electron/electron-quick-start
|
$ git clone https://github.com/electron/electron-quick-start
|
||||||
# 저장소 안으로 들어갑니다
|
# 저장소 안으로 들어갑니다
|
||||||
$ cd electron-quick-start
|
$ cd electron-quick-start
|
||||||
# 애플리케이션의 의존성 모듈을 설치한 후 실행합니다
|
# 의존성 모듈을 설치합니다
|
||||||
$ npm install && npm start
|
$ npm install
|
||||||
|
# 앱을 실행합니다
|
||||||
|
$ npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
더 많은 예시 앱을 보려면 대단한 Electron 커뮤니티에 의해 만들어진
|
더 많은 예시 앱을 보려면 대단한 Electron 커뮤니티에 의해 만들어진
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue