docs: translate remaining React Compiler sections (#1450)

#1449 에 이어 React Compiler 관련
섹션 번역을 모두 완료하였습니다.

2번 이상의 검수를 거쳤기에, 바로 머지합니다.

Author: lumirlumir

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/compiling-libraries.md

@@ -1,30 +1,30 @@
 ---
-title: Compiling Libraries
+title: 라이브러리 컴파일
 ---
 
 <Intro>
-This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
+이 가이드는 라이브러리 작성자가 React 컴파일러를 사용하여 최적화된 라이브러리 코드를 사용자에게 제공하는 방법을 설명합니다.
 </Intro>
 
 <InlineToc />
 
-## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
+## 컴파일된 코드를 배포해야 하는 이유 {/*why-ship-compiled-code*/}
 
-As a library author, you can compile your library code before publishing to npm. This provides several benefits:
+라이브러리 작성자는 npm에 배포하기 전에 라이브러리 코드를 컴파일할 수 있습니다. 이는 여러 가지 이점을 제공합니다.
 
-- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
-- **No configuration required by users** - The optimizations work out of the box
-- **Consistent behavior** - All users get the same optimized version regardless of their build setup
+- **모든 사용자를 위한 성능 향상** - 라이브러리 사용자가 아직 React 컴파일러를 사용하지 않더라도 최적화된 코드를 얻습니다.
+- **사용자에게 설정이 필요 없음** - 최적화가 바로 작동합니다.
+- **일관된 동작** - 모든 사용자가 빌드 설정에 관계없이 동일한 최적화된 버전을 얻습니다.
 
-## Setting Up Compilation {/*setting-up-compilation*/}
+## 컴파일 설정하기 {/*setting-up-compilation*/}
 
-Add React Compiler to your library's build process:
+라이브러리의 빌드 프로세스에 React 컴파일러를 추가하세요.
 
 <TerminalBlock>
 npm install -D babel-plugin-react-compiler@latest
 </TerminalBlock>
 
-Configure your build tool to compile your library. For example, with Babel:
+라이브러리를 컴파일하도록 빌드 도구를 설정하세요. Babel을 사용하는 예시입니다.
 
 ```js
 // babel.config.js
@@ -36,13 +36,13 @@ module.exports = {
 };
 ```
 
-## Backwards Compatibility {/*backwards-compatibility*/}
+## 하위 호환성 {/*backwards-compatibility*/}
 
-If your library supports React versions below 19, you'll need additional configuration:
+라이브러리가 React 19 미만 버전을 지원하는 경우 추가 설정이 필요합니다.
 
-### 1. Install the runtime package {/*install-runtime-package*/}
+### 1. 런타임 패키지 설치하기 {/*install-runtime-package*/}
 
-We recommend installing react-compiler-runtime as a direct dependency:
+`react-compiler-runtime`을 직접 의존성<sup>`dependencies`</sup>으로 설치하는 것을 권장합니다.
 
 <TerminalBlock>
 npm install react-compiler-runtime@latest
@@ -59,48 +59,48 @@ npm install react-compiler-runtime@latest
 }
 ```
 
-### 2. Configure the target version {/*configure-target-version*/}
+### 2. `target` 버전 설정하기 {/*configure-target-version*/}
 
-Set the minimum React version your library supports:
+라이브러리가 지원하는 최소 React 버전을 설정하세요.
 
 ```js
 {
-  target: '17', // Minimum supported React version
+  target: '17', // 지원하는 최소 React 버전
 }
 ```
 
-## Testing Strategy {/*testing-strategy*/}
+## 테스트 전략 {/*testing-strategy*/}
 
-Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
+호환성을 보장하기 위해 컴파일 유무에 관계없이 라이브러리를 테스트하세요. 컴파일된 코드에 대해 기존 테스트를 실행하고 컴파일러를 우회하는 별도의 테스트 설정도 만드세요. 이렇게 하면 컴파일 과정에서 발생할 수 있는 문제를 발견하고 모든 시나리오에서 라이브러리가 올바르게 작동하는지 확인할 수 있습니다.
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
+### 라이브러리가 이전 React 버전에서 작동하지 않는 경우 {/*library-doesnt-work-with-older-react-versions*/}
 
-If your compiled library throws errors in React 17 or 18:
+컴파일된 라이브러리가 React 17 또는 18에서 오류를 발생시키는 경우입니다.
 
-1. Verify you've installed `react-compiler-runtime` as a dependency
-2. Check that your `target` configuration matches your minimum supported React version
-3. Ensure the runtime package is included in your published bundle
+1. `react-compiler-runtime`이 의존성으로 설치되어 있는지 확인하세요.
+2. `target` 설정이 지원하는 최소 React 버전과 일치하는지 확인하세요.
+3. 런타임 패키지가 배포된 번들에 포함되어 있는지 확인하세요.
 
-### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
+### 다른 Babel 플러그인과의 컴파일 충돌 {/*compilation-conflicts-with-other-babel-plugins*/}
 
-Some Babel plugins may conflict with React Compiler:
+일부 Babel 플러그인은 React 컴파일러와 충돌할 수 있습니다.
 
-1. Place `babel-plugin-react-compiler` early in your plugin list
-2. Disable conflicting optimizations in other plugins
-3. Test your build output thoroughly
+1. `babel-plugin-react-compiler`를 플러그인 목록의 앞쪽에 배치하세요.
+2. 다른 플러그인에서 충돌하는 최적화를 비활성화하세요.
+3. 빌드 출력을 철저히 테스트하세요.
 
-### Runtime module not found {/*runtime-module-not-found*/}
+### 런타임 모듈을 찾을 수 없는 경우 {/*runtime-module-not-found*/}
 
-If users see "Cannot find module 'react-compiler-runtime'":
+사용자가 "Cannot find module 'react-compiler-runtime'" 오류를 보는 경우입니다.
 
-1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
-2. Check that your bundler includes the runtime in the output
-3. Verify the package is published to npm with your library
+1. 런타임이 `devDependencies`가 아닌 `dependencies`에 나열되어 있는지 확인하세요.
+2. 번들러가 출력에 런타임을 포함하는지 확인하세요.
+3. 패키지가 라이브러리와 함께 npm에 배포되었는지 확인하세요.
 
-## Next Steps {/*next-steps*/}
+## 다음 단계 {/*next-steps*/}
 
-- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
-- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
-- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
+- 컴파일된 코드를 위한 [디버깅 기법](/learn/react-compiler/debugging)에 대해 알아보세요.
+- 모든 컴파일러 옵션을 위한 [설정 옵션](/reference/react-compiler/configuration)을 확인하세요.
+- 선택적 최적화를 위한 [컴파일 모드](/reference/react-compiler/compilationMode)를 살펴보세요.