lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update Korean docs to 0.14 

Update getting-started in Korean
main
KwonH 9 years ago
parent
d29cda53cd
commit
784c1d772e
1 changed files with 37 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 51
      docs/getting-started.ko-KR.md

51
docs/getting-started.ko-KR.md
View File

@ -13,13 +13,37 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
* **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)** * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
* [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/) * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
## 초심자용 키트 ## npm으로 React 사용하기
초심자용 키트를 내려받아 시작합니다. React는 CommonJS 모듈과 유사한 시스템인 [browserify](http://browserify.org/) 또는 [webpack](https://webpack.github.io/)를 사용하기를 추천합니다.
[`react`](https://www.npmjs.com/package/react) 와 [`react-dom`](https://www.npmjs.com/package/react-dom) npm
패키지를 이용합니다.
```js
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
```
browserify를 설치한 후에 React DOM을 설치하고 bundle을 빌드합니다.
```sh
$ npm install --save react react-dom
$ browserify -t babelify main.js -o bundle.js
```
## npm 없이 Quick Start 하기
만약 당신이 npm을 사용할 준비가 아직 안되었다면, 미리빌드된 React와 React DOM 파일이 포함된 초심자용 키트를 다운로드 받을 수 있습니다.
<div class="buttons-unit downloads"> <div class="buttons-unit downloads">
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button"> <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
초심자용 키트 내려받기 {{site.react_version}} Download Starter Kit {{site.react_version}}
</a> </a>
</div> </div>
@ -32,6 +56,7 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello React!</title> <title>Hello React!</title>
<script src="build/react.js"></script> <script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head> </head>
<body> <body>
@ -46,7 +71,7 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
</html> </html>
``` ```
JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth-ko-KR.html)을 확인하세요. 일반적인 JavaScript로 번역하기 위해 `<script type="text/jsx">`를 사용하고 `JSXTransformer.js`를 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다. JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth-ko-KR.html)을 확인하세요. vanilla JavaScript로 번역하기 위해 `<script type="text/babel">`를 사용하고 Babel을 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.
### 파일의 분리 ### 파일의 분리
@ -69,19 +94,20 @@ ReactDOM.render(
### 오프라인 변환 ### 오프라인 변환
먼저 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요): 먼저 [Babel](http://babeljs.io/) 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):
``` ```
npm install -g react-tools npm install --global babel
``` ```
그다음, `src/helloworld.js` 파일을 일반 JavaScript 파일로 변환합니다: 그다음, `src/helloworld.js` 파일을 일반 JavaScript 파일로 변환합니다:
``` ```
jsx --watch src/ build/ babel src --watch --out-dir build
``` ```
수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다. 수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다. 더 깊이 사용하고 싶으면 [Babel CLI documentation](http://babeljs.io/docs/usage/cli/)를 읽어보세요.
```javascript{2} ```javascript{2}
ReactDOM.render( ReactDOM.render(
@ -92,14 +118,15 @@ ReactDOM.render(
아래의 내용대로 HTML 파일을 업데이트합니다: 아래의 내용대로 HTML 파일을 업데이트합니다:
```html{7,11} ```html{8,12}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Hello React!</title> <title>Hello React!</title>
<script src="build/react.js"></script> <script src="build/react.js"></script>
<!-- Babel는 이제 불필요합니다! --> <script src="build/react-dom.js"></script>
<!-- No need for Babel! -->
</head> </head>
<body> <body>
<div id="example"></div> <div id="example"></div>
@ -108,10 +135,6 @@ ReactDOM.render(
</html> </html>
``` ```
## CommonJS를 원하시나요?
만약 React를 [browserify](http://browserify.org/), [webpack](https://webpack.github.io/)이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, [`react` npm 패키지](https://www.npmjs.com/package/react)를 사용하세요. 그 외에도 `jsx` 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.
## 다음 단계로 ## 다음 단계로
더 알아보려면 [튜토리얼](/react/docs/tutorial-ko-KR.html)과 초심자용 키트의 `examples` 디렉터리에서 다른 예제들을 확인해 보세요. 더 알아보려면 [튜토리얼](/react/docs/tutorial-ko-KR.html)과 초심자용 키트의 `examples` 디렉터리에서 다른 예제들을 확인해 보세요.

Write Preview
Loading…
Cancel
Save