Translate getting-started to Korean
- Up to b3cd299
Jinwoo Oh committed
Feb 2, 2015 at 14:05 UTC
8387f3bbc4479e6171f8ef8b7908d9c37f6c4e93
1 file changed
+115
docs/docs/getting-started.ko-KR.md
new
+115
@@ -0,0 +1,115 @@
1
+---
2
+id: getting-started
3
+title: 시작해보기
4
+next: tutorial.ko-KR.html
5
+redirect_from: "docs/index.ko-KR.html"
6
+---
7
+
8
+## JSFiddle
9
+
10
+React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예제를 따라 해 보는 것입니다.
11
+
12
+ * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
13
+ * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
14
+
15
+## 초심자용 키트
16
+
17
+초심자용 키트를 내려받아 시작합니다.
18
+
19
+<div class="buttons-unit downloads">
20
+ <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
21
+ 초심자용 키트 내려받기 {{site.react_version}}
22
+ </a>
23
+</div>
24
+
25
+초심자용 키트의 최상위 디렉터리에 아래의 내용대로 `helloworld.html` 파일을 생성합니다.
26
+
27
+```html
28
+<!DOCTYPE html>
29
+<html>
30
+ <head>
31
+ <script src="build/react.js"></script>
32
+ <script src="build/JSXTransformer.js"></script>
33
+ </head>
34
+ <body>
35
+ <div id="example"></div>
36
+ <script type="text/jsx">
37
+ React.render(
38
+ <h1>Hello, world!</h1>,
39
+ document.getElementById('example')
40
+ );
41
+ </script>
42
+ </body>
43
+</html>
44
+```
45
+
46
+JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth.html)을 확인하세요. 일반적인 JavaScript로 번역하기 위해 `<script type="text/jsx">`를 사용하고 `JSXTransformer.js`를 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.
47
+
48
+### 파일의 분리
49
+
50
+React JSX 코드는 분리된 파일로 존재할 수 있습니다. 다음 내용으로 `src/helloworld.js`를 생성해보세요.
51
+
52
+```javascript
53
+React.render(
54
+ <h1>Hello, world!</h1>,
55
+ document.getElementById('example')
56
+);
57
+```
58
+
59
+그다음 `helloworld.html`에서 참조합니다:
60
+
61
+```html{10}
62
+<script type="text/jsx" src="src/helloworld.js"></script>
63
+```
64
+
65
+### 오프라인 변환
66
+
67
+먼저 커맨드라인 도구를 설치합니다. ([npm](http://npmjs.org/) 필요):
68
+
69
+```
70
+npm install -g react-tools
71
+```
72
+
73
+그다음, `src/helloworld.js` 파일을 일반 JavaScript 파일로 변환합니다:
74
+
75
+```
76
+jsx --watch src/ build/
77
+```
78
+
79
+수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다.
80
+
81
+```javascript{2}
82
+React.render(
83
+ React.createElement('h1', null, 'Hello, world!'),
84
+ document.getElementById('example')
85
+);
86
+```
87
+
88
+아래의 내용대로 HTML 파일을 업데이트합니다:
89
+
90
+```html{6,10}
91
+<!DOCTYPE html>
92
+<html>
93
+ <head>
94
+ <title>Hello React!</title>
95
+ <script src="build/react.js"></script>
96
+ <!-- JSXTransformer는 이제 불필요합니다! -->
97
+ </head>
98
+ <body>
99
+ <div id="example"></div>
100
+ <script src="build/helloworld.js"></script>
101
+ </body>
102
+</html>
103
+```
104
+
105
+## CommonJS를 원하시나요?
106
+
107
+만약 React를 [browserify](http://browserify.org/), [webpack](http://webpack.github.io/)이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, [`react` npm 패키지](https://www.npmjs.org/package/react)를 사용하세요. 그 외에도 `jsx` 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.
108
+
109
+## 다음 단계로
110
+
111
+더 알아보려면 [튜토리얼](/react/docs/tutorial.ko-KR.html)과 초심자용 키트의 `examples` 디렉터리에서 다른 예제들을 확인해 보세요.
112
+
113
+커뮤니티의 기여로 운영되는 Wiki도 있습니다: [워크플로우, UI 컴포넌트, 라우팅, 데이터 관리 등](https://github.com/facebook/react/wiki/Complementary-Tools)
114
+
115
+React의 세계에 오신 것을 환영합니다. 행운을 빌어요!