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
Copy file name to clipboardExpand all lines: src/content/learn/creating-a-react-app.md
+1-9Lines changed: 1 addition & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,11 +32,7 @@ React로 새로운 앱이나 웹사이트를 구축하려면 프레임워크부
32
32
npx create-next-app@latest
33
33
</TerminalBlock>
34
34
35
-
<<<<<<< HEAD
36
-
Next.js는 [Vercel](https://vercel.com/)에서 유지 관리합니다. [Next.js 앱을 빌드](https://nextjs.org/docs/app/building-your-application/deploying)해서 Node.js와 서버리스 호스팅 혹은 자체 서버에 배포할 수 있습니다. Next.js는 또한 서버가 필요없는 [정적 내보내기](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)도 지원합니다. Vercel은 추가적으로 옵트인 유료 클라우드 서비스도 지원합니다.
37
-
=======
38
-
Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
39
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
35
+
Next.js는 [Vercel](https://vercel.com/)에서 유지 관리합니다. [Next.js 앱을 빌드](https://nextjs.org/docs/app/building-your-application/deploying)해서 Node.js, 도커 컨테이너, 서버리스 호스팅, 혹은 자체 서버에 배포할 수 있습니다. Next.js는 또한 서버가 필요없는 [정적 내보내기](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)도 지원합니다.
40
36
41
37
### React Router (v7) {/*react-router-v7*/}
42
38
@@ -110,11 +106,7 @@ Next.js의 App Router는 [Suspense와 데이터 조회](/blog/2022/03/29/react-v
110
106
111
107
처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 합니다. 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷합니다. 저희가 [권장하는 프레임워크](#full-stack-frameworks)에는 이러한 문제에 대한 기본 제공 솔루션이 있습니다.
112
108
113
-
<<<<<<< HEAD
114
109
자신만의 솔루션을 구축하려면, [Vite](https://vite.dev/), [Parcel](https://parceljs.org/) 또는 [RSbuild](https://rsbuild.dev/)와 같은 빌드 도구로 시작할 수 있도록 하는 [처음부터 React 앱 만들기](/learn/build-a-react-app-from-scratch) 가이드를 참조하세요.
115
-
=======
116
-
If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/).
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler.md
+7-66Lines changed: 7 additions & 66 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,6 @@ title: React 컴파일러
6
6
이 페이지는 React 컴파일러에 대한 소개와 이를 성공적으로 시도하는 방법을 제공합니다.
7
7
</Intro>
8
8
9
-
<<<<<<< HEAD
10
-
<Wip>
11
-
이 문서는 아직 작업 중입니다. 더 많은 정보는 [React 컴파일러 워킹 그룹 저장소](https://github.com/reactwg/react-compiler/discussions)에서 확인할 수 있으며, React 컴파일러가 더욱 안정화되면 이 문서에 반영될 것입니다.
12
-
</Wip>
13
-
14
-
=======
15
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
16
9
<YouWillLearn>
17
10
18
11
* 컴파일러 시작하기
@@ -22,27 +15,17 @@ title: React 컴파일러
22
15
</YouWillLearn>
23
16
24
17
<Note>
25
-
<<<<<<< HEAD
26
18
27
-
React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스로 공개한 베타<sup>Beta</sup> 버전의 새로운 컴파일러입니다. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you’ve followed the [Rules of React](/reference/rules).
28
-
=======
29
-
React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback.
30
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
19
+
React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 RC<sup>Release Candidate</sup> 버전으로 오픈소스화한 새로운 컴파일러입니다. 이제 모든 분께 이 컴파일러를 사용해 보고 피드백을 제공할 것을 권장합니다.
31
20
32
21
The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`.
33
22
</Note>
34
23
35
-
<<<<<<< HEAD
36
-
React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스로 공개한 새로운 컴파일러입니다. React 컴파일러는 빌드 타임 전용 도구로 React 앱을 자동으로 최적화합니다. 순수 자바스크립트로 동작하며, [React의 규칙](/reference/rules)을 이해하므로 코드를 다시 작성할 필요가 없습니다.
37
-
38
-
컴파일러에는 에디터 내에서 분석 결과를 보여주는 [ESLint 플러그인](#installing-eslint-plugin-react-compiler)도 포함되어 있습니다. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
39
-
=======
40
-
React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
24
+
React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스화한 새로운 컴파일러입니다. React 컴파일러는 빌드 타임 전용 도구로 React 앱을 자동으로 최적화합니다. 순수 자바스크립트로 동작하며, [React의 규칙](/reference/rules)을 이해하므로 코드를 다시 작성할 필요가 없습니다.
41
25
42
-
eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
43
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
26
+
`eslint-plugin-react-hooks`에는 코드 에디터에서 컴파일러의 분석 결과를 즉시 보여주는 [ESLint 규칙](#installing-eslint-plugin-react-compiler)도 포함되어 있습니다. **지금 당장 모든 분들들께 이 린터 사용을 강력히 권장합니다.** 린터는 컴파일러의 설치가 필요 없으므로 컴파일러를 사용할 준비가 되지 않았더라도 사용할 수 있습니다.
44
27
45
-
The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC:
28
+
컴파일러는 현재 `rc` 버전으로 출시되었으며, React 17 이상의 앱과 라이브러리에서 사용해 볼 수 있습니다. `rc` 버전을 설치하려면 다음 명령어를 실행하세요.
컴파일러가 여전히 실험적이며 다양한 결함이 있다는 점을 유의하세요. Meta와 같은 회사에서는 이미 프로덕션 환경에서 사용하였지만, 앱의 프로덕션에 컴파일러를 점진적으로 도입할지는 코드베이스의 건강 상태와 [React의 규칙](/reference/rules)을 얼마나 잘 따랐는지에 따라 다를 것입니다.
135
-
=======
136
-
The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
137
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
116
+
컴파일러는 현재 Release Candidate(RC) 단계에 있으며, 이미 프로덕션 환경에서 광범위하게 테스트되었습니다. Meta와 같은 회사에서는 이미 프로덕션 환경에 도입하여 사용하고 있지만, 앱에 컴파일러를 점진적으로 도입할지는 코드베이스의 건강 상태와 [React의 규칙](/reference/rules)을 얼마나 잘 준수했는지에 따라 달라질 것입니다.
138
117
139
118
**지금 당장 컴파일러를 사용하기에 급급할 필요는 없습니다. 안정적인 릴리즈에 도달할 때까지 기다려도 괜찮습니다.** 하지만 앱에서의 작은 실험을 통해 컴파일러를 시도해 보고 [피드백을 제공](#reporting-issues)하여 컴파일러 개선에 도움을 줄 수 있습니다.
140
119
141
120
## 시작하기 {/*getting-started*/}
142
121
143
122
현재 문서 외에도 [React 컴파일러 워킹 그룹](https://github.com/reactwg/react-compiler)을 확인하여 컴파일러에 대한 추가 정보와 논의를 참조하는 것을 권장합니다.
144
123
145
-
<<<<<<< HEAD
146
-
### `eslint-plugin-react-compiler` 설치 {/*installing-eslint-plugin-react-compiler*/}
124
+
### `eslint-plugin-react-hooks` 설치 {/*installing-eslint-plugin-react-compiler*/}
147
125
148
-
React 컴파일러는 ESLint 플러그인도 지원합니다. ESLint 플러그인은 컴파일러와 **독립적으로** 사용할 수 있습니다. 즉, 컴파일러를 사용하지 않더라도 ESLint 플러그인을 사용할 수 있습니다.
See our [editor setup](/learn/editor-setup#linting) guide for more details.
191
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
192
133
193
134
ESLint 플러그인은 에디터에서 React의 규칙 위반 사항을 표시합니다. 이 경우 컴파일러가 해당 컴포넌트나 Hook의 최적화를 건너뛰었음을 의미합니다. 이것은 완전히 정상적인 동작이며, 컴파일러는 이를 복구하고 코드베이스의 다른 컴포넌트를 계속해서 최적화할 수 있습니다.
Copy file name to clipboardExpand all lines: src/content/learn/removing-effect-dependencies.md
-4Lines changed: 0 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1242,11 +1242,7 @@ export default function Timer() {
1242
1242
1243
1243
</Sandpack>
1244
1244
1245
-
<<<<<<< HEAD
1246
1245
Effect 내부에서 `count`를 읽는 대신 `c=> c +1` 명령어("이 숫자를 증가시켜라!")를 React에 전달합니다. React는 다음 렌더링에 이를 적용합니다. 그리고 Effect 내부에서 `count` 값을 더 이상 읽을 필요가 없으므로 Effect의 의존성을 비워둘 수 있습니다(`[]`). 이렇게 하면 매 틱마다 Effect가 인터벌을 다시 생성하지 않아도 됩니다.
1247
-
=======
1248
-
Instead of reading `count` inside the Effect, you pass a `c=> c +1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
Copy file name to clipboardExpand all lines: src/content/learn/separating-events-from-effects.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -439,11 +439,7 @@ function ChatRoom({ roomId, theme }) {
439
439
// ...
440
440
```
441
441
442
-
<<<<<<< HEAD
443
-
이렇게 하면 문제가 해결됩니다. Effect의 의존성 목록에서 `onConnected`를 *제거*해야 한다는 것에 유의하세요. **Effect 이벤트는 반응형이 아니므로 의존성에서 제외되어야 합니다.**
444
-
=======
445
-
This solves the problem. Note that you had to *remove* `theme` from the list of your Effect's dependencies, because it's no longer used in the Effect. You also don't need to *add* `onConnected` to it, because **Effect Events are not reactive and must be omitted from dependencies.**
446
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
442
+
이렇게 하면 문제가 해결됩니다. Effect에서 더 이상 사용하지 않으므로, Effect의 의존성 목록에서 `theme`을 *제거*해야 한다는 점에 유의하세요. 또한 `onConnected`를 *추가*할 필요도 없습니다. **Effect 이벤트는 반응형이 아니므로 의존성에서 제외되어야 합니다.**
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/preinit.md
+6-17Lines changed: 6 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,25 +44,14 @@ function AppRoot() {
44
44
45
45
#### 매개변수 {/*parameters*/}
46
46
47
-
<<<<<<< HEAD
48
47
*`href`: 문자열. 다운로드하고 실행할 리소스의 URL입니다.
49
-
*`options`: 객체. 다음 속성들을 포함할 수 있습니다:
50
-
*`as`: 필수 문자열. 리소스의 유형입니다. 가능한 값은 `script`와 `style`입니다.
48
+
*`options`: 객체. 다음 속성들을 포함할 수 있습니다.
49
+
*`as`: 필수 문자열. 리소스의 유형입니다. 가능한 값은 `script`와 `style`입니다.
51
50
*`precedence`: 문자열. 스타일시트에 필수입니다. 다른 스타일시트와의 삽입 순서를 결정합니다. 우선순위가 높은 스타일시트가 낮은 것을 덮어쓸 수 있습니다. 가능한 값은 `reset`, `low`, `medium`, `high`입니다.
52
-
*`crossOrigin`: 문자열. 사용할 [CORS 정책](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)입니다. 가능한 값은 `anonymous` 와 `use-credentials`입니다. `as` 가 `"fetch"`일 때 필수입니다.
53
-
*`integrity`: 문자열. 리소스의 [무결성을 검증](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)하기 위한 암호화 해시입니다.
54
-
*`nonce`: 문자열. 엄격한 콘텐츠 보안 정책을 사용할 때, 리소스를 허용하기 위한 암호화된 [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)입니다.
55
-
*`fetchPriority`: 문자열. 리소스를 가져오는 데 사용할 상대적인 우선순위를 제안합니다. 가능한 값은 `auto` (기본값), `high`, `low`입니다.
56
-
=======
57
-
*`href`: a string. The URL of the resource you want to download and execute.
58
-
*`options`: an object. It contains the following properties:
59
-
*`as`: a required string. The type of resource. Its possible values are `script` and `style`.
60
-
*`precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`.
61
-
*`crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
62
-
*`integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
63
-
*`nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
64
-
*`fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
65
-
>>>>>>> 2571aee6dba2e9790172a70224dac8371640b772
51
+
*`crossOrigin`: 문자열. 사용할 [CORS 정책](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)입니다. 가능한 값은 `anonymous` 와 `use-credentials`입니다.
52
+
*`integrity`: 문자열. 리소스의 [무결성을 검증](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)하기 위한 암호화 해시입니다.
53
+
*`nonce`: 문자열. 엄격한 콘텐츠 보안 정책을 사용할 때, 리소스를 허용하기 위한 암호화된 [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)입니다.
54
+
*`fetchPriority`: 문자열. 리소스를 가져오는 데 사용할 상대적인 우선순위를 제안합니다. 가능한 값은 `auto` (기본값), `high`, `low`입니다.
0 commit comments