Skip to content

Commit cea2176

Browse files
docs: translate react complier (#1216)
<!-- PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다! 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요. --> # React Compiler 번역 안된 파트 추가 번역 <!-- 어떤 종류의 PR인지 상세 내용을 작성해주세요. --> close #1209 - React 컴파일러에서 번역이 안된 섹션들을 추가 번역 ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> --------- Co-authored-by: 루밀LuMir <[email protected]>
1 parent 1752bc3 commit cea2176

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

src/content/learn/react-compiler.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ title: React 컴파일러
1818

1919
React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 RC<sup>Release Candidate</sup> 버전으로 오픈소스화한 새로운 컴파일러입니다. 이제 모든 분께 이 컴파일러를 사용해 보고 피드백을 제공할 것을 권장합니다.
2020

21-
The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`.
21+
최신 RC 릴리스는 `@rc` 태그로 찾을 수 있고, 일일 실험적 릴리스는 `@experimental`로 찾을 수 있습니다.
2222
</Note>
2323

2424
React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스화한 새로운 컴파일러입니다. React 컴파일러는 빌드 타임 전용 도구로 React 앱을 자동으로 최적화합니다. 순수 자바스크립트로 동작하며, [React의 규칙](/reference/rules)을 이해하므로 코드를 다시 작성할 필요가 없습니다.
@@ -31,13 +31,13 @@ React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해
3131
{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
3232
</TerminalBlock>
3333

34-
Or, if you're using Yarn:
34+
또는, Yarn을 사용한다면 아래 명령어를 실행해주세요.
3535

3636
<TerminalBlock>
3737
{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
3838
</TerminalBlock>
3939

40-
If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions.
40+
React 19를 아직 사용하지 않는다면, 추가 지침을 위해 [아래 섹션](#using-react-compiler-with-react-17-or-18)을 확인하세요.
4141

4242
### 컴파일러는 무엇을 하나요? {/*what-does-the-compiler-do*/}
4343

@@ -46,7 +46,7 @@ React 컴파일러는 애플리케이션을 최적화하기 위해 코드를 자
4646
컴파일러는 자바스크립트와 React의 규칙에 대한 지식을 활용하여 자동으로 컴포넌트와 Hook 내부의 값 또는 값 그룹을 메모이제이션 합니다. 규칙 위반을 감지할 경우 해당 컴포넌트 또는 Hook을 건너뛰고 다른 코드를 안전하게 컴파일합니다.
4747

4848
<Note>
49-
React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase.
49+
React 컴파일러는 React의 규칙 위반을 정적으로 감지할 수 있으며, 영향을 받는 컴포넌트나 Hook만 안전하게 최적화에서 제외할 수 있습니다. 컴파일러가 코드베이스의 100%를 최적화할 필요는 없습니다.
5050
</Note>
5151

5252
이미 코드베이스에 메모이제이션이 잘 되어 있다면, 컴파일러를 통해 주요 성능 향상을 기대하기 어려울 수 있습니다. 그러나 실제로 성능 문제를 일으키는 올바른 의존성<sup>dependencies</sup>을 메모이제이션 하는 것은 직접 처리하기 까다로울 수 있습니다.
@@ -123,13 +123,13 @@ function TableContainer({ items }) {
123123

124124
### `eslint-plugin-react-hooks` 설치 {/*installing-eslint-plugin-react-compiler*/}
125125

126-
React Compiler also powers an ESLint plugin. You can try it out by installing `eslint-plugin-react-hooks@^6.0.0-rc.1`.
126+
React 컴파일러는 ESLint 플러그인도 제공합니다. `eslint-plugin-react-hooks@^6.0.0-rc.1`을 설치해서 시도해보세요.
127127

128128
<TerminalBlock>
129129
{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`}
130130
</TerminalBlock>
131131

