From 5a9932739edb0a76c7f537efe90ef22a1aa37386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 16:15:57 +0900 Subject: [PATCH 1/8] docs: translate React Compiler Section --- .../react-compiler/compilationMode.md | 94 +++++++++---------- .../reference/react-compiler/configuration.md | 8 +- 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 5513d1c6a..5d409ae4e 100644 --- a/src/content/reference/react-compiler/compilationMode.md +++ b/src/content/reference/react-compiler/compilationMode.md @@ -4,7 +4,7 @@ title: compilationMode -The `compilationMode` option controls how the React Compiler selects which functions to compile. +`compilationMode` 옵션은 React 컴파일러가 어떤 함수를 컴파일할지 선택하는 방식을 제어합니다. @@ -18,48 +18,48 @@ The `compilationMode` option controls how the React Compiler selects which funct --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `compilationMode` {/*compilationmode*/} -Controls the strategy for determining which functions the React Compiler will optimize. +React 컴파일러가 최적화할 함수를 결정하는 전략을 제어합니다. -#### Type {/*type*/} +#### 타입 {/*type*/} ``` 'infer' | 'syntax' | 'annotation' | 'all' ``` -#### Default value {/*default-value*/} +#### 기본값 {/*default-value*/} `'infer'` -#### Options {/*options*/} +#### 옵션 {/*options*/} -- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks: - - Functions explicitly annotated with `"use memo"` directive - - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks +- **`'infer'`** (기본값): 컴파일러가 지능형 휴리스틱을 사용하여 React 컴포넌트와 Hook을 식별합니다. + - `"use memo"` 지시어로 명시적으로 표시된 함수 + - 컴포넌트(PascalCase) 또는 Hook(`use` 접두사)처럼 이름이 지어진 함수이면서 JSX를 생성하거나 다른 Hook을 호출하는 함수 -- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption. +- **`'annotation'`**: `"use memo"` 지시어로 명시적으로 표시된 함수만 컴파일합니다. 점진적 도입에 이상적입니다. -- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax. +- **`'syntax'`**: Flow의 [component](https://flow.org/en/docs/react/component-syntax/) 및 [hook](https://flow.org/en/docs/react/hook-syntax/) 문법을 사용하는 컴포넌트와 Hook만 컴파일합니다. -- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions. +- **`'all'`**: 모든 최상위 함수를 컴파일합니다. React가 아닌 함수도 컴파일할 수 있으므로 권장하지 않습니다. -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -- The `'infer'` mode requires functions to follow React naming conventions to be detected -- Using `'all'` mode may negatively impact performance by compiling utility functions -- The `'syntax'` mode requires Flow and won't work with TypeScript -- Regardless of mode, functions with `"use no memo"` directive are always skipped +- `'infer'` 모드는 함수가 React 명명 규칙을 따라야 감지할 수 있습니다. +- `'all'` 모드를 사용하면 유틸리티 함수까지 컴파일하여 성능에 부정적인 영향을 미칠 수 있습니다. +- `'syntax'` 모드는 Flow가 필요하며 TypeScript와는 작동하지 않습니다. +- 모드와 관계없이 `"use no memo"` 지시어가 있는 함수는 항상 건너뜁니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Default inference mode {/*default-inference-mode*/} +### 기본 추론 모드 {/*default-inference-mode*/} -The default `'infer'` mode works well for most codebases that follow React conventions: +기본 `'infer'` 모드는 React 규칙을 따르는 대부분의 코드베이스에서 잘 작동합니다. ```js { @@ -67,35 +67,35 @@ The default `'infer'` mode works well for most codebases that follow React conve } ``` -With this mode, these functions will be compiled: +이 모드에서는 다음 함수들이 컴파일됩니다. ```js -// ✅ Compiled: Named like a component + returns JSX +// ✅ 컴파일됨: 컴포넌트처럼 이름이 지어졌고 JSX를 반환함 function Button(props) { return ; } -// ✅ Compiled: Named like a hook + calls hooks +// ✅ 컴파일됨: Hook처럼 이름이 지어졌고 Hook을 호출함 function useCounter() { const [count, setCount] = useState(0); return [count, setCount]; } -// ✅ Compiled: Explicit directive +// ✅ 컴파일됨: 명시적인 지시어 function expensiveCalculation(data) { "use memo"; return data.reduce(/* ... */); } -// ❌ Not compiled: Not a component/hook pattern +// ❌ 컴파일되지 않음: 컴포넌트/Hook 패턴이 아님 function calculateTotal(items) { return items.reduce((a, b) => a + b, 0); } ``` -### Incremental adoption with annotation mode {/*incremental-adoption*/} +### 어노테이션 모드를 사용한 점진적 도입 {/*incremental-adoption*/} -For gradual migration, use `'annotation'` mode to only compile marked functions: +점진적 마이그레이션을 위해 `'annotation'` 모드를 사용하여 표시된 함수만 컴파일합니다. ```js { @@ -103,10 +103,10 @@ For gradual migration, use `'annotation'` mode to only compile marked functions: } ``` -Then explicitly mark functions to compile: +그런 다음 컴파일할 함수를 명시적으로 표시합니다. ```js -// Only this function will be compiled +// 이 함수만 컴파일됩니다 function ExpensiveList(props) { "use memo"; return ( @@ -118,15 +118,15 @@ function ExpensiveList(props) { ); } -// This won't be compiled without the directive +// 지시어가 없으면 컴파일되지 않습니다 function NormalComponent(props) { return
{props.content}
; } ``` -### Using Flow syntax mode {/*flow-syntax-mode*/} +### Flow 문법 모드 사용하기 {/*flow-syntax-mode*/} -If your codebase uses Flow instead of TypeScript: +코드베이스가 TypeScript 대신 Flow를 사용하는 경우입니다. ```js { @@ -134,35 +134,35 @@ If your codebase uses Flow instead of TypeScript: } ``` -Then use Flow's component syntax: +그런 다음 Flow의 컴포넌트 문법을 사용합니다. ```js -// Compiled: Flow component syntax +// 컴파일됨: Flow 컴포넌트 문법 component Button(label: string) { return ; } -// Compiled: Flow hook syntax +// 컴파일됨: Flow Hook 문법 hook useCounter(initial: number) { const [count, setCount] = useState(initial); return [count, setCount]; } -// Not compiled: Regular function syntax +// 컴파일되지 않음: 일반 함수 문법 function helper(data) { return process(data); } ``` -### Opting out specific functions {/*opting-out*/} +### 특정 함수 제외하기 {/*opting-out*/} -Regardless of compilation mode, use `"use no memo"` to skip compilation: +컴파일 모드와 관계없이 `"use no memo"`를 사용하여 컴파일을 건너뛸 수 있습니다. ```js function ComponentWithSideEffects() { - "use no memo"; // Prevent compilation + "use no memo"; // 컴파일 방지 - // This component has side effects that shouldn't be memoized + // 이 컴포넌트는 메모이제이션되어서는 안 되는 사이드 이펙트가 있습니다 logToAnalytics('component_rendered'); return
Content
; @@ -171,29 +171,29 @@ function ComponentWithSideEffects() { --- -## Troubleshooting {/*troubleshooting*/} +## 문제 해결 {/*troubleshooting*/} -### Component not being compiled in infer mode {/*component-not-compiled-infer*/} +### infer 모드에서 컴포넌트가 컴파일되지 않는 경우 {/*component-not-compiled-infer*/} -In `'infer'` mode, ensure your component follows React conventions: +`'infer'` 모드에서는 컴포넌트가 React 규칙을 따르는지 확인하세요. ```js -// ❌ Won't be compiled: lowercase name +// ❌ 컴파일되지 않음: 소문자 이름 function button(props) { return ; } -// ✅ Will be compiled: PascalCase name +// ✅ 컴파일됨: PascalCase 이름 function Button(props) { return ; } -// ❌ Won't be compiled: doesn't create JSX or call hooks +// ❌ 컴파일되지 않음: JSX를 생성하거나 Hook을 호출하지 않음 function useData() { return window.localStorage.getItem('data'); } -// ✅ Will be compiled: calls a hook +// ✅ 컴파일됨: Hook을 호출함 function useData() { const [data] = useState(() => window.localStorage.getItem('data')); return data; diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md index b14656762..45195d426 100644 --- a/src/content/reference/react-compiler/configuration.md +++ b/src/content/reference/react-compiler/configuration.md @@ -10,7 +10,7 @@ title: 설정 -대부분의 앱에서는 기본 옵션이 기본적으로 잘 작동합니다. 특별한 필요가 있다면 이러한 고급 옵션을 사용할 수 있습니다. +대부분의 앱에서는 기본 옵션이 기본적으로 잘 작동합니다. 특별한 필요성이 있는 경우에 이러한 고급 옵션을 사용할 수 있습니다. @@ -31,9 +31,9 @@ module.exports = { ## 컴파일 제어 {/*compilation-control*/} -이 옵션들은 컴파일러가 *무엇*을 최적화하고, *어떻게* 컴포넌트와 hooks를 컴파일 대상으로 선택할지를 제어합니다. +이 옵션들은 컴파일러가 *무엇*을 최적화하고, *어떻게* 컴포넌트와 Hook을 컴파일 대상으로 선택할지를 제어합니다. -* [`compilationMode`](/reference/react-compiler/compilationMode)는 컴파일할 함수를 선택하는 전략을 제어합니다. (예: 모든 함수, 어노테이션된 함수만, 또는 컴파일러의 자동 감지). +* [`compilationMode`](/reference/react-compiler/compilationMode)는 컴파일할 함수를 선택하는 전략을 제어합니다. (예: 모든 함수, 어노테이션된 함수만, 또는 컴파일러의 자동 감지) ```js { @@ -127,7 +127,7 @@ module.exports = { ### React 17/18 프로젝트 {/*react-17-18*/} -React 17/18 프로젝트에서는 런타임 패키지와 target 설정이 필요합니다. +React 17/18 프로젝트에서는 런타임 패키지와 `target` 설정이 필요합니다. ```bash npm install react-compiler-runtime@latest From c30e21eccc45bf5b852e1048b4ac828171198f58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 16:31:07 +0900 Subject: [PATCH 2/8] wip --- .../reference/react-compiler/compilationMode.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 5d409ae4e..608ece841 100644 --- a/src/content/reference/react-compiler/compilationMode.md +++ b/src/content/reference/react-compiler/compilationMode.md @@ -37,12 +37,12 @@ React 컴파일러가 최적화할 함수를 결정하는 전략을 제어합니 #### 옵션 {/*options*/} - **`'infer'`** (기본값): 컴파일러가 지능형 휴리스틱을 사용하여 React 컴포넌트와 Hook을 식별합니다. - - `"use memo"` 지시어로 명시적으로 표시된 함수 - - 컴포넌트(PascalCase) 또는 Hook(`use` 접두사)처럼 이름이 지어진 함수이면서 JSX를 생성하거나 다른 Hook을 호출하는 함수 + - `"use memo"` 지시어로 명시적으로 표시된 함수. + - 컴포넌트(PascalCase) 또는 Hook(`use` 접두사)처럼 이름이 지어진 함수이면서 JSX를 생성하거나 다른 Hook을 호출하는 함수. - **`'annotation'`**: `"use memo"` 지시어로 명시적으로 표시된 함수만 컴파일합니다. 점진적 도입에 이상적입니다. -- **`'syntax'`**: Flow의 [component](https://flow.org/en/docs/react/component-syntax/) 및 [hook](https://flow.org/en/docs/react/hook-syntax/) 문법을 사용하는 컴포넌트와 Hook만 컴파일합니다. +- **`'syntax'`**: Flow의 [Component](https://flow.org/en/docs/react/component-syntax/) 및 [Hook](https://flow.org/en/docs/react/hook-syntax/) 문법을 사용하는 컴포넌트와 Hook만 컴파일합니다. - **`'all'`**: 모든 최상위 함수를 컴파일합니다. React가 아닌 함수도 컴파일할 수 있으므로 권장하지 않습니다. @@ -59,7 +59,7 @@ React 컴파일러가 최적화할 함수를 결정하는 전략을 제어합니 ### 기본 추론 모드 {/*default-inference-mode*/} -기본 `'infer'` 모드는 React 규칙을 따르는 대부분의 코드베이스에서 잘 작동합니다. +기본 `'infer'` 모드는 React의 규칙을 따르는 대부분의 코드베이스에서 잘 작동합니다. ```js { @@ -173,9 +173,9 @@ function ComponentWithSideEffects() { ## 문제 해결 {/*troubleshooting*/} -### infer 모드에서 컴포넌트가 컴파일되지 않는 경우 {/*component-not-compiled-infer*/} +### `'infer'` 모드에서 컴포넌트가 컴파일되지 않는 경우 {/*component-not-compiled-infer*/} -`'infer'` 모드에서는 컴포넌트가 React 규칙을 따르는지 확인하세요. +`'infer'` 모드에서는 컴포넌트가 React의 규칙을 따르는지 확인하세요. ```js // ❌ 컴파일되지 않음: 소문자 이름 From da8d2fd6764f755fa1d08171e6b3aa7293d467a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 16:43:57 +0900 Subject: [PATCH 3/8] wip: translate `gating.md` --- .../reference/react-compiler/gating.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index 479506af3..d00630c5b 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -4,7 +4,7 @@ title: gating -The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime. +`gating` 옵션은 조건부 컴파일을 활성화하여 런타임에 최적화된 코드가 사용되는 시점을 제어할 수 있게 합니다. @@ -21,13 +21,13 @@ The `gating` option enables conditional compilation, allowing you to control whe --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `gating` {/*gating*/} -Configures runtime feature flag gating for compiled functions. +컴파일된 함수에 대한 런타임 기능 플래그 Gating을 설정합니다. -#### Type {/*type*/} +#### 타입 {/*type*/} ``` { @@ -36,28 +36,28 @@ Configures runtime feature flag gating for compiled functions. } | null ``` -#### Default value {/*default-value*/} +#### 기본값 {/*default-value*/} `null` -#### Properties {/*properties*/} +#### 프로퍼티 {/*properties*/} -- **`source`**: Module path to import the feature flag from -- **`importSpecifierName`**: Name of the exported function to import +- **`source`**: 기능 플래그를 가져올 모듈 경로. +- **`importSpecifierName`**: 가져오고Import 싶은 내보낸Export 함수의 이름. -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -- The gating function must return a boolean -- Both compiled and original versions increase bundle size -- The import is added to every file with compiled functions +- Gating 함수는 반드시 boolean을 반환해야 합니다. +- 컴파일된 버전과 원본 버전 모두 번들 크기를 증가시킵니다. +- `import`는 컴파일된 함수가 있는 모든 파일에 추가됩니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Basic feature flag setup {/*basic-setup*/} +### 기본 기능 플래그 설정 {/*basic-setup*/} -1. Create a feature flag module: +1. 기능 플래그 모듈을 생성합니다. ```js // src/utils/feature-flags.js @@ -67,7 +67,7 @@ export function shouldUseCompiler() { } ``` -2. Configure the compiler: +2. 컴파일러를 설정합니다. ```js { @@ -78,7 +78,7 @@ export function shouldUseCompiler() { } ``` -3. The compiler generates gated code: +3. 컴파일러가 게이트된 코드를 생성합니다. ```js // Input @@ -94,46 +94,46 @@ const Button = shouldUseCompiler() : function Button_original(props) { /* original version */ }; ``` -Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session. +Gating 함수는 모듈 시간에 한 번만 평가되므로, JS 번들이 파싱되고 평가된 후에는 선택된 컴포넌트가 브라우저 세션이 끝날 때까지 정적으로 유지됩니다. --- -## Troubleshooting {/*troubleshooting*/} +## 문제 해결 {/*troubleshooting*/} -### Feature flag not working {/*flag-not-working*/} +### 기능 플래그가 작동하지 않는 경우 {/*flag-not-working*/} -Verify your flag module exports the correct function: +플래그 모듈이 올바른 함수를 내보내는지 확인하세요. ```js -// ❌ Wrong: Default export +// ❌ 잘못된 예: Default export export default function shouldUseCompiler() { return true; } -// ✅ Correct: Named export matching importSpecifierName +// ✅ 올바른 예: importSpecifierName과 일치하는 Named export export function shouldUseCompiler() { return true; } ``` -### Import errors {/*import-errors*/} +### Import 오류 {/*import-errors*/} -Ensure the source path is correct: +`source`의 경로가 올바른지 확인하세요. ```js -// ❌ Wrong: Relative to babel.config.js +// ❌ 잘못된 예: `babel.config.js`에 상대적인 경로 { source: './src/flags', importSpecifierName: 'flag' } -// ✅ Correct: Module resolution path +// ✅ 올바른 예: 모듈 해석 경로 { source: '@myapp/feature-flags', importSpecifierName: 'flag' } -// ✅ Also correct: Absolute path from project root +// ✅ 올바른 예: 프로젝트 루트로부터의 절대 경로 { source: './src/utils/flags', importSpecifierName: 'flag' From 1f719d842d4778c750476155abbe3026f8cc6fe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 16:54:40 +0900 Subject: [PATCH 4/8] wip --- .../reference/react-compiler/logger.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index 41e2a1da0..ae91e2a70 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -4,7 +4,7 @@ title: logger -The `logger` option provides custom logging for React Compiler events during compilation. +`logger` 옵션은 컴파일 중 React 컴파일러 이벤트에 대한 커스텀 로깅을 제공합니다. @@ -22,13 +22,13 @@ The `logger` option provides custom logging for React Compiler events during com --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `logger` {/*logger*/} -Configures custom logging to track compiler behavior and debug issues. +컴파일러 동작을 추적하고 문제를 디버깅하기 위한 커스텀 로깅을 설정합니다. -#### Type {/*type*/} +#### 타입 {/*type*/} ``` { @@ -36,35 +36,35 @@ Configures custom logging to track compiler behavior and debug issues. } | null ``` -#### Default value {/*default-value*/} +#### 기본값 {/*default-value*/} `null` -#### Methods {/*methods*/} +#### 메서드 {/*methods*/} -- **`logEvent`**: Called for each compiler event with the filename and event details +- **`logEvent`**: 각 컴파일러 이벤트에 대해 파일명, 이벤트 세부 정보와 함께 호출됩니다. -#### Event types {/*event-types*/} +#### 이벤트 타입 {/*event-types*/} -- **`CompileSuccess`**: Function successfully compiled -- **`CompileError`**: Function skipped due to errors -- **`CompileDiagnostic`**: Non-fatal diagnostic information -- **`CompileSkip`**: Function skipped for other reasons -- **`PipelineError`**: Unexpected compilation error -- **`Timing`**: Performance timing information +- **`CompileSuccess`**: 함수가 성공적으로 컴파일됨. +- **`CompileError`**: 오류로 인해 함수가 건너뛰어짐. +- **`CompileDiagnostic`**: 치명적이지 않은 진단 정보. +- **`CompileSkip`**: 다른 이유로 함수가 건너뛰어짐. +- **`PipelineError`**: 예기치 않은 컴파일 오류. +- **`Timing`**: 성능 타이밍 정보. -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -- Event structure may change between versions -- Large codebases generate many log entries +- 이벤트 구조는 버전 간에 변경될 수 있습니다. +- 대규모 코드베이스는 많은 로그 항목을 생성합니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Basic logging {/*basic-logging*/} +### 기본 로깅 {/*basic-logging*/} -Track compilation success and failures: +컴파일 성공과 실패를 추적합니다. ```js { @@ -86,9 +86,9 @@ Track compilation success and failures: } ``` -### Detailed error logging {/*detailed-error-logging*/} +### 상세 오류 로깅 {/*detailed-error-logging*/} -Get specific information about compilation failures: +컴파일 실패에 대한 구체적인 정보를 확인합니다. ```js { From a8d1768e7f4a0860a89294912f12ecb4c75ee01c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 16:58:50 +0900 Subject: [PATCH 5/8] wip --- .../react-compiler/panicThreshold.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md index 6f86c7a43..8ad752d6a 100644 --- a/src/content/reference/react-compiler/panicThreshold.md +++ b/src/content/reference/react-compiler/panicThreshold.md @@ -4,7 +4,7 @@ title: panicThreshold -The `panicThreshold` option controls how the React Compiler handles errors during compilation. +`panicThreshold` 옵션은 React 컴파일러가 컴파일 중 오류를 처리하는 방식을 제어합니다. @@ -18,42 +18,42 @@ The `panicThreshold` option controls how the React Compiler handles errors durin --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `panicThreshold` {/*panicthreshold*/} -Determines whether compilation errors should fail the build or skip optimization. +컴파일 오류가 빌드를 실패시켜야 하는지 아니면 최적화를 건너뛰어야 하는지를 결정합니다. -#### Type {/*type*/} +#### 타입 {/*type*/} ``` 'none' | 'critical_errors' | 'all_errors' ``` -#### Default value {/*default-value*/} +#### 기본값 {/*default-value*/} `'none'` -#### Options {/*options*/} +#### 옵션 {/*options*/} -- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building -- **`'critical_errors'`**: Fail the build only on critical compiler errors -- **`'all_errors'`**: Fail the build on any compiler diagnostic +- **`'none'`** (기본값, 권장): 컴파일할 수 없는 컴포넌트를 건너뛰고 빌드를 계속 진행합니다. +- **`'critical_errors'`**: 치명적인 컴파일러 오류에서만 빌드를 실패시킵니다. +- **`'all_errors'`**: 모든 컴파일러 진단에서 빌드를 실패시킵니다. -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -- Production builds should always use `'none'` -- Build failures prevent your application from building -- The compiler automatically detects and skips problematic code with `'none'` -- Higher thresholds are only useful during development for debugging +- 프로덕션 빌드에서는 항상 `'none'`을 사용해야 합니다. +- 빌드 실패는 애플리케이션이 빌드되지 않도록 합니다. +- 컴파일러는 `'none'`을 사용하면 문제가 있는 코드를 자동으로 감지하고 건너뜁니다. +- 더 높은 임계값은 개발 중 디버깅에만 유용합니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Production configuration (recommended) {/*production-configuration*/} +### 프로덕션 설정 (권장) {/*production-configuration*/} -For production builds, always use `'none'`. This is the default value: +프로덕션 빌드에서는 항상 `'none'`을 사용하세요. 이것이 기본값입니다. ```js { @@ -61,15 +61,15 @@ For production builds, always use `'none'`. This is the default value: } ``` -This ensures: -- Your build never fails due to compiler issues -- Components that can't be optimized run normally -- Maximum components get optimized -- Stable production deployments +이렇게 하면 다음을 보장합니다. +- 컴파일러 문제로 인해 빌드가 실패하지 않습니다. +- 최적화할 수 없는 컴포넌트도 정상적으로 실행됩니다. +- 최대한 많은 컴포넌트가 최적화됩니다. +- 안정적인 프로덕션 배포가 가능합니다. -### Development debugging {/*development-debugging*/} +### 개발 중 디버깅 {/*development-debugging*/} -Temporarily use stricter thresholds to find issues: +문제를 찾기 위해 일시적으로 더 엄격한 임계값을 사용합니다. ```js const isDevelopment = process.env.NODE_ENV === 'development'; From b385d5c65d7aaf0659e787c656fe3d28e6b8843e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 17:07:25 +0900 Subject: [PATCH 6/8] wip --- .../reference/react-compiler/target.md | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md index de35ad7ea..514cb1e2c 100644 --- a/src/content/reference/react-compiler/target.md +++ b/src/content/reference/react-compiler/target.md @@ -4,7 +4,7 @@ title: target -The `target` option specifies which React version the compiler should generate code for. +`target` 옵션은 컴파일러가 어떤 React 버전을 위한 코드를 생성해야 하는지 지정합니다. @@ -18,42 +18,42 @@ The `target` option specifies which React version the compiler should generate c --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `target` {/*target*/} -Configures the React version compatibility for the compiled output. +컴파일된 출력의 React 버전 호환성을 설정합니다. -#### Type {/*type*/} +#### 타입 {/*type*/} ``` '17' | '18' | '19' ``` -#### Default value {/*default-value*/} +#### 기본값 {/*default-value*/} `'19'` -#### Valid values {/*valid-values*/} +#### 유효한 값 {/*valid-values*/} -- **`'19'`**: Target React 19 (default). No additional runtime required. -- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package. -- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package. +- **`'19'`**: React 19를 대상으로 합니다 (기본값). 추가 런타임이 필요하지 않습니다. +- **`'18'`**: React 18을 대상으로 합니다. `react-compiler-runtime` 패키지가 필요합니다. +- **`'17'`**: React 17을 대상으로 합니다. `react-compiler-runtime` 패키지가 필요합니다. -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -- Always use string values, not numbers (e.g., `'17'` not `17`) -- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`) -- React 19 includes built-in compiler runtime APIs -- React 17 and 18 require installing `react-compiler-runtime@latest` +- 숫자가 아닌 문자열 값을 사용하세요. (예: `17`이 아닌 `'17'`) +- 패치 버전은 포함하지 마세요. (예: `'18.2.0'`이 아닌 `'18'`을 사용) +- React 19는 컴파일러 런타임 API가 내장되어 있습니다. +- React 17과 18은 `react-compiler-runtime@latest` 설치가 필요합니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Targeting React 19 (default) {/*targeting-react-19*/} +### React 19 대상으로 하기 (기본값) {/*targeting-react-19*/} -For React 19, no special configuration is needed: +React 19의 경우 특별한 설정이 필요하지 않습니다. ```js { @@ -61,24 +61,24 @@ For React 19, no special configuration is needed: } ``` -The compiler will use React 19's built-in runtime APIs: +컴파일러는 React 19의 내장 런타임 API를 사용합니다. ```js -// Compiled output uses React 19's native APIs +// 컴파일된 출력은 React 19의 네이티브 API를 사용합니다. import { c as _c } from 'react/compiler-runtime'; ``` -### Targeting React 17 or 18 {/*targeting-react-17-or-18*/} +### React 17 또는 18 대상으로 하기 {/*targeting-react-17-or-18*/} -For React 17 and React 18 projects, you need two steps: +React 17과 React 18 프로젝트의 경우 두 단계가 필요합니다. -1. Install the runtime package: +1. 런타임 패키지를 설치합니다. ```bash npm install react-compiler-runtime@latest ``` -2. Configure the target: +2. `target`을 설정합니다. ```js // For React 18 @@ -92,57 +92,57 @@ npm install react-compiler-runtime@latest } ``` -The compiler will use the polyfill runtime for both versions: +컴파일러는 두 버전 모두에 대해 폴리필 런타임을 사용합니다. ```js -// Compiled output uses the polyfill +// 컴파일된 출력은 폴리필을 사용합니다. import { c as _c } from 'react-compiler-runtime'; ``` --- -## Troubleshooting {/*troubleshooting*/} +## 문제 해결 {/*troubleshooting*/} -### Runtime errors about missing compiler runtime {/*missing-runtime*/} +### 컴파일러 런타임 누락에 관한 런타임 오류 {/*missing-runtime*/} -If you see errors like "Cannot find module 'react/compiler-runtime'": +"Cannot find module 'react/compiler-runtime'"와 같은 오류가 표시되는 경우에는 다음과 같이 합니다. -1. Check your React version: +1. React 버전을 확인합니다. ```bash npm why react ``` -2. If using React 17 or 18, install the runtime: +2. React 17 또는 18을 사용하는 경우 런타임을 설치합니다. ```bash npm install react-compiler-runtime@latest ``` -3. Ensure your target matches your React version: +3. target이 React 버전과 일치하는지 확인합니다. ```js { - target: '18' // Must match your React major version + target: '18' // React 메이저 버전과 일치해야 합니다 } ``` -### Runtime package not working {/*runtime-not-working*/} +### 런타임 패키지가 작동하지 않는 경우 {/*runtime-not-working*/} -Ensure the runtime package is: +런타임 패키지가 다음 조건을 만족하는지 확인하세요. -1. Installed in your project (not globally) -2. Listed in your `package.json` dependencies -3. The correct version (`@latest` tag) -4. Not in `devDependencies` (it's needed at runtime) +1. 프로젝트에 설치되어 있어야 합니다. (전역이 아닌) +2. `package.json`의 `dependencies`에 나열되어 있어야 합니다. +3. 올바른 버전이어야 합니다. (`@latest` 태그) +4. `devDependencies`에 있으면 안 됩니다. (런타임에 필요합니다) -### Checking compiled output {/*checking-output*/} +### 컴파일된 출력 확인하기 {/*checking-output*/} -To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18): +올바른 런타임이 사용되고 있는지 확인하려면 서로 다른 import를 주목하세요. (내장의 경우 `react/compiler-runtime`, 17/18용 독립 패키지의 경우 `react-compiler-runtime`) ```js -// For React 19 (built-in runtime) +// React 19용 (내장 런타임) import { c } from 'react/compiler-runtime' // ^ -// For React 17/18 (polyfill runtime) +// React 17/18용 (폴리필 런타임) import { c } from 'react-compiler-runtime' // ^ ``` From 73993f58e5bd2878e44ac084e85f320da953d3d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 17:08:35 +0900 Subject: [PATCH 7/8] wip --- src/content/reference/react-compiler/target.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md index 514cb1e2c..6aac71203 100644 --- a/src/content/reference/react-compiler/target.md +++ b/src/content/reference/react-compiler/target.md @@ -117,7 +117,7 @@ import { c as _c } from 'react-compiler-runtime'; npm install react-compiler-runtime@latest ``` -3. target이 React 버전과 일치하는지 확인합니다. +3. `target`이 React 버전과 일치하는지 확인합니다. ```js { target: '18' // React 메이저 버전과 일치해야 합니다 From 46ac28f0454eb1b962270a7abb046c3a1b9d786d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 31 Jan 2026 17:18:03 +0900 Subject: [PATCH 8/8] wip --- src/content/reference/react-compiler/gating.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index d00630c5b..9fcb4d2ad 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -43,7 +43,7 @@ title: gating #### 프로퍼티 {/*properties*/} - **`source`**: 기능 플래그를 가져올 모듈 경로. -- **`importSpecifierName`**: 가져오고Import 싶은 내보낸Export 함수의 이름. +- **`importSpecifierName`**: `import`해서 사용하려는 내보낸Export 함수의 이름. #### 주의 사항 {/*caveats*/}