Translate integrating-with-other-libraries #121

yoeubi · 2019-05-21T16:14:33Z

Progress

번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

netlify · 2019-05-21T16:21:39Z

Deploy preview for ko-reactjs-org ready!

Built with commit eb65bc3

https://deploy-preview-121--ko-reactjs-org.netlify.com

content/docs/integrating-with-other-libraries.md

Kim-Ki-Soo · 2019-05-23T16:21:29Z

content/docs/integrating-with-other-libraries.md


-To prevent React from touching the DOM after mounting, we will return an empty `<div />` from the `render()` method. The `<div />` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
+마운팅 후 React가 DOM에 건드리는 것을 방지하기 위해 `render()` 메서드에서 빈 `<div />`를 반환합니다. 해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않습니다. 그래야 React가 업데이트할 이유가 없습니다. jQuery 플러그인이 DOM의 일부를 다룰수 있게 자유롭게 관리할 수 있습니다.


It might be write "자식을 가지지 않기 때문에"

저도 동일하게 때문에로 문장을 다듬는게 좋아보여요.

해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않습니다. 그래야 React가 업데이트할 이유가 없습니다.

to

해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않기 때문에 React가 업데이트할 이유가 없습니다.

taehwanno

리뷰가 꽤 늦었네요 😢 자잘한 수정사항 몇 개 리뷰했습니당

taehwanno · 2019-08-03T06:13:59Z

content/docs/integrating-with-other-libraries.md

 permalink: docs/integrating-with-other-libraries.html
 ---

