[docs] Update URL of docs, image

docs/docs/01-why-react.ko-KR.md

@@ -27,4 +27,4 @@ React는 많은 관습적인 사고에 도전하며, 첫눈에 볼 때는 이상
 
 ## 더 알아보기
 
-[이 블로그 포스트](/react/blog/2013/06/05/why-react.html)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.
+[이 블로그 포스트](/docs/docs/why-react.md)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.

docs/docs/02-displaying-data.ko-KR.md

@@ -89,9 +89,9 @@ JSX를 이용하면:
 
 우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
 
-JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html)를 살펴 보시기 바랍니다. 또는, [바벨 REPL](https://babeljs.io/repl/)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
+JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/docs/docs/02.1-jsx-in-depth.ko-KR.md)를 살펴 보시기 바랍니다. 또는, [바벨 REPL](https://babeljs.io/repl/)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
 
-JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
+JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/docs/docs/02.3-jsx-gotchas.ko-KR.md)에 중요한 차이점들에 대해 설명되어 있습니다.
 
 [바벨에서 JSX를 시작하는 여러 방법을 제공합니다](http://babeljs.io/docs/setup/). 여기에는 커맨드 라인 툴부터 루비 온 레일스 연동까지 다양한 방법이 있습니다. 가장 편한 툴을 사용하세요.
 

docs/docs/02.1-jsx-in-depth.ko-KR.md

@@ -74,7 +74,7 @@ var app = React.createElement(
 );
 ```
 
-클래스에 [displayName](/react/docs/component-specs-ko-KR.html#displayName)이 정의되어 있지 않으면 JSX는 변수명을 displayName으로 간주할 것입니다:
+클래스에 [displayName](/docs/docs/ref-03-component-specs.ko-KR.md#displayName)이 정의되어 있지 않으면 JSX는 변수명을 displayName으로 간주할 것입니다:
 
 ```javascript
 // 입력 (JSX):
@@ -83,9 +83,9 @@ var Nav = React.createClass({ });
 var Nav = React.createClass({displayName: "Nav", });
 ```
 
-[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
+[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/docs/html-jsx.md)는 이미 있는 HTML을 JSX로 변환해 줍니다.
 
-JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
+JSX를 사용 하시려면, [시작하기](/docs/docs/getting-started.ko-KR.md) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
 
 > 주의:
 >
@@ -221,4 +221,4 @@ var content = (
 
 > 주의:
 >
-> JSX 는 HTML과 비슷하지만 완전히 같지는 않습니다. 중요한 차이점을 보시려면 [JSX gotchas](/react/docs/jsx-gotchas-ko-KR.html)를 보세요.
+> JSX 는 HTML과 비슷하지만 완전히 같지는 않습니다. 중요한 차이점을 보시려면 [JSX gotchas](/docs/docs/02.3-jsx-gotchas.ko-KR.md)를 보세요.

docs/docs/02.3-jsx-gotchas.ko-KR.md

@@ -1,16 +1,16 @@
 ---
 id: jsx-gotchas-ko-KR
 title: JSX Gotchas
-permalink: jsx-gotchas-ko-KR.html
-prev: jsx-spread-ko-KR.html
-next: interactivity-and-dynamic-uis-ko-KR.html
+permalink: jsx-gotchas-ko-KR.md
+prev: jsx-spread-ko-KR.md
+next: interactivity-and-dynamic-uis-ko-KR.md
 ---
 
 JSX는 HTML처럼 보이지만, 작업하다 보면 마주치게 될 몇 가지 중요한 차이점이 있습니다.
 
 > 주의:
 >
-> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/react/tips/dangerously-set-inner-html-ko-KR.html)를 보세요.
+> 인라인 `style` 어트리뷰트 같은 DOM과의 차이점은 [여기](/docs/tips/dangerously-set-inner-html-ko-KR.md)를 보세요.
 
 ## HTML 엔티티
 
@@ -46,7 +46,7 @@ JSX의 리터럴 텍스트에 HTML 엔티티를 넣을 수 있습니다.
 <div>{['First ', <span>&middot;</span>, ' Second']}</div>
 ```
 
-최후의 수단으로, 항상 [생 HTML을 삽입](/react/docs/dom-differences-ko-KR.html)할 수 있습니다.
+최후의 수단으로, 항상 [생 HTML을 삽입](/docs/docs/ref-06-dom-differences.ko-KR.md)할 수 있습니다.
 
 ```javascript
 <div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />

docs/docs/03-interactivity-and-dynamic-uis.ko-KR.md

@@ -6,7 +6,7 @@ prev: jsx-gotchas-ko-KR.html
 next: multiple-components-ko-KR.html
 ---
 
-이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
+이미 React에서 [어떻게 데이터를 표시](/docs/docs/02-displaying-data-ko-KR.md)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
 
 ## 간단한 예제
 

docs/docs/04-multiple-components.ko-KR.md

@@ -66,7 +66,7 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
 <Parent><Child /></Parent>
 ```
 
-`Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/react/docs/top-level-api-ko-KR.html#react.children)를 사용해 자식들을 관리합니다.
+`Parent`는 `this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/docs/docs/ref-01-top-level-api.ko-KR.md#react.children)를 사용해 자식들을 관리합니다.
 
 ### 자식 Reconciliation (비교조정)
 
@@ -176,7 +176,7 @@ React에서 데이터는 위에서 말한 것처럼 `props`를 통해 소유자
 
 소유자가 가지고 있는 노드의 수가 많아지면 데이터가 변화하는 비용이 증가할 것으로 생각할 수도 있습니다. 좋은 소식은 JavaScript의 속도는 빠르고 `render()` 메소드는 꽤 간단한 경향이 있어, 대부분 애플리케이션에서 매우 빠르다는 점입니다. 덧붙여, 대부분의 병목 현상은 JS 실행이 아닌 DOM 변경에서 일어나고, React는 배치와 탐지 변경을 이용해 최적화해 줍니다.
 
-하지만, 가끔 성능을 위해 정교하게 제어해야 할 때도 있습니다. 이런 경우, React가 서브트리의 처리를 건너 뛰도록 간단히 `shouldComponentUpdate()`를 오버라이드해 false를 리턴하게 할 수 있습니다. 좀 더 자세한 정보는 [React 참조 문서](/react/docs/component-specs-ko-KR.html)를 보세요.
+하지만, 가끔 성능을 위해 정교하게 제어해야 할 때도 있습니다. 이런 경우, React가 서브트리의 처리를 건너 뛰도록 간단히 `shouldComponentUpdate()`를 오버라이드해 false를 리턴하게 할 수 있습니다. 좀 더 자세한 정보는 [React 참조 문서](/docs/docs/ref-03-component-specs.ko-KR.md)를 보세요.
 
 > 주의:
 >

docs/docs/05-reusable-components.ko-KR.md

@@ -139,7 +139,7 @@ var MyComponent = React.createClass({
 
 컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
 
-예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
+예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/docs/docs/08-working-with-the-browser.ko-KR.md#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
 
 ```javascript
 var SetIntervalMixin = {

docs/docs/06-transferring-props.ko-KR.md

@@ -8,7 +8,7 @@ next: forms-ko-KR.html
 
 React에서는 컴포넌트를 감싸서 추상화하는 것이 일반적인 패턴입니다. 외부 컴포넌트에서는 간단한 프로퍼티만을 노출하여 복잡한 세부 구현을 감출 수 있습니다.
 
-[JSX 스프레드 어트리뷰트](/react/docs/jsx-spread-ko-KR.html)를 통해 props에 추가적인 값을 병합할 수 있습니다.
+[JSX 스프레드 어트리뷰트](/docs/docs/02.2-jsx-spread.ko-KR.md)를 통해 props에 추가적인 값을 병합할 수 있습니다.
 
 ```javascript
 <Component {...this.props} more="values" />
@@ -49,7 +49,7 @@ ReactDOM.render(
 
 > 주의:
 >
-> `...` 구문은 객체 잔여 스프레드 제안의 일부입니다. 이 제안은 표준화 과정에 있습니다. 더 자세한 내용은 밑의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) 부분을 참고하세요.
+> `...` 구문은 객체 잔여 스프레드 제안의 일부입니다. 이 제안은 표준화 과정에 있습니다. 더 자세한 내용은 밑의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/docs/docs/06-transferring-props.ko-KR.md#rest-and-spread-properties-...) 부분을 참고하세요.
 
 
 때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.

docs/docs/07-forms.ko-KR.md

@@ -8,7 +8,7 @@ next: working-with-the-browser-ko-KR.html
 
 `<input>`, `<textarea>`, `<option>` 같은 폼 컴포넌트는 다른 네이티브 컴포넌트와 다릅니다. 왜냐하면, 사용자의 상호작용에 의해 변경될 수 있기 때문이죠. 이런 컴포넌트들은 사용자의 상호작용에 반응하여 폼을 더 쉽게 관리할 수 있도록 인터페이스를 제공합니다.
 
-`<form>` 이벤트에 관한 정보는 [폼 이벤트](/react/docs/events-ko-KR.html#form-events)를 보세요.
+`<form>` 이벤트에 관한 정보는 [폼 이벤트](/docs/docs/ref-05-events.ko-KR.md#form-events)를 보세요.
 
 ## Props의 상호작용
 

docs/docs/08-working-with-the-browser.ko-KR.md

@@ -20,7 +20,7 @@ React는 DOM을 직접 다루지 않기 때문에 매우 빠릅니다. React는
 
 ## Refs와 findDOMNode()
 
-브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. `ref`를 어떤 엘리먼트에도 붙일 수 있으며, 이를 통해 컴포넌트 **지원 인스턴스**를 참조 할 수 있습니다. 이는 컴포넌트에 필수 적인 기능을 호출할 때나 기저의 DOM 노드에 접근하고 싶을 때 유용합니다. [refs에서 컴포넌트로](/react/docs/more-about-refs-ko-KR.html) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요.
+브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. `ref`를 어떤 엘리먼트에도 붙일 수 있으며, 이를 통해 컴포넌트 **지원 인스턴스**를 참조 할 수 있습니다. 이는 컴포넌트에 필수 적인 기능을 호출할 때나 기저의 DOM 노드에 접근하고 싶을 때 유용합니다. [refs에서 컴포넌트로](/docs/docs/08.1-more-about-refs.ko-KR.md) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요.
 
 
 <a name="component-lifecycle"></a>

docs/docs/08.1-more-about-refs.ko-KR.md

@@ -11,7 +11,7 @@ ref를 어떻게 얻는지 살펴보고, 예제를 완성해 봅시다.
 
 ## ReactDOM.render에서 반환된 ref
 
-컴포넌트에서 정의한, 가상의 DOM 엘리먼트를 반환하는 `render()`와 헷갈리지 않도록 합니다. [ReactDOM.render()](/react/docs/top-level-api-ko-KR.html#reactdom.render)는 컴포넌트의 **지원 인스턴스(backing instance)**에 대한 참조를 반환 합니다. [상태를 가지지 않는 컴포넌트](/react/docs/reusable-components-ko-KR.html#stateless-functions)에 대해선 `null`을 반환하죠.
+컴포넌트에서 정의한, 가상의 DOM 엘리먼트를 반환하는 `render()`와 헷갈리지 않도록 합니다. [ReactDOM.render()](/docs/docs/ref-01-top-level-api.ko-KR.md#reactdom.render)는 컴포넌트의 **지원 인스턴스(backing instance)**에 대한 참조를 반환 합니다. [상태를 가지지 않는 컴포넌트](/docs/docs/05-reusable-components.ko-KR.md#stateless-functions)에 대해선 `null`을 반환하죠.
 
 
 ```js
@@ -118,7 +118,7 @@ ReactDOM.render(
 
 이 예제에서, 텍스트 인풋의 **지원 인스턴스**에 대한 참조를 얻었으며 버튼이 클릭되었을때 `focus()`를 호출했습니다.
 
-합성 컴포넌트에서는 참조는 컴포넌트 클래스의 인스턴스를 가리키기 때문에 클래스에 정의된 어떤 메소드도 호출할 수 있습니다. 컴포넌트의 기저에 있는 DOM 노드에 접근하기 위해서는 [ReactDOM.findDOMNode](/react/docs/top-level-api-ko-KR.html#reactdom.finddomnode)를 "탈출구"로 사용할 수 있습니다. 하지만 이는 캡슐화를 깨며, 대부분의 경우 React 모델을 이용해 더 명확한 방법으로 구조를 짤 수 있기 때문에 추천하지 않습니다.
+합성 컴포넌트에서는 참조는 컴포넌트 클래스의 인스턴스를 가리키기 때문에 클래스에 정의된 어떤 메소드도 호출할 수 있습니다. 컴포넌트의 기저에 있는 DOM 노드에 접근하기 위해서는 [ReactDOM.findDOMNode](/docs/docs/ref-01-top-level-api.ko-KR.md#reactdom.finddomnode)를 "탈출구"로 사용할 수 있습니다. 하지만 이는 캡슐화를 깨며, 대부분의 경우 React 모델을 이용해 더 명확한 방법으로 구조를 짤 수 있기 때문에 추천하지 않습니다.
 
 
 ## 요약
@@ -136,4 +136,4 @@ Refs는 반응적인 `props`와 `state` 스트리밍을 통해서는 불편했
 - 컴포넌트의 렌더 메소드에서는, 혹은 컴포넌트의 렌더 메소드가 콜스택 어디에서든 실행되는 동안에는 절대 접근하지 마세요.
 - Google Closure Compiler에서의 어드벤스드 모드 분쇄 복원력 유지(to preserve advanced-mode crushing resilience)를 위해서는 문자열로 정의한 것을 절대 프로퍼티로 접근하지 마세요. ref가 ref="myRefString"으로 정의되어 있다면 this.refs['myRefString']으로만 접근해야 한다는 이야기 입니다.
 - React로 앱을 여럿 만들어 본 경험이 없다면, 보통은 처음엔 앱에서 "무언가 일어나도록" 하는데 refs를 사용하게 될 것입니다. 이 경우, 잠시 시간을 내어 `state`가 컴포넌트 계층구조의 어느 부분에서 관리되어야 할지 비판적으로 생각해 봅시다. 대개는 state가 계층구조의 더 높은 레벨에서 "소유"하는 것이 타당함이 명확해집니다. 그렇게 함으로써 `ref`를 사용해 "무언가 일어나도록" 하려는 욕망이 대부분 제거됩니다. - 대신에 데이터 플로우를 통해 대개 원하는 바를 달성하게 될 것입니다.
-- Refs는 [상태를 가지지 않는 함수](/react/docs/reusable-components-ko-KR.html#stateless-functions)에 붙일 수 없습니다. 왜냐하면 컴포넌트가 내부 인스턴스를 가지지 않기 때문입니다. 상태를 가지지 않는 컴포넌트는 항상 일반 컴포넌트로 감싸 ref를 조합 컴포넌트에 붙일 수 있습니다.
+- Refs는 [상태를 가지지 않는 함수](/docs/docs/05-reusable-components.ko-KR.md#stateless-functions)에 붙일 수 없습니다. 왜냐하면 컴포넌트가 내부 인스턴스를 가지지 않기 때문입니다. 상태를 가지지 않는 컴포넌트는 항상 일반 컴포넌트로 감싸 ref를 조합 컴포넌트에 붙일 수 있습니다.

docs/docs/09-tooling-integration.ko-KR.md

@@ -12,7 +12,7 @@ next: addons-ko-KR.html
 
 ### CDN-호스트 React
 
-[다운로드 페이지](/react/downloads.html)에서 React의 CDN 호스트 버전을 제공합니다. 이 미리 빌드된 파일들은 UMD 모듈 포맷을 사용합니다. 간단한 `<script>` 태그로 넣어보면 `React` 글로벌이 환경으로 주입(inject)될 것입니다. CommonJS와 AMD환경에서 별도의 작업 없이도 동작해야 합니다.
+[다운로드 페이지](/docs/downloads.md)에서 React의 CDN 호스트 버전을 제공합니다. 이 미리 빌드된 파일들은 UMD 모듈 포맷을 사용합니다. 간단한 `<script>` 태그로 넣어보면 `React` 글로벌이 환경으로 주입(inject)될 것입니다. CommonJS와 AMD환경에서 별도의 작업 없이도 동작해야 합니다.
 
 
 ### master 사용하기

docs/docs/10.1-animation.ko-KR.md

@@ -56,7 +56,7 @@ var TodoList = React.createClass({
 
 > 주의:
 >
-> `ReactCSSTransitionGroup`의 모든 자식은 [`key` 어트리뷰트](/react/docs/multiple-components-ko-KR.html#dynamic-children)를 반드시 만들어야 합니다. 한 아이템을 렌더할 때도 예외는 아닙니다. 키는 React가 어떤 자식이 들어오고, 나가고, 머무르는지 파악할 때 사용합니다.
+> `ReactCSSTransitionGroup`의 모든 자식은 [`key` 어트리뷰트](/docs/docs/04-multiple-components.ko-KR.md#dynamic-children)를 반드시 만들어야 합니다. 한 아이템을 렌더할 때도 예외는 아닙니다. 키는 React가 어떤 자식이 들어오고, 나가고, 머무르는지 파악할 때 사용합니다.
 
 이 컴포넌트에서 새로운 아이템이 `ReactCSSTransitionGroup`에 추가되면 `example-enter` 아이템은 CSS 클래스를 가지게 되고 다음 순간에 `example-enter-active` CSS 클래스가 추가됩니다. 이는 `transitionName` prop을 기반으로 한 관례입니다.