132-
See our [editor setup](/learn/editor-setup#linting) guide for more details.
132+
자세한 정보를 위해 [에디터 설정하기](/learn/editor-setup#linting) 가이드를 확인하세요.
133133

134134
ESLint 플러그인은 에디터에서 React의 규칙 위반 사항을 표시합니다. 이 경우 컴파일러가 해당 컴포넌트나 Hook의 최적화를 건너뛰었음을 의미합니다. 이것은 완전히 정상적인 동작이며, 컴파일러는 이를 복구하고 코드베이스의 다른 컴포넌트를 계속해서 최적화할 수 있습니다.
135135

@@ -159,15 +159,15 @@ const ReactCompilerConfig = {
159159

160160
새 프로젝트를 시작할 경우, 기본 동작으로 전체 코드베이스에서 컴파일러를 활성화할 수 있습니다.
161161

162-
### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
162+
### React 17 또는 18에서 컴파일러 사용 {/*using-react-compiler-with-react-17-or-18*/}
163163

164-
React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
164+
React 컴파일러는 React 19 RC에서 최적의 성능을 발휘합니다. 업그레이드가 불가능하다면 `react-compiler-runtime` 패키지를 추가 설치해 컴파일된 코드를 19 이전 버전에서도 실행할 수 있습니다. 단, 최소 지원 버전은 17입니다.
165165

166166
<TerminalBlock>
167167
{`npm install react-compiler-runtime@rc`}
168168
</TerminalBlock>
169169

170-
You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
170+
컴파일러 설정에 올바른 `target`을 추가해야 하며, `target`은 대상으로 하는 React의 메이저 버전입니다.
171171

172172
```js {3}
173173
// babel.config.js
@@ -184,17 +184,17 @@ module.exports = function () {
184184
};
185185
```
186186

187-
### Using the compiler on libraries {/*using-the-compiler-on-libraries*/}
187+
### 라이브러리에서 컴파일러 사용 {/*using-the-compiler-on-libraries*/}
188188

189-
React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
189+
React 컴파일러는 라이브러리 컴파일에도 사용할 수 있습니다. React 컴파일러는 코드 변환 이전의 원본 소스 코드에서 실행되어야 하기 때문에, 애플리케이션의 빌드 파이프라인으로는 사용하는 라이브러리를 컴파일할 수 없습니다. 따라서, 라이브러리 유지보수자가 컴파일러로 라이브러리를 독립적으로 컴파일하고 테스트한 후, 컴파일된 코드를 npm에 배포하는 것을 권장합니다.
190190

191-
Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
191+
코드가 사전 컴파일되기 때문에, 라이브러리 사용자들은 라이브러리에 적용된 자동 메모이제이션의 이점을 얻기 위해 컴파일러를 활성화할 필요가 없습니다. 라이브러리가 아직 React 19 버전이 아닌 앱을 대상으로 한다면, 최소 [`target`을 설정하고 `react-compiler-runtime`을 직접 의존성으로 추가하세요](#using-react-compiler-with-react-17-or-18). 런타임 패키지는 애플리케이션 버전에 따라 올바른 API 구현을 사용하며, 필요한 경우 누락된 API를 폴리필합니다.
192192

193-
Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation).
193+
라이브러리 코드는 종종 더 복잡한 패턴과 탈출구 사용이 필요할 수 있습니다. 이런 이유로, 라이브러리에 컴파일러를 적용할 때 발생할 수 있는 문제를 발견하기 위해 충분한 테스트를 갖추는 것을 권장합니다. 문제를 발견하면, 해당 컴포넌트나 훅을 [`'use no memo'` 지시어](#something-is-not-working-after-compilation)를 통해 언제든 제외할 수 있습니다.
194194

195-
Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify.
195+
앱과 비슷하게, 라이브러리에서 이점을 보기 위해 모든 컴포넌트나 훅을 100% 컴파일할 필요는 없습니다. 좋은 시작점은 라이브러리에서 성능에 민감한 부분을 파악하고 해당 부분이 [React의 규칙](/reference/rules)을 위반하지 않는지 확인하는 것입니다. 이는 `eslint-plugin-react-compiler`를 통해 파악할 수 있습니다.
196196

197-
## Usage {/*installation*/}
197+
## 사용법 {/*installation*/}
198198

199199
### Babel {/*usage-with-babel*/}
200200

@@ -248,7 +248,7 @@ export default defineConfig(() => {
248248

249249
### Next.js {/*usage-with-nextjs*/}
250250

251-
Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
251+
자세한 정보를 위해 [Next.js 문서](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler)를 확인하세요.
252252

253253
### Remix {/*usage-with-remix*/}
254254
`vite-plugin-babel`을 설치하고 컴파일러의 Babel 플러그인을 추가하세요.
@@ -281,11 +281,11 @@ export default defineConfig({
281281

282282
### Webpack {/*usage-with-webpack*/}
283283

284-
A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
284+
커뮤니티 webpack 로더가 [이제 여기에서 사용 가능합니다](https://github.com/SukkaW/react-compiler-webpack).
285285

286286
### Expo {/*usage-with-expo*/}
287287

288-
Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
288+
Expo 앱에서 React 컴파일러를 활성화하고 사용하려면 [Expo 문서](https://docs.expo.dev/guides/react-compiler/)를 확인하세요.
289289

290290
### Metro (React Native) {/*usage-with-react-native-metro*/}
291291

0 commit comments

Comments
 (0)