-React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
+React는 어떤 웹 애플리케이션 안에서 사용할 수 있습니다. 다른 애플리케이션에 포함될 수 있으며 약간의 노력으로 React 안에 다른 애플리케이션 포함할 수 있습니다. 이 가이드는 [jQuery](https://jquery.com/)와 [Backbone](https://backbonejs.org/)의 통합에 중점을 맞추어 일반적인 몇 가지 사용 사례를 살펴봅니다. 동일한 아이디어로 기존 코드와 컴포넌트를 통합하는 데도 적용할 수 있습니다.


어떤 웹 애플리케이션이든 사용할 수 있습니다.

taehwanno · 2019-08-03T06:20:27Z

content/docs/integrating-with-other-libraries.md


-We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin.
+루트 DOM 요소에 [ref](/docs/refs-and-the-dom.html)를 부착합니다. `componentDidMount` 내부에서 jQuery 플러그인에 전달하기 위해 참조를 합니다.


DOM 요소 -> DOM 엘리먼트 (Translate Glossary)

루트 -> 최상위

부착합니다. -> 붙입니다. (순화해봤어요)

뒷 문장을 조금 더 정리해서 componentDidMount 내부에서 jQuery 플러그인에 전달하기 위해 최상위 DOM 엘리먼트에 대한 참조를 얻습니다. 로 제안드려봐요.

content/docs/integrating-with-other-libraries.md

taehwanno · 2019-08-03T06:29:06Z

content/docs/integrating-with-other-libraries.md


-To prevent React from touching the DOM after mounting, we will return an empty `<div />` from the `render()` method. The `<div />` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
+마운팅 후 React가 DOM에 건드리는 것을 방지하기 위해 `render()` 메서드에서 빈 `<div />`를 반환합니다. 해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않습니다. 그래야 React가 업데이트할 이유가 없습니다. jQuery 플러그인이 DOM의 일부를 다룰수 있게 자유롭게 관리할 수 있습니다.


저도 동일하게 때문에로 문장을 다듬는게 좋아보여요.

해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않습니다. 그래야 React가 업데이트할 이유가 없습니다.

to

해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않기 때문에 React가 업데이트할 이유가 없습니다.

taehwanno · 2019-08-03T06:29:37Z

content/docs/integrating-with-other-libraries.md

@@ -39,21 +39,21 @@ class SomePlugin extends React.Component {
 }
 ```

-Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks.
+`componentDidMout`, `componentWillUnmount` 두 가지의 [생명주기 메서드](/docs/react-component.html#the-component-lifecycle)를 정의했다는 것을 주의합니다. 많은 jQuery 플러그인은 DOM에 이벤트 리스너를 등록하므로 `componentWillUnmount` 안에서 해제하는 것이 중요합니다. 플러그인이 클린업을 위한 메서드를 제공하지 않는다면 자체적으로 해당 메서드를 제공해야 합니다. 메모리 누수를 방지하기 위해 플러그인이 등록한 모든 이벤트 리스너를 제거해야 하는 것을 잊어서는 안 됩니다.


componentDidMout -> componentDidMount

클린업을 위한 -> 해제를 위한으로 다듬어도 문제없어보여요.

taehwanno · 2019-08-03T06:35:40Z

content/docs/integrating-with-other-libraries.md

@@ -85,9 +85,10 @@ class Chosen extends React.Component {
 }
 ```

-Notice how we wrapped `<select>` in an extra `<div>`. This is necessary because Chosen will append another DOM element right after the `<select>` node we passed to it. However, as far as React is concerned, `<div>` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes.
+별도의 `<div>`로 `<select>`를 어떻게 감쌌는지 주의하세요. Chosen이 전달한 `<select>` 노드 바로 다음에 다른 DOM 요소를 추가하기 때문에 필요합니다.
+React에 관한, `<div>`는 항상 단일 자식만 가집니다. React 업데이트가 Chosen이 추가한 DOM 노드와 충돌하지 않게 하는 방법입니다. React 흐름 외부에서 DOM을 수정하는 경우 React가 해당 DOM 노드를 건드릴 이유가 없는지 확인해야 합니다.


88번 라인 뒤에 불필요한 개행이 추가되었어요. 88, 89번 라인을 하나의 문장으로 처리 부탁드려요.

React에 관한 -> 하지만 React가 관여하는 한으로 제안드려봐요.

taehwanno · 2019-08-03T06:38:10Z

content/docs/integrating-with-other-libraries.md


 ```js
 <select className="Chosen-select" ref={el => this.el = el}>
 ```

-This is enough to get our component to render, but we also want to be notified about the value changes. To do this, we will subscribe to the jQuery `change` event on the `<select>` managed by Chosen.
+컴포넌트를 렌더링하기에 충분하지만, 값이 변경될 때마다 알림을 받고 하겠습니다. 이를 위해 Chosen이 관리하는 `<select>`에서 jQuery change 이벤트를 구독합니다.


알림을 받고 하겠습니다. -> 알림을 받기를 원합니다.

taehwanno · 2019-08-03T06:44:39Z

content/docs/integrating-with-other-libraries.md


-Chosen's documentation suggests that we can use jQuery `trigger()` API to notify it about changes to the original DOM element. We will let React take care of updating `this.props.children` inside `<select>`, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list:
+Chosen 문서에서 따르면 jQuery `trigger()` API를 사용하여 원본 DOM 엘리먼트에 변경 사항에 대해 알 수 있습니다. React가 `<select>`안에 `this.props.children`을 업데이트하지만 Chosen에게 자식 목록의 변경에 알려주는 `componentDidUpdate()` 생명주기 메서드도 추가합니다.


원본 DOM 엘리먼트에 -> 원본 DOM 엘리먼트의

taehwanno · 2019-08-03T06:53:19Z

content/docs/integrating-with-other-libraries.md


-[Backbone](https://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
+[Backbone](https://backbonejs.org/) 뷰는 일반적으로 HTML 문자열 또는 문자열로 제공되는 템플릿 함수를 사용하여 DOM 요소를 위한 콘텐츠를 생성합니다. 이 프로세스 또한 React 컴포넌트 렌더링으로 대체할 수 있습니다.


DOM 요소 -> DOM 엘리먼트

taehwanno · 2019-08-05T11:51:06Z

content/docs/integrating-with-other-libraries.md


-It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
+`remove`메서드 안에서 `ReactDOM.unmountComponentAtNode()` 호출하여 분리가 됐을 때 React가 컴포넌트 트리와 관련된 이벤트 핸들러와 다른 리소스를 등록 해지하는 것이 중요합니다.


remove와 메서드 사이에 공백 추가 부탁드려요.

complete translate

e5101a8

yoeubi changed the title ~~complete translate~~ Translate integrating-with-other-libraries May 21, 2019

taehwanno added the needs review Needs review A pull request ready to be reviewed label May 23, 2019

tesseralis mentioned this pull request May 23, 2019

Korean Translation Progress #1

Closed

98 tasks

Kim-Ki-Soo reviewed May 23, 2019

View reviewed changes

taehwanno reviewed Aug 5, 2019

View reviewed changes

taehwanno added needs author response Changes requested needing author's input and removed needs review Needs review A pull request ready to be reviewed labels Aug 5, 2019

gnujoow added no long-term response Waiting for author response for a long time and removed needs author response Changes requested needing author's input labels Nov 12, 2019

gnujoow mentioned this pull request Nov 19, 2019

PR request with no-response #94

Closed

taehwanno added 2 commits November 19, 2019 23:29

Merge branch 'master' into translate-integrating

6ab5057

Fix some sentence

eb65bc3

taehwanno approved these changes Nov 19, 2019

View reviewed changes

taehwanno added needs +1 approval and removed no long-term response Waiting for author response for a long time labels Nov 19, 2019

gnujoow approved these changes Nov 21, 2019

View reviewed changes

gnujoow added ready to merge push the merge button :) and removed needs +1 approval labels Nov 21, 2019

taehwanno merged commit 16225c6 into reactjs:master Nov 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate integrating-with-other-libraries #121

Translate integrating-with-other-libraries #121

yoeubi commented May 21, 2019 •

edited

netlify bot commented May 21, 2019 •

edited

Kim-Ki-Soo May 23, 2019

taehwanno Aug 3, 2019

taehwanno left a comment

taehwanno Aug 3, 2019

taehwanno Aug 3, 2019

taehwanno Aug 3, 2019

taehwanno Aug 3, 2019

taehwanno Aug 3, 2019 •

edited

taehwanno Aug 3, 2019

taehwanno Aug 3, 2019

taehwanno Aug 3, 2019

taehwanno Aug 5, 2019


		To prevent React from touching the DOM after mounting, we will return an empty `<div />` from the `render()` method. The `<div />` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
		마운팅 후 React가 DOM에 건드리는 것을 방지하기 위해 `render()` 메서드에서 빈 `<div />`를 반환합니다. 해당 `<div />` 요소는 그 어떤 프로퍼티 또는 자식을 가지지 않습니다. 그래야 React가 업데이트할 이유가 없습니다. jQuery 플러그인이 DOM의 일부를 다룰수 있게 자유롭게 관리할 수 있습니다.


		We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin.
		루트 DOM 요소에 [ref](/docs/refs-and-the-dom.html)를 부착합니다. `componentDidMount` 내부에서 jQuery 플러그인에 전달하기 위해 참조를 합니다.


		Chosen's documentation suggests that we can use jQuery `trigger()` API to notify it about changes to the original DOM element. We will let React take care of updating `this.props.children` inside `<select>`, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list:
		Chosen 문서에서 따르면 jQuery `trigger()` API를 사용하여 원본 DOM 엘리먼트에 변경 사항에 대해 알 수 있습니다. React가 `<select>`안에 `this.props.children`을 업데이트하지만 Chosen에게 자식 목록의 변경에 알려주는 `componentDidUpdate()` 생명주기 메서드도 추가합니다.


		[Backbone](https://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
		[Backbone](https://backbonejs.org/) 뷰는 일반적으로 HTML 문자열 또는 문자열로 제공되는 템플릿 함수를 사용하여 DOM 요소를 위한 콘텐츠를 생성합니다. 이 프로세스 또한 React 컴포넌트 렌더링으로 대체할 수 있습니다.


		It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
		`remove`메서드 안에서 `ReactDOM.unmountComponentAtNode()` 호출하여 분리가 됐을 때 React가 컴포넌트 트리와 관련된 이벤트 핸들러와 다른 리소스를 등록 해지하는 것이 중요합니다.

Translate integrating-with-other-libraries #121

Translate integrating-with-other-libraries #121

Conversation

yoeubi commented May 21, 2019 • edited

Progress

netlify bot commented May 21, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taehwanno left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taehwanno Aug 3, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yoeubi commented May 21, 2019 •

edited

netlify bot commented May 21, 2019 •

edited

taehwanno Aug 3, 2019 •

edited