Merge branch 'main' into glossary-update

Author: nayounsang

src/content/learn/react-compiler/debugging.md

@@ -20,7 +20,7 @@ React 컴파일러는 [React의 규칙](/reference/rules)을 따르는 코드를
 
 ### 컴파일러 오류 vs 런타임 문제 {/*compiler-errors-vs-runtime-issues*/}
 
-**컴파일러 오류**는 빌드 시점에 발생하며 코드가 컴파일되지 않게 합니다. 컴파일러는 문제가 있는 코드를 실패시키기보다 건너뛰도록 설계되어 있기 때문에 이러한 오류는 드뭅니다.
+**컴파일러 오류**는 빌드 시점에 발생하며 코드가 컴파일되지 않게 합니다. 컴파일러는 문제가 있는 코드를 실패시키기보다 건너뛰도록 설계되어 있기 때문에 이러한 오류는 자주 발생하지 않습니다.
 
 **런타임 문제**는 컴파일된 코드가 예상과 다르게 동작할 때 발생합니다. React 컴파일러 관련 문제가 발생하면 대부분 런타임 문제입니다. 이는 일반적으로 컴파일러가 감지할 수 없는 미묘한 방식으로 코드가 React의 규칙을 위반하고, 컴파일러가 건너뛰어야 했던 컴포넌트를 실수로 컴파일했을 때 발생합니다.
 

src/content/learn/react-compiler/incremental-adoption.md

@@ -3,15 +3,15 @@ title: 점진적 도입
 ---
 
 <Intro>
-React 컴파일러는 점진적으로 도입할 수 있어서 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
+React 컴파일러는 점진적으로 도입할 수 있으며, 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
 </Intro>
 
 <YouWillLearn>
 
 * 점진적 도입이 권장되는 이유
 * 디렉터리 기반 도입을 위한 Babel overrides 사용
-* 선택적 컴파일을 위한 "use memo" 지시어 사용
-* 컴포넌트 제외를 위한 "use no memo" 지시어 사용
+* 선택적 컴파일을 위한 `"use memo"` 지시어 사용
+* 컴포넌트 제외를 위한 `"use no memo"` 지시어 사용
 * 게이팅을 통한 런타임 기능 플래그
 * 도입 진행 상황 모니터링
 
@@ -32,7 +32,7 @@ React 컴파일러는 전체 코드베이스를 자동으로 최적화하도록
 React 컴파일러를 점진적으로 도입하는 세 가지 주요 방법이 있습니다.
 
 1. **Babel overrides** - 특정 디렉터리에 컴파일러 적용
-2. **"use memo"로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
+2. **`"use memo"`로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
 3. **런타임 게이팅** - 기능 플래그로 컴파일 제어
 
 모든 방법은 전체 배포 전에 애플리케이션의 특정 부분에서 컴파일러를 테스트할 수 있게 해줍니다.
