Skip to content

Commit 3b18f39

Browse files
lumirlumirlumirlumir
committed
docs: resolve conflicts
1 parent e4ded40 commit 3b18f39

12 files changed

+13
-1430
lines changed

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,9 @@ title: 기존 프로젝트에 React 추가하기
4444

4545
모듈 자바스크립트 환경은 모든 코드를 한 파일에 작성하는 것이 아닌, 각각의 React 컴포넌트를 개별 파일로 작성할 수 있게 합니다. 또한 (React 자체를 포함한) 다른 개발자들이 [npm](https://www.npmjs.com/) 레지스트리에 배포한 훌륭한 패키지들을 모두 사용할 수 있습니다. 이 작업을 수행하는 방법은 기존 설정에 따라 다릅니다.
4646

47-
<<<<<<< HEAD
4847
* **이미 애플리케이션이 `import` 문을 이용해 파일로 분리하고 있다면** 기존에 가지고 있는 설정을 이용해 보세요. JS 코드에서 `<div />`를 작성하면 문법 오류가 발생하는지 확인해 보세요. 문법 오류가 발생한다면 [Babel을 이용한 자바스크립트 코드 변환](https://babeljs.io/setup)이 필요할 수 있으며, JSX를 사용하려면 [Babel React 프리셋](https://babeljs.io/docs/babel-preset-react)을 활성화해야 할 수도 있습니다.
49-
=======
48+
5049
* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
51-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
5250

5351
* **애플리케이션이 자바스크립트 모듈을 컴파일하기 위한 기존 설정이 없다면,** [Vite](https://vitejs.dev/)를 이용하여 설정하세요. Vite 커뮤니티는 Rails, Django, Laravel을 포함한 [다양한 백엔드 프레임워크와의 통합](https://github.com/vitejs/awesome-vite#integrations-with-backends)을 지원하고 있습니다. 사용 중인 백엔드 프레임워크가 목록에 없다면 [가이드를 참고하여](https://vitejs.dev/guide/backend-integration.html) Vite 빌드를 백엔드와 수동으로 통합하세요.
5452

@@ -67,11 +65,7 @@ npm install react react-dom
6765
<html>
6866
<head><title>My app</title></head>
6967
<body>
70-
<<<<<<< HEAD
7168
<!-- 기존 페이지 컨텐츠 (이 예시에서는 이 부분이 대체됩니다)-->
72-
=======
73-
<!-- Your existing page content (in this example, it gets replaced) -->
74-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
7569
<div id="root"></div>
7670
</body>
7771
</html>
@@ -94,11 +88,9 @@ root.render(<h1>Hello, world</h1>);
9488

9589
<Note>
9690

97-
<<<<<<< HEAD
9891
처음으로 기존 프로젝트에 모듈 자바스크립트 환경을 통합하기는 다소 어려워 보일 수 있으나, 그만한 가치가 있는 일입니다! 어려움을 겪는 부분이 있다면 [커뮤니티 리소스](/community)나 [Vite 채팅](https://chat.vitejs.dev/)을 이용해 보세요.
99-
=======
92+
10093
Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/).
101-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
10294

10395
</Note>
10496

‎src/content/learn/installation.md‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ React는 처음부터 점진적으로 적용할 수 있도록 설계되었으며
88

99
</Intro>
1010

11-
<<<<<<< HEAD
1211
<YouWillLearn isChapter={true}>
1312

1413
* [새로운 React 프로젝트를 시작하는 방법](/learn/start-a-new-react-project)
@@ -19,9 +18,6 @@ React는 처음부터 점진적으로 적용할 수 있도록 설계되었으며
1918
</YouWillLearn>
2019

2120
## React 시도하기 {/*try-react*/}
22-
=======
23-
## Try React {/*try-react*/}
24-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
2521

2622
단순히 React를 사용해 보고 싶다면, 아무것도 설치할 필요 없습니다. 이 샌드박스를 통해 사용해 보세요!
2723

@@ -43,15 +39,14 @@ export default function App() {
4339

4440
React 문서의 대부분 페이지에는 이와 같은 샌드박스가 있습니다. React 문서 외에도 [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), [CodePen](https://codepen.io/pen?template=QWYVwWN) 등의 온라인 샌드박스에서 React를 지원합니다.
4541

46-
<<<<<<< HEAD
4742
### 로컬 환경에서 React 시도하기 {/*try-react-locally*/}
4843

4944
컴퓨터의 로컬 환경에서 React를 사용해 보고 싶다면, 이 [HTML 페이지를 다운로드](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html)하고 에디터와 브라우저에서 열어보세요!
5045

5146
## 새로운 React 프로젝트 시작하기 {/*start-a-new-react-project*/}
5247

5348
React로 완전히 앱이나 웹사이트를 구축하고 싶다면, [새로운 React 프로젝트를 시작](/learn/start-a-new-react-project)하세요.
54-
=======
49+
5550
To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
5651

5752
## Creating a React App {/*creating-a-react-app*/}
@@ -61,15 +56,10 @@ If you want to start a new React app, you can [create a React app](/learn/creati
6156
## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
6257

6358
If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
64-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
6559

6660
## 기존 프로젝트에 React 추가하기 {/*add-react-to-an-existing-project*/}
6761

68-
<<<<<<< HEAD
6962
기존 앱이나 웹사이트에 React를 적용하고 싶다면, [기존 프로젝트에 React를 추가](/learn/add-react-to-an-existing-project)하세요.
70-
=======
71-
If want to try using React in your existing app or a website, you can [add React to an existing project.](/learn/add-react-to-an-existing-project)
72-
7363

7464
<Note>
7565

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -649,21 +649,19 @@ DOM 요소를 직접 삭제한 뒤 `setState`를 사용하여 다시 DOM 노드
649649

650650
<Recap>
651651

652-
<<<<<<< HEAD
653652
- Ref는 범용적인 개념이지만 많은 경우 DOM 요소를 참조하기 위해 사용합니다.
654653
- `<div ref={myRef}>`로 React가 myRef.current에 DOM Node를 대입하도록 지시할 수 있습니다.
655654
- 많은 경우 ref는 포커싱, 스크롤링, DOM 요소 크기 혹은 위치 측정 등 비 파괴적인 행동을 위해 사용됩니다.
656655
- 컴포넌트는 기본적으로 DOM 노드를 노출하지 않습니다. `forwardRef`와 두 번째 `ref` 인자를 특정 노드에 전달하는 것으로 선택적으로 노출할 수 있습니다.
657656
- React가 관리하는 DOM 노드를 직접 바꾸려 하지 마세요.
658657
- React가 관리하는 DOM 노드를 수정하려 한다면, React가 변경할 이유가 없는 부분만 수정하세요.
659-
=======
658+
660659
- Refs are a generic concept, but most often you'll use them to hold DOM elements.
661660
- You instruct React to put a DOM node into `myRef.current` by passing `<div ref={myRef}>`.
662661
- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
663662
- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
664663
- Avoid changing DOM nodes managed by React.
665664
- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
666-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
667665

668666
</Recap>
669667

@@ -1061,11 +1059,9 @@ img {
10611059

10621060
<Hint>
10631061

1064-
<<<<<<< HEAD
10651062
`SearchInput`같은 컴포넌트에서 `forwardRef`를 사용해서 DOM 노드를 노출할 필요가 있습니다.
1066-
=======
1063+
10671064
You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
1068-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
10691065

10701066
</Hint>
10711067

‎src/content/learn/passing-data-deeply-with-context.md‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -476,11 +476,9 @@ export default function Section({ level, children }) {
476476
}
477477
```
478478

479-
<<<<<<< HEAD
480479
이것은 React에게 `Section` 내의 어떤 컴포넌트가 `LevelContext`를 요구하면 `level`을 주라고 알려줍니다. 컴포넌트는 그 위에 있는 UI 트리에서 가장 가까운 `<LevelContext.Provider>`의 값을 사용합니다.
481-
=======
480+
482481
This tells React: "if any component inside this `<Section>` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `<LevelContext>` in the UI tree above it.
483-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
484482

485483
<Sandpack>
486484

@@ -570,15 +568,13 @@ export const LevelContext = createContext(1);
570568

571569
기존 코드와 동일한 결과이지만 `level` prop을 각 `Heading` 컴포넌트에 전달할 필요는 없습니다! 대신 위의 가장 가까운 `Section`에게 제목 레벨을 "확인"합니다.
572570

573-
<<<<<<< HEAD
574571
1. `level` prop 을 `<Section>`에 전달합니다.
575572
2. `Section`은 자식을 `<LevelContext.Provider value={level}>`로 감싸줍니다.
576573
3. `Heading`은 `useContext(LevelContext)`를 사용해 가장 근처의 `LevelContext`의 값을 요청합니다.
577-
=======
574+
578575
1. You pass a `level` prop to the `<Section>`.
579576
2. `Section` wraps its children into `<LevelContext value={level}>`.
580577
3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
581-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
582578

583579
## 같은 컴포넌트에서 context를 사용하며 제공하기 {/*using-and-providing-context-from-the-same-component*/}
584580

@@ -874,7 +870,6 @@ Context는 정적인 값으로 제한되지 않습니다. 다음 렌더링 시
874870
875871
<Recap>
876872
877-
<<<<<<< HEAD
878873
- Context는 컴포넌트가 트리 상 아래에 위치한 모든 곳에 데이터를 제공하도록 합니다.
879874
- Context를 전달하려면 다음과 같습니다
880875
1. `export const MyContext = createContext(defaultValue)`로 context를 생성하고 내보내세요.
@@ -883,7 +878,7 @@ Context는 정적인 값으로 제한되지 않습니다. 다음 렌더링 시
883878
- Context는 중간의 어떤 컴포넌트도 지나갈 수 있습니다.
884879
- Context를 활용해 "주변에 적응하는" 컴포넌트를 작성할 수 있습니다.
885880
- Context를 사용하기 전에 props를 전달하거나 JSX를 `children`으로 전달하는 것을 먼저 시도해보세요.
886-
=======
881+
887882
* Context lets a component provide some information to the entire tree below it.
888883
* To pass context:
889884
1. Create and export it with `export const MyContext = createContext(defaultValue)`.
@@ -892,7 +887,6 @@ Context는 정적인 값으로 제한되지 않습니다. 다음 렌더링 시
892887
* Context passes through any components in the middle.
893888
* Context lets you write components that "adapt to their surroundings".
894889
* Before you use context, try passing props or passing JSX as `children`.
895-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
896890
897891
</Recap>
898892
@@ -1043,11 +1037,9 @@ li {
10431037
10441038
`imageSize` prop을 모든 컴포넌트에서 제거합니다.
10451039
1046-
<<<<<<< HEAD
10471040
`Context.js`에 `ImageSizeContext`를 생성하고 내보냅니다. 리스트를 `<ImageSizeContext.Provider value={imageSize}>`로 감싸 값을 아래로 전달하고 `useContext(ImageSizeContext)`로 `PlaceImage`에서 그것을 읽습니다.
1048-
=======
1041+
10491042
Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `<ImageSizeContext value={imageSize}>` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
1050-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
10511043
10521044
<Sandpack>
10531045

‎src/content/learn/render-and-commit.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,7 @@ export default function Image() {
8484

8585
재귀적 단계: 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 다음으로 _해당_ 컴포넌트를 렌더링하고 해당 컴포넌트도 컴포넌트를 반환하면 _반환된_ 컴포넌트를 다음에 렌더링하는 방식입니다. 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 이 단계는 계속됩니다.
8686

87-
<<<<<<< HEAD
8887
다음 예시에서 React는 `Gallery()`와 `Image()`를 여러 번 호출합니다.
89-
=======
90-
In the following example, React will call `Gallery()` and `Image()` several times:
91-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
9288

9389
<Sandpack>
9490

@@ -152,17 +148,15 @@ img { margin: 0 10px 10px 0; }
152148

153149
## 3단계: React가 DOM에 변경사항을 커밋 {/*step-3-react-commits-changes-to-the-dom*/}
154150

155-
<<<<<<< HEAD
156151
컴포넌트를 렌더링(호출)한 후 React는 DOM을 수정합니다.
157152

158153
* **초기 렌더링의 경우** React는 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시합니다.
159154
* **리렌더링의 경우** React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것!)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 합니다.
160-
=======
155+
161156
After rendering (calling) your components, React will modify the DOM.
162157

163158
* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
164159
* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
165-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
166160

167161
**React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경합니다.** 예를 들어 매초 부모로부터 전달된 다른 props로 다시 렌더링하는 컴포넌트가 있습니다. `<input>`에 텍스트를 입력하여 `value`를 업데이트 하지만 컴포넌트가 리렌더링될 때 텍스트가 사라지지 않습니다.
168162

‎src/content/learn/state-a-components-memory.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1450,11 +1450,9 @@ export default function FeedbackForm() {
14501450

14511451
#### 불필요한 state 제거하기 {/*remove-unnecessary-state*/}
14521452

1453-
<<<<<<< HEAD
14541453
이 예시에서 버튼이 클릭 되면 사용자의 이름을 요청하고 그런 다음 환영 메시지를 표시해야 합니다. 이름을 유지하기 위해 state를 사용하려고 했지만, 어떤 이유로 항상 "Hello, !"라고 표시됩니다.
1455-
=======
1454+
14561455
When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after.
1457-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
14581456

14591457
이 코드를 수정하려면 불필요한 state 변수를 제거하세요. ([왜 이것이 작동하지 않는지](/learn/state-as-a-snapshot)에 대해서는 나중에 설명하겠습니다.)
14601458

‎src/content/learn/tutorial-tic-tac-toe.md‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -300,11 +300,8 @@ export default function Square() {
300300
}
301301
```
302302

303-
<<<<<<< HEAD
304303
_브라우저_ 구역에 아래와 같이 X가 있는 사각형이 표시되어야 합니다.
305-
=======
306304
The _browser_ section should be displaying a square with an X in it like this:
307-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
308305

309306
![x가 채워진 사각형](../images/tutorial/x-filled-square.png)
310307

@@ -1333,11 +1330,7 @@ body {
13331330
1. `handleClick`은 인수 `0`을 사용하여 `squares` 배열의 첫 번째 엘리먼트를 `null`에서 `X`로 업데이트합니다.
13341331
1. `Board` 컴포넌트의 `squares` state가 업데이트되어 `Board`와 그 모든 자식이 다시 렌더링 됩니다. 이에 따라 인덱스가 `0`인 `Square` 컴포넌트의 `value` prop가 `null`에서 `X`로 변경됩니다.
13351332
1336-
<<<<<<< HEAD
13371333
최종적으로 사용자는 왼쪽 위 사각형을 클릭한 후 비어있는 사각형이 `X`로 변경된 것을 확인할 수 있습니다.
1338-
=======
1339-
In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
1340-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
13411334
13421335
<Note>
13431336
@@ -1418,11 +1411,8 @@ export default function Board() {
14181411
14191412
`O`가 `X`를 덮어씌웁니다! 이렇게 하면 게임이 좀 더 흥미로워질 수 있지만 지금은 원래의 규칙을 유지하겠습니다.
14201413
1421-
<<<<<<< HEAD
14221414
지금은 `X`와 `O`로 사각형을 표시할 때 먼저 해당 사각형에 이미 `X` 또는 `O`값이 있는지 확인하고 있지 않습니다. *일찍이 돌아와서* 이 문제를 해결하기 위해 사각형에 이미 `X`와 `O`가 있는지 확인하겠습니다. 사각형이 이미 채워져 있는 경우 보드의 state를 업데이트하기 전에 `handleClick` 함수에서 조기에 `return` 하겠습니다.
1423-
=======
14241415
When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
1425-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
14261416
14271417
```js {2,3,4}
14281418
function handleClick(i) {
@@ -1572,11 +1562,8 @@ function calculateWinner(squares) {
15721562
15731563
</Note>
15741564
1575-
<<<<<<< HEAD
15761565
`Board` 컴포넌트의 `handleClick` 함수에서 `calculateWinner(squares)`를 호출하여 플레이어가 이겼는지 확인하세요. 이 검사는 사용자가 이미 `X` 또는 `O`가 있는 사각형을 클릭했는지를 확인하는 것과 동시에 수행할 수 있습니다. 두 경우 모두 함수를 조기 반환하겠습니다.
1577-
=======
15781566
You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
1579-
>>>>>>> ab18d2f0f5151ab0c927a12eb0a64f8170762eff
15801567
15811568
```js {2}
15821569
function handleClick(i) {

0 commit comments

Comments
 (0)