From 4b4d797e8415e1edcdaaf70954643a0feefb8025 Mon Sep 17 00:00:00 2001 From: Chanhee Lee Date: Tue, 26 Feb 2019 15:25:59 +0900 Subject: [PATCH 1/5] Translate Web Components --- content/docs/web-components.md | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index cbfcc80e1..5244ab6c5 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -1,16 +1,16 @@ --- id: web-components -title: Web Components +title: 웹 컴포넌트 permalink: docs/web-components.html redirect_from: - "docs/webcomponents.html" --- -React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. +React와 [웹 컴포넌트](https://developer.mozilla.org/ko/docs/Web/Web_Components)는 서로 다른 문제를 해결하기 위해 만들어졌습니다. 웹 컴포넌트는 재사용할 수 있는 컴포넌트에 강한 캡슐화를 제공하는 반면, React는 데이터와 DOM을 동기화하는 선언적 라이브러리를 제공합니다. -Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components. +두 목표는 상호보완적입니다. React에서 웹 컴포넌트를 사용할지, 웹 컴포넌트를 React에서 사용할지, 둘 다 사용할지는 자유롭게 정하실 수 있습니다. -## Using Web Components in React {#using-web-components-in-react} +## React에서 웹 컴포넌트 사용하기 {#using-web-components-in-react} ```javascript class HelloMessage extends React.Component { @@ -20,14 +20,13 @@ class HelloMessage extends React.Component { } ``` -> Note: +> 주의: > -> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component. +> 웹 컴포넌트는 종종 강제성을 띠는 API를 열어놓고 있습니다. 예를 들어, `video`라는 웹 컴포넌트는 `play()`나 `pause()`라는 함수를 열어놓고 있을 것입니다. 이러한 웹 컴포넌트의 강제성을 띠는 API에 접근하기 위해서, DOM 노드에 직접 ref를 지정하는 것이 필요할 수 있습니다. 만약 서드파티 웹 컴포넌트를 사용 중이라면, 가장 좋은 해결방법은 웹 컴포넌트의 래퍼로서 동작하는 React 컴포넌트를 작성하는 것입니다. > -> Events emitted by a Web Component may not properly propagate through a React render tree. -> You will need to manually attach event handlers to handle these events within your React components. +> 웹 컴포넌트에서 나온 이벤트들은 React 렌더 트리에 올바르게 전파되지 않을 수 있습니다. 이에 대응하기 위해서는, 이벤트에 대해 React 컴포넌트 내에 핸들러를 만들 필요가 있습니다. -One common confusion is that Web Components use "class" instead of "className". +많은 사람이 공통으로 착각하는 부분 중 하나로, 웹 컴포넌트는 “className”이 아닌 “class”를 사용합니다. ```javascript function BrickFlipbox() { @@ -40,7 +39,7 @@ function BrickFlipbox() { } ``` -## Using React in your Web Components {#using-react-in-your-web-components} +## 웹 컴포넌트에서 React 사용하기 {#using-react-in-your-web-components} ```javascript class XSearch extends HTMLElement { @@ -56,7 +55,6 @@ class XSearch extends HTMLElement { customElements.define('x-search', XSearch); ``` ->Note: +>주의: > ->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion. ->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue. +>Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. 해당 문제를 참조해주시기 바랍니다. 이 문제를 해결하기 위해서, 웹 컴포넌트를 불러오기 전에 custom-elements-es5-adapter를 탑재하기 바랍니다. From f6f5933c4ae1e49c614d186804c07917946c9e1a Mon Sep 17 00:00:00 2001 From: Chanhee Lee Date: Wed, 27 Feb 2019 11:16:20 +0900 Subject: [PATCH 2/5] Update with Reviews --- content/docs/web-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 5244ab6c5..fcc9a820c 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -57,4 +57,4 @@ customElements.define('x-search', XSearch); >주의: > ->Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. 해당 문제를 참조해주시기 바랍니다. 이 문제를 해결하기 위해서, 웹 컴포넌트를 불러오기 전에 custom-elements-es5-adapter를 탑재하기 바랍니다. +>Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. [해당 문제]((https://github.com/w3c/webcomponents/issues/587))를 참조해주시기 바랍니다. 이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다. From 7aace0b3a2756f10deb085af20310902a5faa83b Mon Sep 17 00:00:00 2001 From: Ilkwon Sim Date: Sat, 2 Mar 2019 14:06:30 +0900 Subject: [PATCH 3/5] Update web-components.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `주의:`에서 콜론을 제거 했습니다. 현재 [textlint 룰](https://github.com/reactjs/ko.reactjs.org/blob/master/textlint/rules/no-endline-colon.js) 에서 문장 맨끝에 콜론 사용을 안하는 걸로 되어 있어서요. --- content/docs/web-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index fcc9a820c..a7924310d 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -20,7 +20,7 @@ class HelloMessage extends React.Component { } ``` -> 주의: +> 주의 > > 웹 컴포넌트는 종종 강제성을 띠는 API를 열어놓고 있습니다. 예를 들어, `video`라는 웹 컴포넌트는 `play()`나 `pause()`라는 함수를 열어놓고 있을 것입니다. 이러한 웹 컴포넌트의 강제성을 띠는 API에 접근하기 위해서, DOM 노드에 직접 ref를 지정하는 것이 필요할 수 있습니다. 만약 서드파티 웹 컴포넌트를 사용 중이라면, 가장 좋은 해결방법은 웹 컴포넌트의 래퍼로서 동작하는 React 컴포넌트를 작성하는 것입니다. > @@ -55,6 +55,6 @@ class XSearch extends HTMLElement { customElements.define('x-search', XSearch); ``` ->주의: +>주의 > >Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. [해당 문제]((https://github.com/w3c/webcomponents/issues/587))를 참조해주시기 바랍니다. 이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다. From 772743ae1036a2dfd8c1dbfaebe1ec0d6ca9b6fe Mon Sep 17 00:00:00 2001 From: Chanhee Lee Date: Sun, 3 Mar 2019 16:41:24 +0900 Subject: [PATCH 4/5] Update with Reviews --- content/docs/web-components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index a7924310d..3448958ff 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -22,9 +22,9 @@ class HelloMessage extends React.Component { > 주의 > -> 웹 컴포넌트는 종종 강제성을 띠는 API를 열어놓고 있습니다. 예를 들어, `video`라는 웹 컴포넌트는 `play()`나 `pause()`라는 함수를 열어놓고 있을 것입니다. 이러한 웹 컴포넌트의 강제성을 띠는 API에 접근하기 위해서, DOM 노드에 직접 ref를 지정하는 것이 필요할 수 있습니다. 만약 서드파티 웹 컴포넌트를 사용 중이라면, 가장 좋은 해결방법은 웹 컴포넌트의 래퍼로서 동작하는 React 컴포넌트를 작성하는 것입니다. +> 웹 컴포넌트는 종종 강제성을 띠는 API를 열어놓고 있습니다. 예를 들어, `video`라는 웹 컴포넌트는 `play()`나 `pause()`라는 함수를 열어놓고 있을 것입니다. 이러한 웹 컴포넌트의 강제성을 띠는 API에 접근하기 위해서, DOM 노드에 직접 ref를 지정하는 것이 필요할 수 있습니다. 서드 파티 웹 컴포넌트를 사용 중이라면, 가장 좋은 해결방법은 웹 컴포넌트의 래퍼로서 동작하는 React 컴포넌트를 작성하는 것입니다. > -> 웹 컴포넌트에서 나온 이벤트들은 React 렌더 트리에 올바르게 전파되지 않을 수 있습니다. 이에 대응하기 위해서는, 이벤트에 대해 React 컴포넌트 내에 핸들러를 만들 필요가 있습니다. +> 웹 컴포넌트에서 나온 이벤트들은 React 렌더링 트리에 올바르게 전파되지 않을 수 있습니다. 이를 해결하기 위해 이벤트를 다루기 위한 핸들러를 React 컴포넌트 내에 각각 만들어야합니다. 많은 사람이 공통으로 착각하는 부분 중 하나로, 웹 컴포넌트는 “className”이 아닌 “class”를 사용합니다. @@ -57,4 +57,4 @@ customElements.define('x-search', XSearch); >주의 > ->Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. [해당 문제]((https://github.com/w3c/webcomponents/issues/587))를 참조해주시기 바랍니다. 이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다. +>Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. [해당 문제](https://github.com/w3c/webcomponents/issues/587)를 참조해주시기 바랍니다. 이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다. From 2706662d757eea87c5407c43abff01bccda45204 Mon Sep 17 00:00:00 2001 From: Ilkwon Sim Date: Wed, 6 Mar 2019 13:08:50 +0900 Subject: [PATCH 5/5] Fix doc format --- content/docs/web-components.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 3448958ff..0b306fc3d 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -57,4 +57,5 @@ customElements.define('x-search', XSearch); >주의 > ->Babel로 클래스를 변환하면 이 코드가 작동하지 않을 것입니다. [해당 문제](https://github.com/w3c/webcomponents/issues/587)를 참조해주시기 바랍니다. 이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다. +>Babel로 클래스를 변환하면 이 코드가 작동하지 **않을 것**입니다. [해당 문제](https://github.com/w3c/webcomponents/issues/587)를 참조해주시기 바랍니다. +>이 문제를 해결하려면 웹 컴포넌트를 불러오기 전에 [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs)를 추가하기 바랍니다.