Merge branch 'main' into react-compiler-configuration

Author: gs0428

src/content/learn/add-react-to-an-existing-project.md

@@ -24,7 +24,7 @@ title: 기존 프로젝트에 React 추가하기
 2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로*<sup>*Base Path*</sup>로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!)
 3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 앱에서 처리되도록 하세요.
 
-This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
+이렇게 하면 앱의 React 부분이 해당 프레임워크에 [내장된 모범 사례](/learn/build-a-react-app-from-scratch#consider-using-a-framework)의 이점을 누릴 수 있습니다.
 
 많은 React 기반의 프레임워크는 풀스택이며 React 앱이 서버를 활용할 수 있도록 합니다. 그러나 서버에서 자바스크립트를 실행할 수 없거나 실행하고 싶지 않은 경우에도 동일한 접근방식을 사용할 수 있습니다. 이러한 경우에는 HTML/CSS/JS 내보내기(Next.js의 경우 [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby의 경우 기본값)를 `/some-app/`에서 대신 제공하세요.
 

src/content/learn/manipulating-the-dom-with-refs.md

@@ -211,7 +211,7 @@ li {
 
 이 문제를 해결하는 한 방법은 부모 요소에서 단일 ref를 얻고, [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)과 같은 DOM 조작 메서드를 사용하여 그 안에서 개별 자식 노드를 "찾는" 것입니다. 하지만 이는 다루기가 힘들며 DOM 구조가 바뀌는 경우 작동하지 않을 수 있습니다.
 
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+또 다른 해결책은 **`ref` 어트리뷰트에 함수를 전달하는 것입니다.** 이것을 [`ref` 콜백](/reference/react-dom/components/common#ref-callback)이라 부릅니다. React는 ref를 설정할 때 DOM 노드와 함께 ref 콜백을 호출하고, ref를 지울 때는 콜백에서 반환된 정리 함수를 호출합니다. 이를 통해 배열이나 [Map](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)을 직접 관리하고 인덱스나 특정 ID로 ref에 접근할 수 있습니다.
 
 아래 예시는 긴 목록에서 특정 노드에 스크롤 하기 위해 앞에서 말한 접근법을 사용합니다.
 

src/content/learn/referencing-values-with-refs.md

@@ -477,8 +477,6 @@ export default function Toggle() {
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-
 let timeoutID;
 
 function DebouncedButton({ onClick, children }) {

src/content/reference/react/cacheSignal.md

@@ -4,13 +4,13 @@ title: cacheSignal
 
 <RSC>
 
-`cacheSignal` is currently only used with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
+`cacheSignal`은 현재 [React 서버 컴포넌트](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)에서만 사용할 수 있습니다.
 
 </RSC>
 
 <Intro>
 
-`cacheSignal` allows you to know when the `cache()` lifetime is over.
+`cacheSignal`을 사용하면 `cache()` 수명이 언제 끝나는지 알 수 있습니다.
 
 ```js
 const signal = cacheSignal();
@@ -22,11 +22,11 @@ const signal = cacheSignal();
 
 ---
 
-## Reference {/*reference*/}
+## 레퍼런스 {/*reference*/}
 
 ### `cacheSignal` {/*cachesignal*/}
 
-Call `cacheSignal` to get an `AbortSignal`.
+`cacheSignal`을 호출하면 `AbortSignal`을 얻을 수 있습니다.
 
 ```js {3,7}
 import {cacheSignal} from 'react';
@@ -35,32 +35,32 @@ async function Component() {
 }
 ```
 
-When React has finished rendering, the `AbortSignal` will be aborted. This allows you to cancel any in-flight work that is no longer needed.
-Rendering is considered finished when:
-- React has successfully completed rendering
-- the render was aborted
-- the render has failed
+React가 렌더링을 완료하면 `AbortSignal`이 중단됩니다. 이를 통해 더 이상 필요하지 않은 진행 중인 작업을 취소할 수 있습니다.
+렌더링이 완료된 것으로 간주하는 경우는 다음과 같습니다.
+- React가 성공적으로 렌더링을 완료한 경우
+- 렌더링이 중단된 경우
+- 렌더링이 실패한 경우
 
-#### Parameters {/*parameters*/}
+#### 매개변수 {/*parameters*/}
 
-This function does not accept any parameters.
+이 함수는 매개변수를 받지 않습니다.
 
-#### Returns {/*returns*/}
+#### 반환값 {/*returns*/}
 
-`cacheSignal` returns an `AbortSignal` if called during rendering. Otherwise `cacheSignal()` returns `null`.
+`cacheSignal`은 렌더링 중에 호출되면 `AbortSignal`을 반환합니다. 그 외의 경우에 `cacheSignal()`은 `null`을 반환합니다.
 
-#### Caveats {/*caveats*/}
+#### 주의사항 {/*caveats*/}
 
-- `cacheSignal` is currently for use in [React Server Components](/reference/rsc/server-components) only. In Client Components, it will always return `null`. In the future it will also be used for Client Component when a client cache refreshes or invalidates. You should not assume it'll always be null on the client.
-- If called outside of rendering, `cacheSignal` will return `null` to make it clear that the current scope isn't cached forever.
+- `cacheSignal`은 현재 [React 서버 컴포넌트](/reference/rsc/server-components)에서만 사용할 수 있습니다. 클라이언트 컴포넌트에서는 항상 `null`을 반환합니다. 향후 클라이언트 캐시가 갱신되거나 무효화될 때 클라이언트 컴포넌트에서도 사용될 예정입니다. 클라이언트에서 항상 `null`을 반환한다고 가정하면 안 됩니다.
+- 렌더링 외부에서 호출하면 `cacheSignal`은 `null`을 반환하여 현재 스코프가 영원히 캐시되지 않음을 명확히 합니다.
 
 ---
 
-## Usage {/*usage*/}
+## 사용법 {/*usage*/}
 
-### Cancel in-flight requests {/*cancel-in-flight-requests*/}
+### 진행 중인 요청 취소하기 {/*cancel-in-flight-requests*/}
 
-Call <CodeStep step={1}>`cacheSignal`</CodeStep> to abort in-flight requests.
+<CodeStep step={1}>`cacheSignal`</CodeStep>을 호출하여 진행 중인 요청을 중단할 수 있습니다.
 
 ```js [[1, 4, "cacheSignal()"]]
 import {cache, cacheSignal} from 'react';
@@ -71,7 +71,7 @@ async function Component() {
 ```
 
 <Pitfall>
-You can't use `cacheSignal` to abort async work that was started outside of rendering e.g.
+아래의 예시처럼 렌더링 외부에서 시작된 비동기 작업을 `cacheSignal`로 중단할 수 없습니다.
 
 ```js
 import {cacheSignal} from 'react';
@@ -83,9 +83,9 @@ async function Component() {
 ```
 </Pitfall>
 
-### Ignore errors after React has finished rendering {/*ignore-errors-after-react-has-finished-rendering*/}
+### React가 렌더링을 완료한 후 오류 무시하기 {/*ignore-errors-after-react-has-finished-rendering*/}
 
-If a function throws, it may be due to cancellation (e.g. <CodeStep step={1}>the Database connection</CodeStep> has been closed). You can use the <CodeStep step={2}>`aborted` property</CodeStep> to check if the error was due to cancellation or a real error. You may want to <CodeStep step={3}>ignore errors</CodeStep> that were due to cancellation.
+함수가 오류를 던지는 경우 취소로 인한 것일 수 있습니다. (예를 들어, <CodeStep step={1}>데이터베이스 연결</CodeStep>이 닫힌 경우) <CodeStep step={2}>`aborted` 속성</CodeStep>을 사용하여 오류가 취소로 인한 것인지 실제 오류인지 확인할 수 있습니다. 취소로 인한 <CodeStep step={3}>오류는 무시할 수 있습니다</CodeStep>.
 
 ```js [[1, 2, "./database"], [2, 8, "cacheSignal()?.aborted"], [3, 12, "return null"]]
 import {cacheSignal} from "react";