From 52f253cfc8a9b06883aabb5e73659f2b637c8303 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Mon, 13 Apr 2015 23:17:59 +0000 Subject: [PATCH] Rebuild website --- docs/advanced-performance-ko-KR.html | 2 +- docs/component-specs-ko-KR.html | 4 +- docs/interactivity-and-dynamic-uis-ko-KR.html | 2 + docs/reusable-components-ko-KR.html | 2 +- docs/reusable-components.html | 2 +- docs/test-utils.html | 2 +- docs/why-react-ko-KR.html | 4 +- docs/why-react.html | 4 +- docs/working-with-the-browser.html | 6 +- .../communicate-between-components-ko-KR.html | 6 +- tips/dom-event-listeners-ko-KR.html | 484 +++++++++++++++++ tips/false-in-jsx-ko-KR.html | 462 +++++++++++++++++ tips/initial-ajax-ko-KR.html | 489 ++++++++++++++++++ 13 files changed, 1453 insertions(+), 16 deletions(-) create mode 100644 tips/dom-event-listeners-ko-KR.html create mode 100644 tips/false-in-jsx-ko-KR.html create mode 100644 tips/initial-ajax-ko-KR.html diff --git a/docs/advanced-performance-ko-KR.html b/docs/advanced-performance-ko-KR.html index 7726586dba..4d6a99e4e4 100644 --- a/docs/advanced-performance-ko-KR.html +++ b/docs/advanced-performance-ko-KR.html @@ -409,7 +409,7 @@

DOM 조정 회피 #

React는 브라우저에서 렌더된 DOM 하위 트리의 서술자 개념인 가상의 DOM을 사용합니다. 이 병렬적인 서술체는 React가 DOM 노드를 생성하거나 이미 존재하는 DOM 노드에 접근하는 것(JavaScript 객체를 조작하는 것보다 느리죠)을 피하게 해 줍니다. 컴포넌트의 props나 state가 변경되면 React는 새로운 가상의 DOM을 구성해 이전의 것과 비교해서 실제 DOM 업데이트가 필요한지 결정합니다. 가능한 적게 변화를 적용하기 위해, React는 둘이 다를 경우에만 DOM을 조정할 것입니다.

-

이에 더해, React는 컴포넌트 생명주기 함수인 shouldComponentUpdate를 제공합니다. 이는 다시 렌더링하는 프로세스가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 true를 반환해 React가 업데이트를 수행하도록 합니다.

+

이에 더해, React는 컴포넌트 생명주기 함수인 shouldComponentUpdate를 제공합니다. 이는 다시 렌더링하는 프로세스(가상 DOM 비교와 어쩌면 일어날 DOM 조정)가 일어나기 직전에 일어나며 개발자가 프로세스를 중단할 수 있게 합니다. 이 함수의 기본구현은 true를 반환해 React가 업데이트를 수행하도록 합니다.

shouldComponentUpdate: function(nextProps, nextState) {
   return true;
 }
diff --git a/docs/component-specs-ko-KR.html b/docs/component-specs-ko-KR.html
index af7fb57f61..ecf7e737cf 100644
--- a/docs/component-specs-ko-KR.html
+++ b/docs/component-specs-ko-KR.html
@@ -407,11 +407,11 @@
 
     
컴포넌트 명세 #

 
React.createClass()를 호출하여 컴포넌트 클래스를 생성할 때, render 메소드를 포함한 명세 객체를 제공해야 합니다. 또한 필요한 경우 여기에서 설명하는 다른 생명주기 메소드를 명세 객체에 추가로 제공할 수 있습니다.