@@ -119,9 +119,9 @@ module.exports = {
 ```
 
 
-## "use memo"를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
+## `"use memo"`를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
 
-최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어로 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
+최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어를 통해 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
 
 <Note>
 이 방법은 개별 컴포넌트와 Hook에 대한 세밀한 제어를 제공합니다. 전체 디렉터리에 영향을 주지 않고 특정 컴포넌트에서 컴파일러를 테스트하고 싶을 때 유용합니다.
@@ -167,9 +167,9 @@ function useSortedData(data) {
 ```
 
 `compilationMode: 'annotation'`을 사용하면 다음을 해야 합니다.
-- 최적화하려는 모든 컴포넌트에 `"use memo"` 추가
-- 모든 커스텀 Hook에 `"use memo"` 추가
-- 새 컴포넌트에도 추가하는 것을 기억
+- 최적화하려는 모든 컴포넌트에 `"use memo"`를 추가합니다.
+- 모든 커스텀 Hook에 `"use memo"`를 추가합니다.
+- 이후에 새로 작성하는 컴포넌트에도 추가하는 것을 잊지 마세요.
 
 이를 통해 컴파일러의 영향을 평가하는 동안 어떤 컴포넌트가 컴파일되는지 정밀하게 제어할 수 있습니다.
 

src/content/learn/react-compiler/index.md

@@ -8,7 +8,7 @@ title: React 컴파일러
 
 ## 설치 {/*installation*/}
 
-[React 컴파일러 설치](/learn/react-compiler/installation)를 시작하고 빌드 도구와 함께 구성하는 방법을 알아보세요.
+[React 컴파일러 설치](/learn/react-compiler/installation)를 통해 시작하고 빌드 도구와 함께 구성하는 방법을 알아보세요.
 
 
 ## 점진적 도입 {/*incremental-adoption*/}

src/content/learn/react-compiler/installation.md

@@ -187,15 +187,15 @@ ESLint 규칙은 다음과 같은 역할을 합니다.
 
 React 컴파일러에 의해 최적화된 컴포넌트는 React DevTools에서 "Memo ✨" 배지가 표시됩니다.
 
-1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다
-2. 개발 모드에서 앱을 엽니다
-3. React DevTools를 엽니다
-4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다
+1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다.
+2. 개발 모드에서 앱을 엽니다.
+3. React DevTools를 엽니다.
+4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다.
 
 컴파일러가 작동하는 경우
-- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다
-- 비용이 큰 계산이 자동으로 메모이제이션됩니다
-- 수동으로 `useMemo`를 사용할 필요가 없습니다
+- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다.
+- 비용이 큰 계산이 자동으로 메모이제이션됩니다.
+- 수동으로 `useMemo`를 사용할 필요가 없습니다.
 
 ### 빌드 출력 확인 {/*check-build-output*/}
 

src/content/learn/react-compiler/introduction.md

@@ -99,7 +99,7 @@ React 컴파일러의 자동 메모이제이션은 주로 **업데이트 성능
 
 #### 리렌더링 최적화 {/*optimizing-re-renders*/}
 
-React는 UI를 현재 state의 함수로 표현할 수 있게 해줍니다 (더 구체적으로는 props, state, context). 현재 구현에서 컴포넌트의 state가 변경되면 React는 `useMemo()`, `useCallback()`, `React.memo()`를 사용한 수동 메모이제이션을 적용하지 않는 한 해당 컴포넌트 _및 모든 자식 컴포넌트_를 리렌더링합니다. 예를 들어, 다음 예시에서 `<MessageButton>`은 `<FriendList>`의 state가 변경될 때마다 리렌더링됩니다.
+React는 UI를 현재 state의 함수로 표현할 수 있게 해줍니다 (더 구체적으로는 props, state, context). 현재 구현에서 컴포넌트의 state가 변경되면 React는 `useMemo()`, `useCallback()`, `React.memo()`를 사용한 수동 메모이제이션을 적용하지 않는 한 해당 컴포넌트 <em>및 모든 자식 컴포넌트</em>를 리렌더링합니다. 예를 들어, 다음 예시에서 `<MessageButton>`은 `<FriendList>`의 state가 변경될 때마다 리렌더링됩니다.
 
 ```javascript
 function FriendList({ friends }) {
@@ -144,7 +144,7 @@ function TableContainer({ items }) {
 - React 컴파일러는 모든 함수가 아닌 React 컴포넌트와 Hook만 메모이제이션합니다.
 - React 컴파일러의 메모이제이션은 여러 컴포넌트나 Hook 간에 공유되지 않습니다.
 
-따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 items가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
+따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 `items`가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
 </DeepDive>
 
 ## 컴파일러를 사용해 봐야 하나요? {/*should-i-try-out-the-compiler*/}

src/content/reference/react-compiler/compilationMode.md

@@ -4,7 +4,7 @@ title: compilationMode
 
 <Intro>
 
-The `compilationMode` option controls how the React Compiler selects which functions to compile.
+`compilationMode` 옵션은 React 컴파일러가 어떤 함수를 컴파일할지 선택하는 방식을 제어합니다.
 
 </Intro>
 
@@ -18,95 +18,95 @@ 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
 {
   compilationMode: 'infer'
 }
 ```
 
-With this mode, these functions will be compiled:
+이 모드에서는 다음 함수들이 컴파일됩니다.
 
 ```js
-// ✅ Compiled: Named like a component + returns JSX
+// ✅ 컴파일됨: 컴포넌트처럼 이름이 지어졌고 JSX를 반환함
 function Button(props) {
   return <button>{props.label}</button>;
 }
 
-// ✅ 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
 {
   compilationMode: 'annotation'
 }
 ```
 
-Then explicitly mark functions to compile:
+그런 다음 컴파일할 함수를 명시적으로 표시합니다.
 
 ```js
-// Only this function will be compiled
+// 이 함수만 컴파일됩니다
 function ExpensiveList(props) {
   "use memo";
   return (
@@ -118,51 +118,51 @@ function ExpensiveList(props) {
   );
 }
 
-// This won't be compiled without the directive
+// 지시어가 없으면 컴파일되지 않습니다
 function NormalComponent(props) {
   return <div>{props.content}</div>;
 }
 ```
 
-### Using Flow syntax mode {/*flow-syntax-mode*/}
+### Flow 문법 모드 사용하기 {/*flow-syntax-mode*/}
 
-If your codebase uses Flow instead of TypeScript:
+코드베이스가 TypeScript 대신 Flow를 사용하는 경우입니다.
 
 ```js
 {
   compilationMode: 'syntax'
 }
 ```
 
-Then use Flow's component syntax:
+그런 다음 Flow의 컴포넌트 문법을 사용합니다.
 
 ```js
-// Compiled: Flow component syntax
+// 컴파일됨: Flow 컴포넌트 문법
 component Button(label: string) {
   return <button>{label}</button>;
 }
 
-// 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 <div>Content</div>;
@@ -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 <button>{props.label}</button>;
 }
 
-// ✅ Will be compiled: PascalCase name
+// ✅ 컴파일됨: PascalCase 이름
 function Button(props) {
   return <button>{props.label}</button>;
 }
 
-// ❌ 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;