Skip to content

Commit 6ae779f

Browse files
JJByunJJByun
committed
translation to korean
traslation-ko
1 parent bae6c5f commit 6ae779f

File tree

8 files changed

+1004
-0
lines changed

8 files changed

+1004
-0
lines changed

‎BUILDING-KO.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# plotly.js 구축
2+
3+
plotly.js를 어플리케이션에 번들로 묶는 가장 쉬운 방법은 npm에서 배포 된 plotly.js 패키지 중 하나를 사용하는 것입니다. 이러한 분산 패키지는 **모든** 빌드 프레임워크에서 작동해야합니다. 즉, 바이트를 절약하려면 프레임워크 구축에 해당하는 아래 섹션을 읽으세요.
4+
5+
## Webpack
6+
7+
plotly.js를 Webpack으로 빌드하려면 [[email protected]+](https://github.com/hughsk/ify-loader) 를 설치하고 `webpack.config.json`.에 추가해야합니다. 이것은 일부 plotly.js 의존성에 필요한 Browserify 변환 호환성을 Webpack에 추가합니다. Webpack으로 plotly.js를 빌드하는 방법을 보여주는 저장소는 [here](https://github.com/plotly/plotly-webpack)에서 찾을 수 있습니다. 간단히 말해 `ify-loader` 를 `webpack.config.js`의 `module` 섹션에 추가하십시오 :
8+
9+
```
10+
...
11+
module: {
12+
rules: [
13+
{
14+
test: /\.js$/,
15+
loader: 'ify-loader'
16+
}
17+
]
18+
},
19+
...
20+
```
21+
22+
## Browserify
23+
24+
주어진 소스 파일 :
25+
26+
```
27+
// file: index.js
28+
29+
var Plotly = require('plotly.js');
30+
31+
// ....
32+
```
33+
34+
그 다음 간단히 실행,
35+
36+
```
37+
browserify index.js > bundle.js
38+
```
39+
40+
## Angular CLI
41+
42+
현재 Angular CLI는 후드 아래에서 Webpack을 사용하여 Angular 응용 프로그램을 번들로 만들고 빌드합니다. 안타깝게도 [Webpack](https://github.com/plotly/plotly.js/blob/master/BUILDING.md#webpack) 섹션에 언급 된 플러그인을 추가하기 위해 Webpack 구성을 재정의 할 수 없습니다. 이 플러그인이 없으면 WebGL 플롱세 대한 glslify를 빌드하려고 할 때 빌드가 실패합니다.
43+
44+
이 문제를 피하기 위해 현재 두 가지 해결책이 있습니다 :
45+
46+
1. WebGL 플롯을 사용해야 하는 경우 [ng eject](https://github.com/angular/angular-cli/wiki/eject)를 사용하여 Angular CLI 프로젝트에서 Webpack 구성을 만들 수 있습니다. 그러면 Webpack에 관한 지침을 따를 수 있습니다.
47+
2. WebGL 플롯을 사용할 필요가 없는 경우, 플롯에 필요한 module만 포함하는 사용자 정의 빌드를 작성할 수있습니다. Angular CLI를 사용하는 명확한 방법은 README의 [Modules](https://github.com/plotly/plotly.js/blob/master/README.md#modules) 섹션에 설명 된 방법이 아니라 다음을 따르십시오 :
48+
49+
```
50+
// in the Component you want to create a graph
51+
import * as Plotly from 'plotly.js';
52+
// in src/tsconfig.app.json
53+
// List here the modules you want to import
54+
// this example is for scatter plots
55+
{
56+
"compilerOptions": {
57+
"paths": {
58+
"plotly.js": [
59+
"../node_modules/plotly.js/lib/core.js",
60+
"../node_modules/plotly.js/lib/scatter.js"
61+
]
62+
}
63+
}
64+
}
65+
```

‎CONTRIBUTING-KO.md

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
# plotly.js에 기여하는 방법
2+
3+
## Opening issues
4+
5+
[issue guidelines](https://github.com/plotly/plotly.js/blob/master/.github/ISSUE_TEMPLATE.md)을 참고해 주시기 바랍니다.
6+
7+
## Making pull requests
8+
9+
[pull request guidelines](https://github.com/plotly/plotly.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md)을 참고해 주시기 바랍니다.
10+
11+
## GitHub labels
12+
13+
저희는 track issues와 PRs의 문제를 해결하기 위하여 다음과 같은 [labels](https://github.com/plotly/plotly.js/labels) 을 사용합니다.
14+
15+
| Label | 목적 |
16+
| --------------------------- | ------------------------------------------------------------ |
17+
| `type: bug` | plotly의 팀 멤버에 의해 확인된 bug report |
18+
| `type: regression` | 버전의 변화로 인해 동작의 변화를 보이는 것으로 알려진 bug |
19+
| `type: feature` | 계획된 기능의 추가 |
20+
| `type: translation` | 현지화 관련 업무 |
21+
| `type: performance` | 실행 관련 업무 |
22+
| `type: maintenance` | 소스 코드 정리의 결과로 사용자를 위한 기능 향상을 이루지 못함 |
23+
| `type: documentation` | API doc or attribute description 의 개선 |
24+
| `type: community` | community 입력과 pull requests에 개방된 issue |
25+
| `type: duplicate` | *부가적인 설명은 없음* |
26+
| `type: wontfix` | *부가적인 설명은 없음* |
27+
| `status: discussion needed` | 진행하기전 maintainers와 논의가 필요한 Issue나 PR |
28+
| `status: in progress` | 초기의 피드백이 필요하지만 merge할 준비가 되지 않은 PRs |
29+
| `status: reviewable` | 저작자의 견해로 완벽한 PRs |
30+
| `status: on hold` | 보류중인 PRs |
31+
32+
## 개발
33+
34+
#### 필수 구성 요소
35+
36+
- git
37+
- [node.js](https://nodejs.org/en/). 우리는 node.js v10.x을 사용하는 것을 추천하지만, v6에서 시작하는 모든 버전이 작동되어야 합니다 . node version의 업그레이드 및 관리는 [`nvm`](https://github.com/creationix/nvm) 혹은 Windows alternatives를 사용하여 쉽게 수행할 수 있습니다..
38+
- [package-lock.json`](https://docs.npmjs.com/files/package-lock.json) 파일이 올바르게 사용되고 업데이트 되도록 [`npm`](https://www.npmjs.com/) v6.x 이상의 버전 (기본적으로 node.js v10.x와 함께 제공되는 항목)을 사용해야 합니다.
39+
40+
#### Step 1: plotly.js 저장소의 clone을 생성 및 설치
41+
42+
```
43+
git clone https://github.com/plotly/plotly.js.git
44+
cd plotly.js
45+
npm install
46+
```
47+
48+
#### Step 2: Test 환경 구축
49+
50+
```
51+
npm run pretest
52+
```
53+
54+
#### Step 3: Test dashboard 시작
55+
56+
```
57+
npm start
58+
```
59+
60+
이 명령은 [browserify](https://github.com/substack/node-browserify)을 사용하여 소스 파일들을 소스 맵으로 묶어내고, 파일 감시자 [watchify](https://github.com/substack/watchify) (소스파일이 저장될 때마다 당신의 dev plotly.js번들 업데이트 수행)를 시작하고 당신의 브라우저에서 탭을 엽니다.
61+
62+
#### Step 4: 콘솔을 열어서 개발 시작
63+
64+
일반적인 workflow는 소스를 조금씩 수정하는 것이고, test dashboard를 업데이트 하며 변경 사항을 검사하고 디버그 하는 것을 반복합니다. test dashboard는 개발에 유용한 도구와 함께 제공되며, `Tabs` 객체 아래 번들로 제공됩니다.
65+
66+
| Method/Property | Description |
67+
| --------------------------- | ------------------------------------------------------------ |
68+
| `Tabs.fresh([id])` | 새 그래프 분할을 만들고 반환합니다. (`graph`의 default). |
69+
| `Tabs.getGraph([id])` | 기본 또는 지정된 그래프 분할을 반환합니다. |
70+
| `Tabs.plotMock(mock, [id])` | 지정된 모형을 그립니다. (`.json` 연장은 필요하지 않습니다). |
71+
| `Tabs.snapshot([id])` | plot의 png 스냅샷을 만들고 아래에 배치합니다. |
72+
| `Tabs.reload()` | plotly.js 스크립트를 다시 로드하고 완료되면 `Tabs.onReload` 을 실행합니다. |
73+
| `Tabs.onReload()` | 기본적으로, `noop` 으로 설정되지만 원하는 기능에`Tabs.onReload`를 설정할 수 있습니다 . 이 기능은 plotly.js 스크립트를 다시 로드할 때마다 복사본이나 테스트파일을 다시 생성하는데 유용합니다. |
74+
| `Tabs.purge()` | 모든 plots를 삭제합니다. |
75+
76+
더 많은 정보가 필요하다면 [the source](https://github.com/plotly/plotly.js/blob/master/devtools/test_dashboard/devtools.js)를 확인하십시오.
77+
78+
매초마다 갱신되는 세가지의 추가 helper가 존재합니다:
79+
80+
- `gd` - plot div의 기본형(default)
81+
- `fullData` - `gd._fullData`의 축약
82+
- `fullLayout` - `gd._fullLayout`의 축약
83+
84+
dashboard의 오른쪽 상단에는 검색 표시줄이 있습니다.이 fuzzy-searches는 파일 이름 및 추적 유형을 기반으로 한 mock을 보여줍니다.
85+
86+
- `npm run preprocess`: js에서 css 및 svg 소스 파일의 사전 처리를 진행합니다. css 및 svg 소스 파일을 업데이트 할 때에는 이 스크립트를 수동으로 실행해야 합니다.
87+
- `npm run watch`: 테스트 대시보드와 마찬가지로 서버를 부팅하지 않고 watchify(파일 감시자)를 시작합니다.
88+
89+
## Testing
90+
91+
이 repository로 push할 때마다 jasmine과 image 테스트는 모두 [CircleCI](https://circleci.com/gh/plotly/plotly.js) 에서 실행됩니다.
92+
93+
### Jasmine tests
94+
95+
Jasmine tests는 [karma](https://github.com/karma-runner/karma)을 사용하여 브라우저에서 실행됩니다. local에서 실행하는 방법은 다음과 같습니다:
96+
97+
```
98+
npm run test-jasmine
99+
```
100+
101+
특정 suite를 사용 및 실행하는 방법은 다음과 같습니다:
102+
103+
```
104+
npm run test-jasmine -- <suite>
105+
```
106+
107+
[`test/jasmine/tests/`](https://github.com/plotly/plotly.js/tree/master/test/jasmine/tests)에서 찾을 수 있는 suites의 file 명에 해당합니다.
108+
109+
예를 들면, 여러개의 suite를 동시에 테스트할 수 있습니다:
110+
111+
```
112+
npm run test-jasmine -- bar axes scatter
113+
```
114+
115+
`bar_test.js`, `axes_test.js` 그리고 `scatter_test.js` suites에서 테스트를 실행합니다.
116+
117+
`autoWatch` / auto-bundle / multiple run mode를 끄는 방법:
118+
119+
```
120+
npm run test-jasmine -- <suite> --nowatch
121+
```
122+
123+
특정한 상황에서는, default reporting이 테스트 실패의 원인을 파악할 수 있을 만큼 분명하지 않을 수 있습니다. 이런 경우에는 [karma-verbose-reporter](https://www.npmjs.com/package/karma-verbose-reporter)를 사용하는 것을 권장합니다:
124+
125+
```
126+
npm run test-jasmine -- <suite> --verbose
127+
```
128+
129+
karma / jasmine CLI에 대한 정보 및 도움말:
130+
131+
```
132+
npm run test-jasmine -- --help
133+
npm run test-jasmine -- --info
134+
```
135+
136+
### 이미지 픽셀 비교 테스트(Image pixel comparison tests)
137+
138+
이미지 픽셀 비교 테스트는 docker container에서 실행됩니다. local에서 실행하는 방법에 대한 자세한 내용은 [image test README](https://github.com/plotly/plotly.js/blob/master/test/image/README.md)를 참조하십시오.
139+
140+
local에서 테스트를 실행하면 생성된 png 영상이 build/test_images/에 생성되고,` png diffs `는 build/test_images_diff/`에 생성됩니다. (두개의 git-ignored 디렉토리).
141+
142+
이미지 픽셀 비교 테스트의 결과를 보기위해 실행합니다.
143+
144+
```
145+
npm run start-image_viewer
146+
```
147+
148+
이는 baseline image, the generated image, 실패한 테스트 사례의 diff and the json 모형을 보여줍니다.
149+
150+
CircleCI에서의 실행 결과를 보려면, `build/test_images/` 및 `build/test_images_diff/` 의 아티팩트를 local 저장소로 다운로드한 후, `npm run start-image_viewer`를 실행하십시오.
151+
152+
### 상호 작용 테스트 작성(Writing interaction tests)
153+
154+
상호작용하는 좌표계는 여백을 포함하고 그림의 왼쪽 상단 모서리에 상대적이라는 것을 유념하십시오. 신뢰할 수 있는 상호작용 테스트를 생성하기 위해서는 plot의 폭, 높이,여백,x축의 범위 및 y축의 범위를 수정해야 할 수도 있습니다. 예를 들면:
155+
156+
```
157+
Plotly.newPlot(gd, [{
158+
x: [1, 1, 1, 2, 2, 2, 3, 3, 3],
159+
y: [1, 2, 3, 1, 2, 3, 1, 2, 3],
160+
mode: 'markers'
161+
}], {
162+
width: 400, height: 400,
163+
margin: {l: 100, r: 100, t: 100, b: 100},
164+
xaxis: {range: [0, 4]},
165+
yaxis: {range: [0, 4]}
166+
});
167+
```
168+
169+
이것은 아래와 같은 plot을 생성하며, (175, 175) 와 (225, 225) 사이의 선택 경로를 시뮬레이션한다는 것을 나타냅니다:
170+
171+
[![img](https://user-images.githubusercontent.com/31989842/38890553-0bc6190c-4282-11e8-8efc-077bf05ca565.png)](https://user-images.githubusercontent.com/31989842/38890553-0bc6190c-4282-11e8-8efc-077bf05ca565.png)
172+
173+
## 저장소의 구성
174+
175+
- Distributed files 은 `dist/`에 위치합니다.
176+
- CommonJS 에서 요구될 수 있는 모듈들은 `lib/`에 위치합니다.
177+
- 소스파일은 index를 포함하여 `src/`에 위치합니다.
178+
- 빌드 및 저장소 관리 스크립트는 `tasks/`에 위치합니다.
179+
- [`npm run-script`](https://docs.npmjs.com/cli/run-script) 명령어를 통해 모든 task를 실행할 수 있습니다.
180+
- 테스트는 `test/`에 위치하고, `image` 와 `jasmine` 테스트로 구분됩니다.
181+
- Test dashboard 와 image viewer 코드는 `devtools/`에 있습니다.
182+
- 빌드된 파일은 `build/`에 있습니다. (여기에 있는 대부분의 파일은 git-ignored이며, css 와 폰트 빌드 파일은 예외입니다.)
183+
184+
## 코딩 방법
185+
186+
정상적인 경우, `npm run lint`로 확인하십시오.
187+
188+
- 자세한 내용은 [eslintrc](https://github.com/plotly/plotly.js/blob/master/.eslintrc) 와 [list of rules](http://eslint.org/docs/rules/) 를 참조하십시오.
189+
- eslintrc file 에 ignore flag `0`인 규칙은 추가된 새 코드에 권장되는 규칙입니다.

0 commit comments

Comments
 (0)