-
render #
ReactComponent render()
+
render #
ReactElement render()
 

 
render() 메소드는 필수 항목입니다.

 
-
호출되면 this.props와 this.state를 토대로 하나의 자식 컴포넌트를 리턴합니다. 이 자식 컴포넌트는 네이티브 DOM 컴포넌트의 가상 표현 (<div />나 React.DOM.div() 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.

+
호출되면 this.props와 this.state를 토대로 하나의 자식 엘리먼트를 리턴합니다. 이 자식 엘리먼트는 네이티브 DOM 컴포넌트의 가상 표현 (<div />나 React.DOM.div() 등) 또는 직접 정의한 조합(composite) 컴포넌트가 될 수 있습니다.

 
 
아무 것도 렌더링되지 않도록 하려면 null이나 false를 리턴합니다. React는 지금의 차이 비교 알고리즘이 작동할 수 있도록 내부적으로는 <noscript> 태그를 렌더링합니다. null이나 false를 리턴한 경우, React.findDOMNode(this)는 null을 리턴합니다.

 
diff --git a/docs/interactivity-and-dynamic-uis-ko-KR.html b/docs/interactivity-and-dynamic-uis-ko-KR.html
index 1ab6ae1322..68029c1f47 100644
--- a/docs/interactivity-and-dynamic-uis-ko-KR.html
+++ b/docs/interactivity-and-dynamic-uis-ko-KR.html
@@ -430,6 +430,8 @@
 
이벤트 핸들링과 통합적인(Synthetic) 이벤트 #

 
React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 W3C 사양과 같도록 보장됩니다.

 
기본 구현: 오토바인딩과 이벤트 델리게이션 #

+

+
 
코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.

 
 
오토바인딩: JavaScript에서 콜백을 만들 때, 보통은 this의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!

diff --git a/docs/reusable-components-ko-KR.html b/docs/reusable-components-ko-KR.html
index e6e87ca047..52f6ecbaac 100644
--- a/docs/reusable-components-ko-KR.html
+++ b/docs/reusable-components-ko-KR.html
@@ -483,7 +483,7 @@

getDefaultProps()의 결과값은 캐시가 되며, 부모 컴포넌트에서 명시되지 않았을 때 this.props.value가 값을 가질 수 있도록 해주는데 사용됩니다.getDefaultProps()를 사용하면 반복적이고 깨지기 쉬운 코드를 짤 필요없이 그냥 안전하게 prop을 사용할 수 있습니다.

Prop 전달하기: 단축 #

-

React 컴포넌트의 흔히 그냥 기본 HTML을 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 spread 문법을 사용하면 이렇게 할 수 있습니다.

+

React 컴포넌트의 흔히 그냥 기본 HTML 엘리먼트를 확장해서 씁니다. 타이핑을 아끼기 위해 기저의 HTML 엘리먼트에 HTML 속성들을 단순히 복사하는 컴포넌트가 필요할 수도 있습니다. JSX의 spread 문법을 사용하면 이렇게 할 수 있습니다.

var CheckLink = React.createClass({
   render: function() {
     // 모든 prop을 받아서 CheckLink에 넘기고 <a>에 복사합니다.
diff --git a/docs/reusable-components.html b/docs/reusable-components.html
index baccc62808..e1bdca484e 100644
--- a/docs/reusable-components.html
+++ b/docs/reusable-components.html
@@ -484,7 +484,7 @@

The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.

Transferring Props: A Shortcut #

-

A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX spread syntax to achieve this:

+

A common type of React component is one that extends a basic HTML element in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX spread syntax to achieve this:

var CheckLink = React.createClass({
   render: function() {
     // This takes any props passed to CheckLink and copies them to <a>
diff --git a/docs/test-utils.html b/docs/test-utils.html
index e11705d932..438d33cf0d 100644
--- a/docs/test-utils.html
+++ b/docs/test-utils.html
@@ -479,7 +479,7 @@
 
result = renderer.getRenderOutput();
 expect(result.type).toBe('div');
 expect(result.props.children).toEqual([
-  <span className="heading">Title</span>
+  <span className="heading">Title</span>,
   <Subcomponent foo="bar" />
 ]);
 

diff --git a/docs/why-react-ko-KR.html b/docs/why-react-ko-KR.html
index 49231dbdd2..a1b0ae8fb6 100644
--- a/docs/why-react-ko-KR.html
+++ b/docs/why-react-ko-KR.html
@@ -408,9 +408,9 @@
     
React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 MVC 에서의 V 로 생각하는 경향이 있습니다.

 
 
우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기. 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.

-
단순함 #

+
단순함 #

 
당신의 애플리케이션이 특정 시점에 어떻게 보여야 할지를 단순히 표현하는 것만으로, 데이터가 변할 때 React는 자동으로 모든 UI 업데이트를 관리해줍니다.

-
선언적 문법 #

+
선언적 문법 #

 
데이터가 변할 때 React는 "새로 고침" 버튼을 누르듯이 작동하며, 데이터의 바뀐 부분만을 업데이트할 수 있습니다.

 
구성적인 컴포넌트를 만드세요 #

 
React는 재사용 가능한 컴포넌트들을 만드는 데에 도움이 됩니다. 사실, React를 사용하면 단지 컴포넌트를 만드는 일만 하게 됩니다. 컴포넌트들은 잘 캡슐화되어 되어 있기 때문에, 컴포넌트들은 코드의 재사용성을 높이고, 테스트를 쉽게 해 주며, 관심 분리의 원칙(separation of concerns)을 지키게 해 줍니다.

diff --git a/docs/why-react.html b/docs/why-react.html
index c7c1144368..faa0a10c07 100644
--- a/docs/why-react.html
+++ b/docs/why-react.html
@@ -408,9 +408,9 @@
     
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

 
 
We built React to solve one problem: building large applications with data that changes over time. To do this, React uses two main ideas.

-
Simple #

+
Simple #

 
Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

-
Declarative #

+
Declarative #

 
When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

 
Build Composable Components #

 
React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.

diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html
index e12ea85426..4352e3b919 100644
--- a/docs/working-with-the-browser.html
+++ b/docs/working-with-the-browser.html
@@ -486,9 +486,9 @@
 
Browser Support and Polyfills #

 
At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing +new Date(), we can just write Date.now(). Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.

 
-
In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like es5-shim.

+
In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like es5-shim.

 
Polyfills Needed to Support Older Browsers #

-
es5-shim.js from kriskowal's es5-shim provides the following that React needs:

+
es5-shim.js from kriskowal's es5-shim provides the following that React needs:

 
 
    
 
  • Array.isArray
    • 
@@ -503,7 +503,7 @@
 
  • String.prototype.trim
    • 
 

 
-
es5-sham.js, also from kriskowal's es5-shim, provides the following that React needs:

+
es5-sham.js, also from kriskowal's es5-shim, provides the following that React needs:

 
 
    
 
  • Object.create
    • 
diff --git a/tips/communicate-between-components-ko-KR.html b/tips/communicate-between-components-ko-KR.html
index 0128718671..ad01fa72bb 100644
--- a/tips/communicate-between-components-ko-KR.html
+++ b/tips/communicate-between-components-ko-KR.html
@@ -424,12 +424,12 @@
 });
 
 React.render(
-  <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode );
+  <GroceryList items={['사과', '바나나', '크랜베리']} />, mountNode
+);

bind(this, arg1, arg2, ...)의 사용을 확인하세요: 간단히 handleClick에 인자를 더 넘겼습니다. 이는 React의 새로운 컨셉이 아닙니다; 그냥 JavaScript죠.

-

부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. -componentDidMount()에서 이벤트를 구독하고, componentWillUnmount()에서 해제합니다. 이벤트를 받으면 setState()를 호출합니다.

+

부모-자식 관계가 없는 두 컴포넌트간의 통신을 위해, 별도로 전역(global) 이벤트 시스템을 사용할 수 있습니다. componentDidMount()에서 이벤트를 구독하고, componentWillUnmount()에서 해제합니다. 이벤트를 받으면 setState()를 호출합니다. Flux 패턴은 이를 정리하는 방법 중 하나입니다.

diff --git a/tips/dom-event-listeners-ko-KR.html b/tips/dom-event-listeners-ko-KR.html new file mode 100644 index 0000000000..268b33803d --- /dev/null +++ b/tips/dom-event-listeners-ko-KR.html @@ -0,0 +1,484 @@ + + + + + + + 컴포넌트에서 DOM 이벤트 리스너 | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + + + +
+
+ + + +
+
+ + +
+

Quick Start

+ +
+ +
+

Community Resources

+ +
+ +
+

Guides

+ +
+ +
+

Reference

+ +
+ +
+

Flux

+ +
+ + + + +
+

Tips

+ +
+ +
+ + +
+

컴포넌트에서 DOM 이벤트 리스너

+
+
+

주의:

+ +

이 글은 React에서 제공되지 않은 DOM 이벤트를 어떻게 붙이는지 설명합니다. (더 자세한 정보는 여기에서 보세요.). 이는 jQuery 같은 다른 라이브러리들을 통합할 때 좋습니다.

+
+ +

윈도우 크기를 조절해봅시다.

+
var Box = React.createClass({
+  getInitialState: function() {
+    return {windowWidth: window.innerWidth};
+  },
+
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+
+  componentDidMount: function() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  componentWillUnmount: function() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  render: function() {
+    return <div>Current window width: {this.state.windowWidth}</div>;
+  }
+});
+
+React.render(<Box />, mountNode);
+
+

컴포넌트가 마운트 되고 DOM 표현을 가지게 되면 componentDidMount가 호출됩니다. 일반적인 DOM 이벤트를 붙이는 곳으로 여기를 종종 사용합니다.

+ +

이벤트 콜백은 원래 엘리먼트 대신 React 컴포넌트에 바인드하는 걸 주의합시다. React는 오토바인드 과정에서 메서드를 현재 컴포넌트 인스턴스로 바인드합니다.

+ + +
+ + ← Prev + + + Next → + +
+
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
+ © 2013–2015 Facebook Inc.
+ Documentation licensed under CC BY 4.0. +
+
+
+
+ + + + diff --git a/tips/false-in-jsx-ko-KR.html b/tips/false-in-jsx-ko-KR.html new file mode 100644 index 0000000000..64f72c530f --- /dev/null +++ b/tips/false-in-jsx-ko-KR.html @@ -0,0 +1,462 @@ + + + + + + + JSX에서 False | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + + + +
+
+ + + +
+
+ + +
+

Quick Start

+ +
+ +
+

Community Resources

+ +
+ +
+

Guides

+ +
+ +
+

Reference

+ +
+ +
+

Flux

+ +
+ + + + +
+

Tips

+ +
+ +
+ + +
+

JSX에서 False

+
+

false 렌더링이 여러 문맥에서 어떻게 다뤄지는지 봅시다.

+ +

id="false"로 렌더링

+
React.render(<div id={false} />, mountNode);
+
+

문자열 "false"를 입력값으로

+
React.render(<input value={false} />, mountNode);
+
+

자식 없음

+
React.render(<div>{false}</div>, mountNode);
+
+

div 자식으로 쓰인 문자열 "false"를 렌더링하지 않은 것은 더 일반적인 사용 사례를 허용하기 위함입니다. <div>{x > 1 && '하나 이상의 아이템을 가졌습니다.'}</div>

+ + +
+ + ← Prev + + + Next → + +
+
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
+ © 2013–2015 Facebook Inc.
+ Documentation licensed under CC BY 4.0. +
+
+
+
+ + + + diff --git a/tips/initial-ajax-ko-KR.html b/tips/initial-ajax-ko-KR.html new file mode 100644 index 0000000000..f831ee7670 --- /dev/null +++ b/tips/initial-ajax-ko-KR.html @@ -0,0 +1,489 @@ + + + + + + + AJAX를 통해 초기 데이터 읽어오기 | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + + + +
+
+ + + +
+
+ + +
+

Quick Start

+ +
+ +
+

Community Resources

+ +
+ +
+

Guides

+ +
+ +
+

Reference

+ +
+ +
+

Flux

+ +
+ + + + +
+

Tips

+ +
+ +
+ + +
+

AJAX를 통해 초기 데이터 읽어오기

+
+

componentDidMount에서 데이터를 가져옵니다. 응답이 올 때 데이터가 state에 저장되고 렌더링을 시작하여 UI를 갱신합니다.

+ +

비동기 요청의 응답을 처리하여 state를 변경하기 전에, 컴포넌트가 여전히 마운트되었는지를 확인하기 위해 this.isMounted()를 사용합니다.

+ +

이 예제는 희망하는 Github 사용자의 최근 gist를 가져옵니다.

+
var UserGist = React.createClass({
+  getInitialState: function() {
+    return {
+      username: '',
+      lastGistUrl: ''
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      var lastGist = result[0];
+      if (this.isMounted()) {
+        this.setState({
+          username: lastGist.owner.login,
+          lastGistUrl: lastGist.html_url
+        });
+      }
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.state.username}'s last gist is
+        <a href={this.state.lastGistUrl}>here</a>.
+      </div>
+    );
+  }
+});
+
+React.render(
+  <UserGist source="https://api.github.com/users/octocat/gists" />,
+  mountNode
+);
+
+ +
+ + ← Prev + + + Next → + +
+
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
+ © 2013–2015 Facebook Inc.
+ Documentation licensed under CC BY 4.0. +
+
+
+
+ + + +