docs: update react-compiler-installation.md (#1415)

<!--
  PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다!

  기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요.
-->

closes #1414 

# installation.md 파일 수정

<!--
  어떤 종류의 PR인지 상세 내용을 작성해주세요.
-->

React 컴파일러의 Installation 부분을 번역하였습니다.

## 필수 확인 사항

- [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>

Author: jaem0629

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

@@ -1,70 +1,70 @@
 ---
-title: Installation
+title: 설치
 ---
 
 <Intro>
-This guide will help you install and configure React Compiler in your React application.
+이 가이드에서는 React 애플리케이션에 React 컴파일러를 설치하고 설정하는 방법을 알아봅니다.
 </Intro>
 
 <YouWillLearn>
 
-* How to install React Compiler
-* Basic configuration for different build tools
-* How to verify your setup is working
+* React 컴파일러 설치 방법
+* 다양한 빌드 도구를 위한 기본 설정
+* 설정이 올바르게 작동하는지 확인하는 방법
 
 </YouWillLearn>
 
-## Prerequisites {/*prerequisites*/}
+## 필수 조건 {/*prerequisites*/}
 
-React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
+React 컴파일러는 React 19에서 가장 잘 작동하도록 설계되었지만, React 17과 18도 지원합니다. [React 버전 호환성](/reference/react-compiler/target)에서 자세히 알아보세요.
 
-## Installation {/*installation*/}
+## 설치 {/*installation*/}
 
-Install React Compiler as a `devDependency`:
+React 컴파일러를 `devDependency`로 설치합니다.
 
 <TerminalBlock>
 npm install -D babel-plugin-react-compiler@latest
 </TerminalBlock>
 
-Or with Yarn:
+또는 Yarn을 사용하는 경우
 
 <TerminalBlock>
 yarn add -D babel-plugin-react-compiler@latest
 </TerminalBlock>
 
-Or with pnpm:
+또는 pnpm을 사용하는 경우
 
 <TerminalBlock>
 pnpm install -D babel-plugin-react-compiler@latest
 </TerminalBlock>
 
-## Basic Setup {/*basic-setup*/}
+## 기본 설정 {/*basic-setup*/}
 
-React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration).
+React 컴파일러는 기본적으로 별도의 설정 없이 작동하도록 설계되었습니다. 하지만 특수한 상황에서 설정이 필요한 경우(예를 들어 React 19 미만 버전을 타깃으로 하는 경우) [컴파일러 옵션 레퍼런스](/reference/react-compiler/configuration)를 참고하세요.
 
-The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
+설정 과정은 빌드 도구에 따라 다릅니다. React 컴파일러는 빌드 파이프라인과 통합되는 Babel 플러그인을 포함하고 있습니다.
 
 <Pitfall>
-React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.
+React 컴파일러는 Babel 플러그인 파이프라인에서 **가장 먼저** 실행되어야 합니다. 컴파일러는 적절한 분석을 위해 원본 소스 정보가 필요하므로, 다른 변환보다 먼저 코드를 처리해야 합니다.
 </Pitfall>
 
 ### Babel {/*babel*/}
 
-Create or update your `babel.config.js`:
+`babel.config.js`를 생성하거나 업데이트합니다.
 
 ```js {3}
 module.exports = {
   plugins: [
-    'babel-plugin-react-compiler', // must run first!
-    // ... other plugins
+    'babel-plugin-react-compiler', // 가장 먼저 실행되어야 합니다!
+    // ... 다른 플러그인
   ],
-  // ... other config
+  // ... 다른 설정
 };
 ```
 
 ### Vite {/*vite*/}
 
-If you use Vite, you can add the plugin to vite-plugin-react:
+Vite를 사용하는 경우 `vite-plugin-react`에 플러그인을 추가할 수 있습니다.
 
 ```js {3,9}
 // vite.config.js
@@ -82,7 +82,7 @@ export default defineConfig({
 });
 ```
 
-Alternatively, if you prefer a separate Babel plugin for Vite:
+또는 Vite용 별도의 Babel 플러그인을 선호하는 경우
 
 <TerminalBlock>
 npm install -D vite-plugin-babel
@@ -108,10 +108,10 @@ export default defineConfig({
 
 ### Next.js {/*usage-with-nextjs*/}
 
-Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
+자세한 내용은 [Next.js 문서](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler)를 참고하세요.
 
 ### React Router {/*usage-with-react-router*/}
-Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+`vite-plugin-babel`을 설치하고, 컴파일러의 Babel 플러그인을 추가합니다.
 
 <TerminalBlock>
 {`npm install vite-plugin-babel`}
@@ -131,7 +131,7 @@ export default defineConfig({
     babel({
       filter: /\.[jt]sx?$/,
       babelConfig: {
-        presets: ["@babel/preset-typescript"], // if you use TypeScript
+        presets: ["@babel/preset-typescript"], // TypeScript를 사용하는 경우
         plugins: [
           ["babel-plugin-react-compiler", ReactCompilerConfig],
         ],
@@ -143,63 +143,63 @@ export default defineConfig({
 
 ### Webpack {/*usage-with-webpack*/}
 
-A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+커뮤니티에서 제공하는 webpack loader는 [여기에서 확인할 수 있습니다](https://github.com/SukkaW/react-compiler-webpack).
 
 ### Expo {/*usage-with-expo*/}
 
-Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
+Expo 앱에서 React 컴파일러를 활성화하고 사용하는 방법은 [Expo 문서](https://docs.expo.dev/guides/react-compiler/)를 참고하세요.
 
 ### Metro (React Native) {/*usage-with-react-native-metro*/}
 
-React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions.
+React Native는 Metro를 통해 Babel을 사용하므로, 설치 방법은 [Babel 사용법](#babel) 섹션을 참고하세요.
 
 ### Rspack {/*usage-with-rspack*/}
 
-Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+Rspack 앱에서 React 컴파일러를 활성화하고 사용하는 방법은 [Rspack 문서](https://rspack.dev/guide/tech/react#react-compiler)를 참고하세요.
 
 ### Rsbuild {/*usage-with-rsbuild*/}
 
-Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+Rsbuild 앱에서 React 컴파일러를 활성화하고 사용하는 방법은 [Rsbuild 문서](https://rsbuild.dev/guide/framework/react#react-compiler)를 참고하세요.
 
 
-## ESLint Integration {/*eslint-integration*/}
+## ESLint 연동 {/*eslint-integration*/}
 
-React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+React 컴파일러는 최적화할 수 없는 코드를 식별하는 데 도움이 되는 ESLint 규칙을 포함합니다. ESLint 규칙이 오류를 보고하면 컴파일러가 해당 특정 컴포넌트나 Hook의 최적화를 건너뜁니다. 이는 안전합니다. 컴파일러는 코드베이스의 다른 부분을 계속 최적화합니다. 모든 위반 사항을 즉시 수정할 필요는 없습니다. 원하는 속도로 해결하면서 최적화되는 컴포넌트의 수를 점진적으로 늘려가세요.
 
-Install the ESLint plugin:
+ESLint 플러그인을 설치합니다.
 
 <TerminalBlock>
 npm install -D eslint-plugin-react-hooks@latest
 </TerminalBlock>
 
-If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset.
+`eslint-plugin-react-hooks`를 아직 설정하지 않았다면 [readme의 설치 지침](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)을 따르세요. 컴파일러 규칙은 `recommended-latest` 프리셋에서 사용할 수 있습니다.
 
-The ESLint rule will:
-- Identify violations of the [Rules of React](/reference/rules)
-- Show which components can't be optimized
-- Provide helpful error messages for fixing issues
+ESLint 규칙은 다음과 같은 역할을 합니다.
+- [React 규칙](/reference/rules) 위반 식별
+- 최적화할 수 없는 컴포넌트 표시
+- 문제 해결에 도움이 되는 오류 메시지 제공
 
-## Verify Your Setup {/*verify-your-setup*/}
+## 설정 확인 {/*verify-your-setup*/}
 
-After installation, verify that React Compiler is working correctly.
+설치 후 React 컴파일러가 올바르게 작동하는지 확인합니다.
 
-### Check React DevTools {/*check-react-devtools*/}
+### React DevTools 확인 {/*check-react-devtools*/}
 
-Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
+React 컴파일러에 의해 최적화된 컴포넌트는 React DevTools에서 "Memo ✨" 배지가 표시됩니다.
 
-1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension
-2. Open your app in development mode
-3. Open React DevTools
-4. Look for the ✨ emoji next to component names
+1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다
+2. 개발 모드에서 앱을 엽니다
+3. React DevTools를 엽니다
+4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다
 
-If the compiler is working:
-- Components will show a "Memo ✨" badge in React DevTools
-- Expensive calculations will be automatically memoized
-- No manual `useMemo` is required
+컴파일러가 작동하는 경우
+- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다
+- 비용이 큰 계산이 자동으로 메모이제이션됩니다
+- 수동으로 `useMemo`를 사용할 필요가 없습니다
 
-### Check Build Output {/*check-build-output*/}
+### 빌드 출력 확인 {/*check-build-output*/}
 
-You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.
+빌드 출력을 확인하여 컴파일러가 실행되고 있는지 확인할 수도 있습니다. 컴파일된 코드에는 컴파일러가 자동으로 추가하는 자동 메모이제이션 로직이 포함됩니다.
 
 ```js
 import { c as _c } from "react/compiler-runtime";
@@ -217,29 +217,29 @@ export default function MyApp() {
 
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### Opting out specific components {/*opting-out-specific-components*/}
+### 특정 컴포넌트 제외하기 {/*opting-out-specific-components*/}
 
-If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
+컴파일 후 특정 컴포넌트에서 문제가 발생하면 `"use no memo"` 지시어를 사용하여 일시적으로 해당 컴포넌트를 제외할 수 있습니다.
 
 ```js
 function ProblematicComponent() {
   "use no memo";
-  // Component code here
+  // 컴포넌트 코드
 }
 ```
 
-This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
+이렇게 하면 컴파일러에게 이 특정 컴포넌트의 최적화를 건너뛰도록 지시합니다. 근본적인 문제를 해결한 후 지시어를 제거해야 합니다.
 
-For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
+더 많은 문제 해결 도움말은 [디버깅 가이드](/learn/react-compiler/debugging)를 참고하세요.
 
-## Next Steps {/*next-steps*/}
+## 다음 단계 {/*next-steps*/}
 
-Now that you have React Compiler installed, learn more about:
+React 컴파일러를 설치했으니, 다음 내용을 자세히 알아보세요.
 
-- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
-- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
-- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
-- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
-- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
+- React 17과 18을 위한 [React 버전 호환성](/reference/react-compiler/target)
+- 컴파일러를 사용자 정의하기 위한 [설정 옵션](/reference/react-compiler/configuration)
+- 기존 코드베이스를 위한 [점진적 도입 전략](/learn/react-compiler/incremental-adoption)
+- 문제 해결을 위한 [디버깅 기법](/learn/react-compiler/debugging)
+- React 라이브러리 컴파일을 위한 [라이브러리 컴파일 가이드](/reference/react-compiler/compiling-libraries)