You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Thank you for your interest in contributing to the React Docs!
3
+
React 문서 기여에 관심을 가져주셔서 감사합니다!
4
4
5
-
## Code of Conduct
5
+
## 행동 강령
6
6
7
-
Facebook has adopted a Code of Conduct that we expect project
8
-
participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct)
9
-
so that you can understand what actions will and will not be tolerated.
7
+
페이스북<sup>Facebook</sup>은 프로젝트 참가자가 준수해야 하는 행동 강령을 채택했습니다. [전문을 읽어보세요](https://code.facebook.com/codeofconduct). 어떤 행동이 허용되고 허용되지 않는지 확인할 수 있습니다.
10
8
11
-
## Technical Writing Tips
9
+
## 기술 문서 작성 팁
12
10
13
-
This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs.
11
+
기술 문서를 작성할 때 염두에 두어야 할 사항에 대한 [좋은 요약](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc)입니다.
14
12
15
-
## Guidelines for Text
13
+
## 글에 대한 가이드라인
16
14
17
-
**Different sections intentionally have different styles.**
15
+
**섹션마다 의도적으로 다른 스타일을 사용합니다.**
18
16
19
-
The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below.
17
+
이 문서는 다양한 학습 스타일과 사용 사례를 고려하여 분할되어 있습니다. 본문을 수정할 때는 주변 글의 톤<sup>Tone</sup>과 스타일<sup>Style</sup>에 맞게 작성하도록 주의하세요. 새로운 글을 작성할 때는 같은 섹션에 있는 다른 글들과 톤을 맞추도록 하세요. 각 섹션의 의도와 동기는 아래에서 확인할 수 있습니다.
20
18
21
-
**[Learn React](https://react.dev/learn)**is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
19
+
**[React 학습](https://ko.react.dev/learn)**섹션은 기초 개념을 단계별로 소개하기 위해 만들어졌습니다. 여기서 제공되는 글들은 이전에 설명된 지식을 바탕으로 하므로, 글 간 앞뒤 개념이 중복되거나 꼬이지 않도록 주의하세요. 독자는 첫 번째 글부터 마지막 글까지 순서대로 읽으며 개념을 익힐 수 있어야 하며, 추가 설명을 위해 미리 앞선 개념들을 살펴보지 않도록 해야 합니다. 이런 이유로 상태<sup>State</sup>는 이벤트<sup>Event</sup>보다 먼저 설명되고, 'React로 사고하기' 파트에서 `ref`를 사용하지 않는 등 특정 순서가 정해져 있습니다. 동시에 'React 학습'은 React 개념에 대한 참고 자료 역할을 하므로, 개념들에 대한 정의와 상호 관계를 엄격하게 다루어야 합니다.
22
20
23
-
**[API Reference](https://react.dev/reference/react)**is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
21
+
**[API 레퍼런스](https://ko.react.dev/reference/react)**섹션은 개념이 아닌 API별로 정리되어 있으며, 가능한 한 모든 경우를 포함하는 것을 목표로 합니다. 'React 학습'에서 간단히 다뤘거나 생략한 예외 사항<sup>Edge Cases</sup> 혹은 권장 사항<sup>Recommendations</sup>은 해당 API의 레퍼런스 문서에 추가로 언급해야 합니다.
24
22
25
-
**Try to follow your own instructions.**
23
+
**스스로 작성한 지침<sup>Instructions</sup>을 실천해 보세요.**
26
24
27
-
When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated.
25
+
예를 들어, 단계별 가이드를 작성한다면, 직접 그 지침을 따라가 보며 누락된 내용이나 순서가 맞지 않는 부분을 찾아보세요. 실제로 지침을 순서대로 진행하다보면, 작성자가 설명하지 않은 배경지식이 있거나, 단계가 뒤섞여 있는 등의 문제를 발견할 수 있습니다. 가능하다면 다른 사람에게 지침을 따라보게 하고, 그들이 어려움을 겪는 부분을 관찰하는 것도 좋은 방법입니다. 사소해 보이지만 예상치 못한 곳에서 문제가 생길 수 있습니다.
28
26
29
-
## Guidelines for Code Examples
27
+
## 코드 예시에 대한 가이드라인
30
28
31
-
### Syntax
29
+
### 구문<sup>Syntax</sup>
32
30
33
-
#### Prefer JSX to `createElement`.
31
+
#### 가능하면 `createElement` 대신 JSX를 사용하세요
34
32
35
-
Ignore this if you're specifically describing `createElement`.
33
+
단, `createElement` 자체를 설명해야 하는 경우는 예외입니다.
36
34
37
-
#### Use`const` where possible, otherwise `let`. Don't use `var`.
35
+
#### 가능하면`const`, 필요한 경우에는 `let`을 사용하고, `var`는 사용하지 마세요
38
36
39
-
Ignore this if you're specifically writing about ES5.
37
+
ES5만 다루는 경우라면 이 규칙은 무시하세요.
40
38
41
-
#### Don't use ES6 features when equivalent ES5 features have no downsides.
39
+
#### ES5의 기능만으로 간단하게 작성할 수 있는 경우, ES6의 기능을 무조건적으로 사용하지 마세요
42
40
43
-
Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it.
41
+
ES6가 아직 낯선 사람도 많습니다. 이미 여러 곳에서 `const` / `let`, 클래스, 화살표 함수 등을 사용하고 있지만, 그에 상응하는 ES5 코드가 간단하고 가독성이 좋다면 ES5를 사용하는 것도 고려하세요.
44
42
45
-
In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this`context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature.
43
+
특히 최상위 함수에서는 `const myFunction = () => ...`과 같은 화살표 함수 대신에 이름 있는 `function` 선언을 선호합니다. 하지만 컴포넌트 내 `this`컨텍스트를 유지해야 하는 경우에는 화살표 함수를 사용하세요. 새로운 문법을 사용할 때는 장단점을 모두 따져보고 결정하세요.
46
44
47
-
#### Don't use features that aren't standardized yet.
45
+
#### 아직 표준화되지 않은 기능은 사용하지 마세요
48
46
49
-
For example, **don't** write this:
47
+
예를 들어, 다음 코드처럼 작성하지 마세요.
50
48
51
49
```js
52
50
classMyComponentextendsReact.Component {
@@ -57,7 +55,7 @@ class MyComponent extends React.Component {
57
55
}
58
56
```
59
57
60
-
Instead, **do** write this:
58
+
대신, 다음처럼 작성하세요.
61
59
62
60
```js
63
61
classMyComponentextendsReact.Component {
@@ -72,65 +70,65 @@ class MyComponent extends React.Component {
72
70
}
73
71
```
74
72
75
-
Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text.
73
+
실험적인 제안<sup>Experimental Proposal</sup>에 대해 설명하는 경우라면 예외로 하되, 코드와 주변 글에서 실험적임<sup>Experimental</sup>을 명시하세요.
76
74
77
-
### Style
75
+
### 스타일
78
76
79
-
-Use semicolons.
80
-
-No space between function names and parens (`method() {}` not`method() {}`).
81
-
-When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
82
-
-Always capitalize React concepts such as Hooks, Effects, and Transitions.
77
+
-세미콜론을 사용하세요.
78
+
-함수 이름과 괄호 사이에는 공백을 넣지 마세요. (`method() {}`가 아닌,`method() {}` 형태.)
79
+
-고민될 때는 [Prettier](https://prettier.io/playground/)의 기본 스타일을 따르세요.
80
+
-Hooks, Effects, Transitions 같은 React 관련 개념은 항상 대문자로 시작하세요.
83
81
84
-
### Highlighting
82
+
### 하이라이팅
85
83
86
-
Use `js` as the highlighting language in Markdown code blocks:
84
+
마크다운<sup>Markdown</sup>의 코드 블록에서는 `js`를 사용하세요:
87
85
88
86
````
89
87
```js
90
-
// code
88
+
// 코드
91
89
```
92
90
````
93
91
94
-
Sometimes you'll see blocks with numbers.
95
-
They tell the website to highlight specific lines.
92
+
간혹 숫자와 함께 사용되는 블록이 있습니다.
93
+
이는 특정 줄을 강조하기 위한 용도입니다.
96
94
97
-
You can highlight a single line:
95
+
한 줄을 강조하는 예시.
98
96
99
97
````
100
98
```js {2}
101
99
function hello() {
102
-
// this line will get highlighted
100
+
// 이 줄이 강조됩니다
103
101
}
104
102
```
105
103
````
106
104
107
-
A range of lines:
105
+
일정 범위를 강조하는 예시.
108
106
109
107
````
110
108
```js {2-4}
111
109
function hello() {
112
-
// these lines
113
-
// will get
114
-
// highlighted
110
+
// 여기부터
111
+
// 시작해서
112
+
// 여기까지 강조됩니다
115
113
}
116
114
```
117
115
````
118
116
119
-
Or even multiple ranges:
117
+
여러 범위를 강조하는 예시.
120
118
121
119
````
122
120
```js {2-4,6}
123
121
function hello() {
124
-
// these lines
125
-
// will get
126
-
// highlighted
122
+
// 여기부터
123
+
// 시작해서
124
+
// 여기까지 강조됩니다
127
125
console.log('hello');
128
-
// also this one
126
+
// 이 줄도 강조됩니다
129
127
console.log('there');
130
128
}
131
129
```
132
130
````
133
131
134
-
Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting.
132
+
코드를 이동하거나 순서를 바꿨다면, 강조하는 줄도 같이 수정해야 한다는 점을 잊지 마세요.
135
133
136
-
Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss.
134
+
강조 기능은 독자가 놓치기 쉬운 구체적인 부분에 주의를 환기해주므로 적극적으로 사용하길 권장합니다.
0 commit comments