Merge branch 'master' into translate-refs-must-have-owner

Author: simsim0709

Diff for: content/community/conferences.md

@@ -17,7 +17,7 @@ April 24-26 in Helsinki, Finland
 
 [Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
 
-### ReactJS Girls Conference
+### ReactJS Girls Conference {#reactjs-girls-conference}
 May 3, 2019 in London, UK
 
 [Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls)
@@ -47,12 +47,12 @@ June 21, 2019 Chicago, Illinois USA
 
 [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
 
-### Chain React 2019
+### Chain React 2019 {#chain-react-2019}
 July 11-12, 2019. Portland, OR, USA.
 
 [Website](https://infinite.red/ChainReactConf)
 
-### React Rally 2019
+### React Rally 2019 {#react-rally-2019}
 August 22-23, 2019. Salt Lake City, USA.
 
 [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
@@ -72,6 +72,11 @@ September 13th, 2019. New York, USA
 
 [Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork)
 
+### React Boston 2019 {#react-boston-2019}
+September 21-22, 2019 in Boston, Massachusetts USA
+
+[Website](https://www.reactboston.com/) - [Twitter](https://twitter.com/reactboston)
+
 ### React India 2019 {#react-india-2019}
 September 26-28, 2019 in Goa, India
 

Diff for: content/docs/getting-started.md

@@ -99,7 +99,7 @@ React 문서는 Javascript 프로그래밍에 익숙한 사람을 대상으로 
 
 ### 고급 개념 {#advanced-concepts}
 
-[주요 개념](#main-concepts)에 익숙해지고 React를 더 많이 다루게 되면 보다 고급 주제에 관심을 가지게 될 것입니다. 이 섹션에서는 [context](/docs/context.html) 및 [refs](/docs/refs-and-dom.html)와 같이 강력하지만 일반적으로 사용되지는 않는 React 기능을 소개합니다.
+[주요 개념](/docs/hello-world.html)에 익숙해지고 React를 더 많이 다루게 되면 보다 고급 주제에 관심을 가지게 될 것입니다. 이 섹션에서는 [context](/docs/context.html) 및 [refs](/docs/refs-and-dom.html)와 같이 강력하지만 일반적으로 사용되지는 않는 React 기능을 소개합니다.
 
 ### API 참조 {#api-reference}
 

Diff for: content/docs/hooks-faq.md

@@ -209,7 +209,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
 
 * `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon.
 
-### How can I do data fetching with Hooks?
+### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks}
 
 Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks.
 
@@ -654,7 +654,7 @@ function ProductDetails({ fetchProduct })
 
 Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component.
 
-### What can I do if my effect dependencies change too often?
+### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
 Sometimes, your effect may be using reading state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs:
 

Diff for: content/docs/hooks-reference.md

@@ -8,7 +8,7 @@ prev: hooks-overview.html
 
 *Hook*은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.
 
-[이전 페이지](/docs/hooks-intro.html)에서 아래의 예시를 통해 Hook을 소개했습니다.
+[Hook 소개](/docs/hooks-intro.html)에서 아래 예시를 통해 Hook과 친해졌습니다.
 
 ```js{4-5}
 import React, { useState } from 'react';

Diff for: content/docs/hooks-state.md

@@ -23,14 +23,18 @@
   translated_name: বাংলা
   code: bn
   status: 0
+- name: Catalan
+  translated_name: Català
+  code: ca
+  status: 0
 - name: German
   translated_name: Deutsch
   code: de
   status: 1
 - name: Greek
   translated_name: Ελληνικά
   code: el
-  status: 0
+  status: 1
 - name: Spanish
   translated_name: Español
   code: es
@@ -99,6 +103,10 @@
   translated_name: മലയാളം
   code: ml
   status: 0
+- name: Mongolian
+  translated_name: Монгол хэл
+  code: mn
+  status: 0
 - name: Nepali
   translated_name: नेपाली
   code: ne
@@ -110,7 +118,7 @@
 - name: Polish
   translated_name: Polski
   code: pl
-  status: 1
+  status: 2
 - name: Portuguese (Brazil)
   translated_name: Português do Brasil
   code: pt-br
@@ -154,7 +162,7 @@
 - name: Ukrainian
   translated_name: Українська
   code: uk
-  status: 1
+  status: 2
 - name: Urdu
   translated_name: اردو
   code: ur

Diff for: content/languages.yml

@@ -3,37 +3,37 @@ title: Unknown Prop Warning
 layout: single
 permalink: warnings/unknown-prop.html
 ---
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+올바른 DOM 어트리뷰트/프로퍼티로 인식되지 않는 DOM 엘리먼트를 렌더링하려고 하면 unknown-prop 경고가 발생합니다. DOM 엘리먼트에 잘못된 props가 추가되지 않도록 해야 합니다.
 
-There are a couple of likely reasons this warning could be appearing:
+이 경고가 표시되는 몇 가지 이유가 있습니다.
 
-1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. [transferring props](/docs/transferring-props.html)). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
+1. `{...this.props}` 또는 `cloneElement(element, this.props)`를 사용하고 있습니까? 그렇다면 컴포넌트가 자기 자신의 props를 자식 엘리먼트로 직접 전달하는 경우입니다. (예시. [props 전달](/docs/transferring-props.html)) 자식 컴포넌트로 props를 전달할 때 부모 컴포넌트에서 사용되는 props를 실수로 전달하지 않도록 해야 합니다.
 
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
+2. 사용자 정의 데이터를 나타내기 위해 네이티브 DOM 노드에서 비표준 DOM 어트리뷰트를 사용하고 있는 경우입니다. 표준 DOM 엘리먼트에 사용자 정의 데이터를 추가하려는 경우 [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes)에 설명된 사용자 정의 data 어트리뷰트를 사용해보세요.
 
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.
+3. React가 아직 지정된 어트리뷰트를 인식하지 못하는 경우입니다. 이것은 다음 React 버전에서 수정될 수 있습니다. 그러나 React는 현재 알 수 없는 모든 어트리뷰트를 제거하므로 React 앱에서 렌더링되지 않습니다.
 
-4. You are using a React component without an upper case. React interprets it as a DOM tag because [React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
+4. React 컴포넌트 이름에 대문자가 포함되어 있지 않은 경우입니다. [React JSX에서는 대소문자 규칙을 사용하여 사용자 정의 컴포넌트와 DOM 태그를 구별](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)하기 때문에 React 컴포넌트에 대문자가 없다면 이것을 DOM 태그로 해석합니다.
 
 ---
 
-To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example:
+이 문제를 해결하려면, 합성 컴포넌트는 자식 컴포넌트를 위해 만들어진 것이 아닌 합성 컴포넌트를 위해 만들어진 모든 props를 "소비해야 합니다". 예를 들어,
 
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+**금지** 예기치 않은 `layout` prop이 `div` 태그에 전달됩니다.
 
 ```js
 function MyDiv(props) {
   if (props.layout === 'horizontal') {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    // 금지! "layout"은 <div> 가 이해하는 prop이 아니기 때문입니다.
     return <div {...props} style={getHorizontalStyle()} />
   } else {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    // 금지! "layout"은 <div> 가 이해하는 prop이 아니기 때문입니다.
     return <div {...props} style={getVerticalStyle()} />
   }
 }
 ```
 
-**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
+**권장** 전개 연산자(spread operator)를 사용하여 변수를 props에서 빼내고 나머지 props를 변수에 넣을 수 있습니다.
 
 ```js
 function MyDiv(props) {
@@ -46,7 +46,7 @@ function MyDiv(props) {
 }
 ```
 
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
+**권장** 새 객체에 props를 복사하고 새 객체에서 사용 중인 key를 삭제할 수도 있습니다. 원래 `this.props` 객체에서 그 객체를 삭제하면 안됩니다. 왜냐하면 그 객체는 불변이어야 하기 때문입니다.
 
 ```js
 function MyDiv(props) {

Diff for: content/warnings/unknown-prop.md

@@ -55,6 +55,7 @@ module.exports = {
               maxWidth: 840,
             },
           },
+          'gatsby-remark-external-links',
           'gatsby-remark-header-custom-ids',
           {
             resolve: 'gatsby-remark-code-repls',

Diff for: gatsby-config.js

@@ -32,6 +32,7 @@
     "gatsby-remark-code-repls": "^2.0.0",
     "gatsby-remark-copy-linked-files": "^2.0.0",
     "gatsby-remark-embed-snippet": "^3.0.0",
+    "gatsby-remark-external-links": "^0.0.4",
     "gatsby-remark-images": "^2.0.0",
     "gatsby-remark-prismjs": "^3.0.2",
     "gatsby-remark-responsive-iframe": "^2.0.0",

Diff for: package.json

@@ -22,7 +22,7 @@ class DocSearch extends Component<{}, State> {
     // eslint-disable-next-line no-undef
     if (window.docsearch) {
       window.docsearch({
-        apiKey: '36221914cce388c46d0420343e0bb32e',
+        apiKey: '61afa0daa482db2154b69c27d642f815',
         indexName: 'react',
         inputSelector: '#algolia-doc-search',
       });

Diff for: src/components/LayoutHeader/DocSearch.js

@@ -285,15 +285,24 @@ const sharedStyles = {
     },
 
     '& h2': {
-      borderTop: `1px solid ${colors.divider}`,
-      marginTop: 44,
-      paddingTop: 40,
+      '::before': {
+        content: ' ',
+        display: 'block',
+        borderBottom: `1px solid ${colors.divider}`,
+        paddingTop: 44,
+        marginBottom: 40,
+      },
+
       lineHeight: 1.2,
 
       ':first-child': {
-        borderTop: 0,
-        marginTop: 0,
-        paddingTop: 0,
+        '::before': {
+          content: ' ',
+          display: 'block',
+          borderBottom: 0,
+          paddingTop: 40,
+          marginTop: -80,
+        },
       },
 
       [media.lessThan('large')]: {
@@ -310,7 +319,12 @@ const sharedStyles = {
     },
 
     '& h3': {
-      paddingTop: 45,
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 90,
+        marginTop: -45,
+      },
 
       [media.lessThan('small')]: {
         overflowWrap: 'break-word',
@@ -324,14 +338,25 @@ const sharedStyles = {
     },
 
     '& h2 + h3, & h2 + h3:first-of-type': {
-      paddingTop: 30,
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 60,
+        marginTop: -30,
+      },
     },
 
     '& h4': {
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 100,
+        marginTop: -50,
+      },
+
       fontSize: 20,
       color: colors.subtle,
       lineHeight: 1.3,
-      marginTop: 50,
       fontWeight: 400,
     },
 
@@ -414,6 +439,15 @@ const sharedStyles = {
     '& .gatsby-highlight + blockquote': {
       marginTop: 40,
     },
+
+    '& .gatsby-highlight + h4': {
+      '::before': {
+        content: ' ',
+        display: 'block',
+        paddingTop: 85,
+        marginTop: -60,
+      },
+    },
   },
 };