Skip to content

Commit 9cc5203

Browse files
authored
Merge branch 'master' into geonwooBryanKim
2 parents 13f14f2 + 7283283 commit 9cc5203

11 files changed

+318
-186
lines changed

content/community/conferences.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ April 24-26 in Helsinki, Finland
1717

1818
[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
1919

20-
### ReactJS Girls Conference
20+
### ReactJS Girls Conference {#reactjs-girls-conference}
2121
May 3, 2019 in London, UK
2222

2323
[Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls)
@@ -47,12 +47,12 @@ June 21, 2019 Chicago, Illinois USA
4747

4848
[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
4949

50-
### Chain React 2019
50+
### Chain React 2019 {#chain-react-2019}
5151
July 11-12, 2019. Portland, OR, USA.
5252

5353
[Website](https://infinite.red/ChainReactConf)
5454

55-
### React Rally 2019
55+
### React Rally 2019 {#react-rally-2019}
5656
August 22-23, 2019. Salt Lake City, USA.
5757

5858
[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
7272

7373
[Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork)
7474

75+
### React Boston 2019 {#react-boston-2019}
76+
September 21-22, 2019 in Boston, Massachusetts USA
77+
78+
[Website](https://www.reactboston.com/) - [Twitter](https://twitter.com/reactboston)
79+
7580
### React India 2019 {#react-india-2019}
7681
September 26-28, 2019 in Goa, India
7782

content/docs/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ React 문서는 Javascript 프로그래밍에 익숙한 사람을 대상으로
9999

100100
### 고급 개념 {#advanced-concepts}
101101

102-
[주요 개념](#main-concepts)에 익숙해지고 React를 더 많이 다루게 되면 보다 고급 주제에 관심을 가지게 될 것입니다. 이 섹션에서는 [context](/docs/context.html)[refs](/docs/refs-and-dom.html)와 같이 강력하지만 일반적으로 사용되지는 않는 React 기능을 소개합니다.
102+
[주요 개념](/docs/hello-world.html)에 익숙해지고 React를 더 많이 다루게 되면 보다 고급 주제에 관심을 가지게 될 것입니다. 이 섹션에서는 [context](/docs/context.html)[refs](/docs/refs-and-dom.html)와 같이 강력하지만 일반적으로 사용되지는 않는 React 기능을 소개합니다.
103103

104104
### API 참조 {#api-reference}
105105

content/docs/hooks-faq.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
209209

210210
* `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon.
211211

212-
### How can I do data fetching with Hooks?
212+
### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks}
213213

214214
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.
215215

@@ -654,7 +654,7 @@ function ProductDetails({ fetchProduct })
654654

655655
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.
656656

657-
### What can I do if my effect dependencies change too often?
657+
### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
658658

659659
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:
660660

content/docs/hooks-state.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ prev: hooks-overview.html
88

99
*Hook*은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.
1010

11-
[이전 페이지](/docs/hooks-intro.html)에서 아래의 예시를 통해 Hook을 소개했습니다.
11+
[Hook 소개](/docs/hooks-intro.html)에서 아래 예시를 통해 Hook과 친해졌습니다.
1212

1313
```js{4-5}
1414
import React, { useState } from 'react';

content/docs/thinking-in-react.md

+148-148
Large diffs are not rendered by default.

content/languages.yml

+9-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
translated_name: বাংলা
2424
code: bn
2525
status: 0
26+
- name: Catalan
27+
translated_name: Català
28+
code: ca
29+
status: 0
2630
- name: German
2731
translated_name: Deutsch
2832
code: de
@@ -99,6 +103,10 @@
99103
translated_name: മലയാളം
100104
code: ml
101105
status: 0
106+
- name: Mongolian
107+
translated_name: Монгол хэл
108+
code: mn
109+
status: 0
102110
- name: Nepali
103111
translated_name: नेपाली
104112
code: ne
@@ -110,7 +118,7 @@
110118
- name: Polish
111119
translated_name: Polski
112120
code: pl
113-
status: 1
121+
status: 2
114122
- name: Portuguese (Brazil)
115123
translated_name: Português do Brasil
116124
code: pt-br

content/warnings/refs-must-have-owner.md

+24-20
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,49 @@ layout: single
44
permalink: warnings/refs-must-have-owner.html
55
---
66

7-
You are probably here because you got one of the following error messages:
7+
다음 오류 메시지 중 하나가 나왔기 때문에 여기에 있을 것입니다.
88

99
*React 16.0.0+*
10-
> Warning:
10+
> 경고
1111
>
1212
> Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
13+
>
14+
> 엘리먼트의 ref가 문자열 (myRefName)로 지정되었지만, 소유자가 설정되지 않았습니다. 여러 개의 React가 로딩됐을 수 있습니다. (자세히 알아보기. https://fb.me/react-refs-must-have-owner)
1315
14-
*earlier versions of React*
15-
> Warning:
16+
*이전 버전의 React*
17+
> 경고
1618
>
1719
> addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
20+
>
21+
> addComponentAsRefTo(...): ReactOwner만 refs를 가질 수 있습니다. 컴포넌트의 `render` 메서드 안에 생성되지 않은 컴포넌트에 ref를 추가하거나, React가 여러 개 로딩됐을 수 있습니다.
1822
19-
This usually means one of three things:
23+
이것은 일반적으로 다음 세 가지 중 하나를 의미합니다.
2024

21-
- You are trying to add a `ref` to a function component.
22-
- You are trying to add a `ref` to an element that is being created outside of a component's render() function.
23-
- You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency)
25+
- 함수 컴포넌트에 `ref`를 추가하려고 했을 경우입니다.
26+
- 컴포넌트의 render() 함수 외부에서 생성되는 엘리먼트에 `ref`를 추가하려고 했을 경우입니다.
27+
- 여러 개의 (충돌하는) React가 있습니다. (예시. 잘못 설정된 npm 의존성 때문에)
2428

25-
## Refs on Function Components {#refs-on-function-components}
29+
## 함수 컴포넌트에서의 refs {#refs-on-function-components}
2630

27-
If `<Foo>` is a function component, you can't add a ref to it:
31+
`<Foo>`가 함수 컴포넌트인 경우 ref를 추가할 수 없습니다.
2832

2933
```js
30-
// Doesn't work if Foo is a function!
34+
// Foo가 함수 컴포넌트인 경우 작동하지 않습니다!
3135
<Foo ref={foo} />
3236
```
3337

34-
If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs).
38+
컴포넌트에 ref를 추가해야 하는 경우 먼저 클래스로 컴포넌트로 변경하거나 refs가 필요한 경우가 [거의 없으므로](/docs/refs-and-the-dom.html#when-to-use-refs) ref를 사용하지 않는 것이 좋습니다.
3539

36-
## Strings Refs Outside the Render Method {#strings-refs-outside-the-render-method}
40+
## render 메서드 외부에서의 문자열 refs {#strings-refs-outside-the-render-method}
3741

38-
This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work:
42+
이것은 일반적으로 소유자가 없는 컴포넌트에 ref를 추가하려는 것입니다. (즉, 다른 컴포넌트의 `render` 메서드 내부에서 생성되지 않았다는 것입니다) 예를 들어, 다음은 작동하지 않습니다.
3943

4044
```js
41-
// Doesn't work!
45+
// 작동하지 않습니다!
4246
ReactDOM.render(<App ref="app" />, el);
4347
```
4448

45-
Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref:
49+
이 컴포넌트를 ref를 소유할 새로운 최상위 컴포넌트 안에 렌더링해 보세요. 또는 콜백 ref를 사용할 수도 있습니다.
4650

4751
```js
4852
let app;
@@ -54,10 +58,10 @@ ReactDOM.render(
5458
);
5559
```
5660

57-
Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach.
61+
이 방법을 사용하기 전에 [정말 ref가 필요한지](/docs/refs-and-the-dom.html#when-to-use-refs) 생각해보세요.
5862

59-
## Multiple copies of React {#multiple-copies-of-react}
63+
## 여러 개의 React {#multiple-copies-of-react}
6064

61-
Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.
65+
Bower는 의존성 중복 제거 작업을 잘하지만 npm은 그렇지 않습니다. refs로 특별한 일을 하는 게 아니라면, refs 문제가 아니라는 좋은 징조입니다. 그보다는 오히려 여러 개의 React가 프로젝트에 로딩되는 문제일 가능성이 있습니다. 때에 따라 npm을 통해 서드파티 모듈을 가져오면 의존성 라이브러리에 중복된 사본이 생성되어 문제가 발생할 수 있습니다.
6266

63-
If you are using npm... `npm ls` or `npm ls react` might help illuminate.
67+
npm을 사용한다면... 'npm ls' 또는 'npm ls react'가 이 도움이 될 수 있습니다.

gatsby-config.js

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ module.exports = {
5555
maxWidth: 840,
5656
},
5757
},
58+
'gatsby-remark-external-links',
5859
'gatsby-remark-header-custom-ids',
5960
{
6061
resolve: 'gatsby-remark-code-repls',

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"gatsby-remark-code-repls": "^2.0.0",
3333
"gatsby-remark-copy-linked-files": "^2.0.0",
3434
"gatsby-remark-embed-snippet": "^3.0.0",
35+
"gatsby-remark-external-links": "^0.0.4",
3536
"gatsby-remark-images": "^2.0.0",
3637
"gatsby-remark-prismjs": "^3.0.2",
3738
"gatsby-remark-responsive-iframe": "^2.0.0",

src/theme.js

+43-9
Original file line numberDiff line numberDiff line change
@@ -285,15 +285,24 @@ const sharedStyles = {
285285
},
286286

287287
'& h2': {
288-
borderTop: `1px solid ${colors.divider}`,
289-
marginTop: 44,
290-
paddingTop: 40,
288+
'::before': {
289+
content: ' ',
290+
display: 'block',
291+
borderBottom: `1px solid ${colors.divider}`,
292+
paddingTop: 44,
293+
marginBottom: 40,
294+
},
295+
291296
lineHeight: 1.2,
292297

293298
':first-child': {
294-
borderTop: 0,
295-
marginTop: 0,
296-
paddingTop: 0,
299+
'::before': {
300+
content: ' ',
301+
display: 'block',
302+
borderBottom: 0,
303+
paddingTop: 40,
304+
marginTop: -80,
305+
},
297306
},
298307

299308
[media.lessThan('large')]: {
@@ -310,7 +319,12 @@ const sharedStyles = {
310319
},
311320

312321
'& h3': {
313-
paddingTop: 45,
322+
'::before': {
323+
content: ' ',
324+
display: 'block',
325+
paddingTop: 90,
326+
marginTop: -45,
327+
},
314328

315329
[media.lessThan('small')]: {
316330
overflowWrap: 'break-word',
@@ -324,14 +338,25 @@ const sharedStyles = {
324338
},
325339

326340
'& h2 + h3, & h2 + h3:first-of-type': {
327-
paddingTop: 30,
341+
'::before': {
342+
content: ' ',
343+
display: 'block',
344+
paddingTop: 60,
345+
marginTop: -30,
346+
},
328347
},
329348

330349
'& h4': {
350+
'::before': {
351+
content: ' ',
352+
display: 'block',
353+
paddingTop: 100,
354+
marginTop: -50,
355+
},
356+
331357
fontSize: 20,
332358
color: colors.subtle,
333359
lineHeight: 1.3,
334-
marginTop: 50,
335360
fontWeight: 400,
336361
},
337362

@@ -414,6 +439,15 @@ const sharedStyles = {
414439
'& .gatsby-highlight + blockquote': {
415440
marginTop: 40,
416441
},
442+
443+
'& .gatsby-highlight + h4': {
444+
'::before': {
445+
content: ' ',
446+
display: 'block',
447+
paddingTop: 85,
448+
marginTop: -60,
449+
},
450+
},
417451
},
418452
};
419453

0 commit comments

Comments
 (0)