docs: resolve conflicts

Author: lumirlumir

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

@@ -318,31 +318,6 @@ li {
   key={cat.id}
   ref={node => {
     const map = getMap();
-<<<<<<< HEAD
-    if (node) {
-      // Map에 노드를 추가합니다
-      map.set(cat, node);
-    } else {
-      // Map에서 노드를 제거합니다
-      map.delete(cat);
-    }
-  }}
->
-```
-
-위 방법으로 이후 Map에서 개별적인 DOM 노드를 읽을 수 있습니다.
-
-<Canary>
-
-This example shows another approach for managing the Map with a `ref` callback cleanup function.
-
-```js
-<li
-  key={cat.id}
-  ref={node => {
-    const map = getMap();
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
     // Add to the Map
     map.set(cat, node);
 
@@ -368,11 +343,10 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu
 
 ## 다른 컴포넌트의 DOM 노드 접근하기 {/*accessing-another-components-dom-nodes*/}
 
-<<<<<<< HEAD
 `<input />`같은 브라우저 요소를 출력하는 내장 컴포넌트에 ref를 주입할 때 React는 ref의 `current` 프로퍼티를 그에 해당하는 (브라우저의 실제 `<input />` 같은) DOM 노드로 설정합니다.
 
 하지만 `<MyInput />` 같이 **직접 만든** 컴포넌트에 ref를 주입할 때는 `null`이 기본적으로 주어집니다. 여기 앞서 말한 내용을 설명하는 예시가 있습니다. 버튼을 클릭할 때 input 요소에 포커스 **되지 않는 것을** 주목하세요.
-=======
+
 <Pitfall>
 Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
 </Pitfall>
@@ -395,7 +369,6 @@ function MyForm() {
 In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
 
 The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 
 <Sandpack>
 
@@ -426,88 +399,18 @@ export default function MyForm() {
 
 </Sandpack>
 
-<<<<<<< HEAD
-문제를 인지할 수 있도록, React는 콘솔에 오류 메시지를 출력합니다.
-
-<ConsoleBlock level="error">
-
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
-
-</ConsoleBlock>
-
-React는 기본적으로 다른 컴포넌트의 DOM 노드에 접근하는 것을 허용하지 않습니다. 컴포넌트의 자식도 예외는 아닙니다! 이것은 의도적인 설계입니다. Ref는 자제해서 사용해야 하는 탈출구입니다. 직접 다른 컴포넌트의 DOM 노드를 조작하는 것은 코드가 쉽게 깨지게 만듭니다.
-
-대신 특정 컴포넌트에서 소유한 DOM 노드를 선택적으로 노출할 수 있습니다. 컴포넌트는 자식 중 하나에 ref를 "전달"하도록 지정할 수 있습니다. 여기 `MyInput`이 어떻게 `forwardRef` API를 사용할 수 있는지 살펴보세요.
-
-```js
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-```
-
-작동하는 원리는 다음과 같습니다.
-
-1. `<MyInput ref={inputRef} />`으로 React가 대응되는 DOM 노드를 `inputRef.current`에 대입하도록 설정합니다. 하지만 이것은 전적으로 `MyInput` 컴포넌트의 선택에 달려 있습니다, 기본적으로는 이렇게 동작하지 않습니다.
-2. `MyInput` 컴포넌트는 `forwardRef`를 통해 선언되었습니다. 이것은 `props` 다음에 선언된 **두 번째 `ref` 인수를 통해 상위의 `inputRef`를 받을 수 있도록 합니다.**
-3. `MyInput`은 자체적으로 수신받은 `ref`를 컴포넌트 내부의 `<input>`으로 전달합니다.
-
-이제 버튼을 클릭하면 input 요소로 포커스가 잘 이동합니다.
-
-<Sandpack>
-
-```js
-import { forwardRef, useRef } from 'react';
-
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-
-export default function Form() {
-  const inputRef = useRef(null);
-
-  function handleClick() {
-    inputRef.current.focus();
-  }
-
-  return (
-    <>
-      <MyInput ref={inputRef} />
-      <button onClick={handleClick}>
-        Focus the input
-      </button>
-    </>
-  );
-}
-```
-
-</Sandpack>
-
-이 패턴은 디자인 시스템에서 버튼, 입력 요소 등의 저수준 컴포넌트에서 DOM 노드를 전달하기 위해 매우 흔하게 사용됩니다. 반면 폼, 목록 혹은 페이지 섹션 등의 고수준 컴포넌트에서는 의도하지 않은 DOM 구조 의존성 문제를 피하고자 일반적으로 DOM 노드를 노출하지 않습니다.
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <DeepDive>
 
 #### 명령형 처리방식으로 하위 API 노출하기 {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-<<<<<<< HEAD
 위 예시에서 `MyInput` 컴포넌트는 DOM 입력 요소를 그대로 노출했습니다. 그리고 부모 컴포넌트에서 DOM 노드의 `focus()`를 호출할 수 있게 되었습니다. 하지만 이에 따라 부모 컴포넌트에서 DOM 노드의 CSS 스타일을 직접 변경하는 등의 예상치 못 한 작업을 할 수 있습니다. 몇몇 상황에서는 노출된 기능을 제한하고 싶을 수 있는데, 이 때  `useImperativeHandle`을 사용합니다.
-=======
-In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+
+In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle): {/*TODO*/}
 
 <Sandpack>
 
 ```js
-<<<<<<< HEAD
-import {
-  forwardRef,
-  useRef,
-  useImperativeHandle
-} from 'react';
-=======
 import { useRef, useImperativeHandle } from "react";
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 
 function MyInput({ ref }) {
   const realInputRef = useRef(null);
@@ -538,11 +441,9 @@ export default function Form() {
 
 </Sandpack>
 
-<<<<<<< HEAD
-여기 `MyInput` 내부의 `realInputRef`는 실제 input DOM 노드를 가지고 있습니다. 하지만 `useImperativeHandle`을 사용하여 React가 ref를 참조하는 부모 컴포넌트에 직접 구성한 객체를 전달하도록 지시합니다. 따라서 `Form` 컴포넌트 안쪽의 `inputRef.current`는 `foucs` 메서드만 가지고 있습니다. 이 경우 ref는 DOM 노드가 아니라 `useImperativeHandle` 호출에서 직접 구성한 객체가 됩니다.
-=======
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+여기 `MyInput` 내부의 `realInputRef`는 실제 input DOM 노드를 가지고 있습니다. 하지만 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하여 React가 ref를 참조하는 부모 컴포넌트에 직접 구성한 객체를 전달하도록 지시합니다. 따라서 `Form` 컴포넌트 안쪽의 `inputRef.current`는 `foucs` 메서드만 가지고 있습니다. 이 경우 ref는 DOM 노드가 아니라 [`useImperativeHandle`](/reference/react/useImperativeHandle) 호출에서 직접 구성한 객체가 됩니다.
+
+Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call. {/*TODO*/}
 
 </DeepDive>
 

src/content/learn/react-developer-tools.md

@@ -52,33 +52,10 @@ react-devtools
 
 ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
 
-<<<<<<< HEAD
-## 모바일 (React Native) {/*mobile-react-native*/}
-React Developer Tools는 [React Native](https://reactnative.dev/)로 만들어진 앱에서도 잘 동작합니다.
-
-React Developer Tools를 사용하는 가장 쉬운 방법은 전역적으로 설치하는 것입니다.
-```bash
-# Yarn
-yarn global add react-devtools
-=======
 ## Mobile (React Native) {/*mobile-react-native*/}
 
 To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 
 [Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
 
-<<<<<<< HEAD
-다음으로 터미널에서 개발자 도구를 여십시오.
-```bash
-react-devtools
-```
-
-실행 중인 로컬 React Native 앱에 연결해야 합니다.
-
-> 개발자 도구가 몇 초 후에 연결되지 않으면 앱을 다시 로드해 보십시오.
-
-[React Native 디버깅에 대하여 더 알아보기](https://reactnative.dev/docs/debugging)
-=======
 > For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc

src/content/reference/react-dom/components/link.md

@@ -2,15 +2,6 @@
 link: "<link>"
 ---
 
-<<<<<<< HEAD
-<Canary>
-
-React의 `<link>` 확장은 현재 React의 카나리(Canary) 채널과 실험 채널에서만 사용할 수 있습니다. React의 안정적인 릴리즈에서는 `<link>`가 [내장 브라우저 HTML 컴포넌트](https://react.dev/reference/react-dom/components#all-html-components)로만 작동합니다. 자세한 내용은 [React 릴리즈 채널](/community/versioning-policy#all-release-channels)에서 확인할 수 있습니다.
-
-</Canary>
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <Intro>
 
 [브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
@@ -160,13 +151,9 @@ export default function SiteMapPage() {
 
 ### 스타일시트 우선순위 제어하기 {/*controlling-stylesheet-precedence*/}
 
-<<<<<<< HEAD
-스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 두 개의 컴포넌트가 스타일시트를 렌더링하며, 더 높은 우선순위를 가진 스타일시트는 해당 컴포넌트를 더 먼저 렌더링하더라도 문서에서 나중에 배치됩니다.
+스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 더 높은 우선순위를 가진 스타일시트는 해당 컴포넌트를 더 먼저 렌더링하더라도 문서에서 나중에 배치됩니다.
 
-{/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
-=======
-Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. 
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. {/*TODO*/}
 
 <SandpackWithHTMLOutput>
 
@@ -200,13 +187,9 @@ function ThirdComponent() {
 
 </SandpackWithHTMLOutput>
 
-<<<<<<< HEAD
-### 중복으로 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
-=======
 Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
 
-### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/}
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+### 중복으로 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
 
 여러 컴포넌트에서 동일한 스타일시트를 렌더링하면 React는 문서의 head에 단일 `<link>`만 배치합니다.
 

src/content/reference/react-dom/components/meta.md

@@ -2,16 +2,6 @@
 meta: "<meta>"
 ---
 
-<<<<<<< HEAD
-<Canary>
-
-React의 `<meta>` 확장은 현재 React의 카나리(Canary) 버전 및 실험 채널에서만 사용할 수 있습니다. React의 안정적인 릴리즈에서는 `<meta>`가 [내장 브라우저 HTML 컴포넌트](/reference/react-dom/components#all-html-components)로만 작동합니다. 여기에서 [React의 릴리즈 채널](/community/versioning-policy#all-release-channels)에 대해 자세히 알아보십시오.
-
-</Canary>
-
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <Intro>
 
 [내장 브라우저 `<meta>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta)를 사용하면 문서에 메타데이터를 추가할 수 있습니다.

src/content/reference/react-dom/components/script.md

@@ -2,15 +2,6 @@
 script: "<script>"
 ---
 
-<<<<<<< HEAD
-<Canary>
-
-React의 `<script>` 확장은 현재 React의 카나리(Canary) 버전 및 실험 채널에서만 사용할 수 있습니다. React의 안정적인 릴리즈에서는 `<script>`가 [내장 브라우저 HTML 컴포넌트](https://react.dev/reference/react-dom/components#all-html-components)로만 작동합니다. 여기에서 [React의 릴리즈 채널](/community/versioning-policy#all-release-channels)에 대해 자세히 알아보십시오.
-
-</Canary>
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <Intro>
 
 [내장 브라우저 `<script>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)를 사용하면 문서에 스크립트를 추가할 수 있습니다.

src/content/reference/react-dom/components/style.md

@@ -2,15 +2,6 @@
 style: "<style>"
 ---
 
-<<<<<<< HEAD
-<Canary>
-
-React의 `<title>` 확장은 현재 React의 카나리(Canary) 버전 및 실험 채널에서만 사용할 수 있습니다. React의 안정적인 릴리즈에서는 `<title>`이 [내장 브라우저 HTML 컴포넌트](/reference/react-dom/components#all-html-components)로만 작동합니다. 여기에서 [React 릴리즈 채널](/community/versioning-policy#all-release-channels)에 대해 자세히 알아보십시오.
-
-</Canary>
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <Intro>
 
 [내장된 브라우저 `<style>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/style)를 사용하면 문서에 인라인 CSS 스타일시트를 추가할 수 있습니다.
@@ -72,15 +63,13 @@ React는 `<style>` 컴포넌트를 문서의 `<head>`로 이동시키고, 동일
 
 컴포넌트가 올바르게 표시되기 위해 특정 CSS 스타일에 의존하는 경우, 컴포넌트 내에서 인라인 스타일시트를 렌더링할 수 있습니다.
 
-<<<<<<< HEAD
 `href`와 `precedence` 속성을 제공하면 스타일시트가 로딩되는 동안 컴포넌트가 일시 중지됩니다. (인라인 스타일시트의 경우에도 스타일시트가 참조하는 폰트와 이미지로 인해 로딩 시간이 발생할 수 있습니다.) `href` 속성은 스타일시트를 고유하게 식별해야 하며, 이를 통해 React는 동일한 href를 가진 스타일시트의 중복을 제거할 수 있습니다.
-=======
+
 The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
 If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
 
 Inline stylesheets will not trigger Suspense boundaries while they're loading.
-Even if they load async resources like fonts or images.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+Even if they load async resources like fonts or images. {/*TODO*/}
 
 <SandpackWithHTMLOutput>
 

src/content/reference/react-dom/components/title.md

@@ -2,16 +2,6 @@
 title: "<title>"
 ---
 
-<<<<<<< HEAD
-<Canary>
-
-React의 `<title>` 확장은 현재 React의 카나리(Canary) 버전 및 실험 채널에서만 사용할 수 있습니다. React의 안정적인 릴리즈에서는 `<title>`이 [내장 브라우저 HTML 컴포넌트](https://react.dev/reference/react-dom/components#all-html-components)로만 작동합니다. 여기에서 [React 릴리즈 채널](/community/versioning-policy#all-release-channels)에 대해 자세히 알아보십시오.
-
-</Canary>
-
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <Intro>
 
 [내장된 브라우저 `<title>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)를 사용하면 문서의 제목을 지정할 수 있습니다.

src/content/reference/react-dom/hooks/index.md

@@ -12,17 +12,7 @@ title: "Built-in React DOM Hooks"
 
 ## 폼 Hooks {/*form-hooks*/}
 
-<<<<<<< HEAD
-<Canary>
-
-폼 Hook은 현재 React의 Canary 채널과 실험적인 채널에서만 사용할 수 있습니다. 자세한 내용은 [React 릴리즈 채널](/community/versioning-policy#all-release-channels)에서 확인할 수 있습니다.
-
-</Canary>
-
 *폼*은 정보 제출을 위한 상호 작용형 제어를 만들 수 있도록 해줍니다. 컴포넌트에 있는 폼을 관리하기 위해 다음과 같은 훅 중 하나를 사용할 수 있습니다.
-=======
-*Forms* let you create interactive controls for submitting information.  To manage forms in your components, use one of these Hooks:
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 
 * [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 폼의 상태에 따라 UI를 업데이트할 수 있게 해줍니다.