From e3983d81914242b1b3781fce0e10fb0afe184aa6 Mon Sep 17 00:00:00 2001 From: lumirbot Date: Sun, 1 Jun 2025 14:28:53 +0900 Subject: [PATCH 1/3] wip --- src/content/learn/tutorial-tic-tac-toe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 1acc01fa4..aaaa18dac 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -18,7 +18,7 @@ title: '자습서: 틱택토 게임' 자습서는 아래와 같이 몇 가지 부문으로 나뉩니다. - [자습서 환경설정](#setup-for-the-tutorial)은 자습서를 따를 수 있는 **시작점**을 제공합니다. -- [개요](#overview)에서는 React의 **핵심**(컴포넌트, props, state)을 배울 수 있습니다. +- [개요](#overview)에서는 React의 **핵심**(컴포넌트, Props, State)을 배울 수 있습니다. - [게임 완료하기](#completing-the-game)에서는 React 개발에서 **가장 흔히 쓰이는 기술**을 배울 수 있습니다. - [시간여행 추가하기](#adding-time-travel)에서는 React의 고유한 강점에 대해 **더 깊은 통찰력**을 얻을 수 있습니다. From ac5a01809106712efbad470a649dd6ea9b623cba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sun, 1 Jun 2025 23:37:44 +0900 Subject: [PATCH 2/3] docs: update `tutorial-tic-tac-toe` --- src/content/learn/tutorial-tic-tac-toe.md | 156 +++++++++++----------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index aaaa18dac..fb46293c7 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -207,7 +207,7 @@ body { ## 자습서 환경설정 {/*setup-for-the-tutorial*/} -아래의 실시간 코드 편집기에서 오른쪽 위의 **Fork** 버튼을 클릭하여 새 탭에서 CodeSandBox 편집기를 열어주세요. CodeSandBox를 사용하면 브라우저에서 코드를 작성할 수 있으며 사용자가 만든 앱이 어떻게 보이는지 즉시 확인할 수 있습니다. 새 탭에는 텅 빈 사각형과 이 자습서의 시작 코드가 표시되어야 합니다. +아래의 실시간 코드 편집기에서 오른쪽 위의 **포크Fork** 버튼을 클릭하여 새 탭에서 CodeSandBox 편집기를 열어주세요. CodeSandBox를 사용하면 브라우저에서 코드를 작성할 수 있으며 사용자가 만든 앱이 어떻게 보이는지 즉시 확인할 수 있습니다. 새 탭에는 텅 빈 사각형과 이 자습서의 시작 코드가 표시되어야 합니다. @@ -308,7 +308,7 @@ _브라우저_ 구역에 아래와 같이 X가 있는 사각형이 표시되어 #### `App.js` {/*appjs*/} -`App.js`의 코드는 _컴포넌트_ 를 생성합니다. React에서 컴포넌트는 사용자 인터페이스 일부를 표시하는 재사용 가능한 코드의 조각입니다. 컴포넌트는 애플리케이션의 UI 엘리먼트를 렌더링, 관리, 업데이트할 때 사용합니다. 컴포넌트를 한 줄씩 살펴보면서 무슨 일이 일어나는지 알아보겠습니다. +`App.js`의 코드는 컴포넌트를 생성합니다. React에서 컴포넌트는 사용자 인터페이스 일부를 표시하는 재사용 가능한 코드 조각입니다. 컴포넌트는 애플리케이션의 UI 엘리먼트를 렌더링, 관리, 업데이트할 때 사용합니다. 컴포넌트를 한 줄씩 살펴보면서 무슨 일이 일어나는지 알아보겠습니다. ```js {1} export default function Square() { @@ -316,7 +316,7 @@ export default function Square() { } ``` -첫 번째 줄은 `Square` 함수를 정의합니다. JavaScript의 `export` 키워드는 이 함수를 파일 외부에서 접근할 수 있도록 만들어 줍니다. `default` 키워드는 코드를 사용하는 다른 파일에서 이 함수가 파일의 주요 함수임을 알려줍니다. +첫 번째 줄은 `Square` 함수를 정의합니다. 자바스크립트의 `export` 키워드는 이 함수를 파일 외부에서 접근할 수 있도록 만들어 줍니다. `default` 키워드는 코드를 사용하는 다른 파일에서 이 함수가 파일의 주요 함수임을 알려줍니다. ```js {2} export default function Square() { @@ -324,10 +324,10 @@ export default function Square() { } ``` -두 번째 줄은 버튼을 반환합니다. JavaScript의 `return` 키워드는 해당 키워드 뒤에 오는 모든 것이 함수 호출자에게 값으로 반환됨을 의미합니다. ``은 JSX 엘리먼트를 닫아 버튼 내부에 다음 콘텐츠를 배치해서는 안 됨을 나타냅니다. +두 번째 줄은 버튼을 반환합니다. 자바스크립트의 `return` 키워드는 해당 키워드 뒤에 오는 모든 것이 함수 호출자에게 값으로 반환됨을 의미합니다. ``은 JSX 엘리먼트를 닫아 버튼 내부에 다음 콘텐츠를 배치해서는 안 됨을 나타냅니다. #### `styles.css` {/*stylescss*/} -CodeSandBox의 _파일_ 구역에서 `styles.css` 파일을 여세요. 이 파일은 React 앱의 스타일을 정의합니다. 처음 두 개의 _CSS 선택자_ 인 `*`와 `body`는 앱 대부분의 스타일을 정의하고, `.square` 선택자는 `className` 프로퍼티가 `square`로 설정된 모든 컴포넌트의 스타일을 정의합니다. 초기 코드에서는 `App.js` 파일의 Square 컴포넌트의 버튼과 매치됩니다. +CodeSandBox의 _파일_ 구역에서 `styles.css` 파일을 여세요. 이 파일은 React 앱의 스타일을 정의합니다. 처음 두 개의 CSS 선택자인 `*`와 `body`는 앱 대부분의 스타일을 정의하고, `.square` 선택자는 `className` 프로퍼티가 `square`로 설정된 모든 컴포넌트의 스타일을 정의합니다. 초기 코드에서는 `App.js` 파일의 `Square` 컴포넌트의 버튼과 매치됩니다. #### `index.js` {/*indexjs*/} @@ -370,7 +370,7 @@ export default function Square() { -React 컴포넌트는 두 개의 버튼처럼 인접한 여러 개의 JSX 엘리먼트가 아닌 단일 JSX 엘리먼트를 반환해야 합니다. 이 오류는 *Fragments*(`<>` 와 ``)를 사용하여 다음과 같이 여러 개의 인접한 JSX 엘리먼트를 감싸 해결할 수 있습니다. +React 컴포넌트는 두 개의 버튼처럼 인접한 여러 개의 JSX 엘리먼트가 아닌 단일 JSX 엘리먼트를 반환해야 합니다. 이 오류는 *Fragment*(`<>` 와 ``)를 사용하여 다음과 같이 여러 개의 인접한 JSX 엘리먼트를 감싸 해결할 수 있습니다. ```js {3-6} export default function Square() { @@ -419,7 +419,7 @@ export default function Square() { } ``` -`styles.css` 에 정의된 CSS는 `board-row`라는 `className`으로 지정된 div를 스타일 합니다. 이제 스타일된 div를 사용하여 컴포넌트를 행으로 그룹화하여 틱택토 보드를 완성하겠습니다. +`styles.css` 에 정의된 CSS는 `board-row`라는 `className`으로 지정된 `div`를 스타일 합니다. 이제 스타일된 `div`를 사용하여 컴포넌트를 행으로 그룹화하여 틱택토 보드를 완성하겠습니다. ![1부터 9까지의 숫자가 채워진 틱택토 보드](../images/tutorial/number-filled-board.png) @@ -512,7 +512,7 @@ body { -### props를 통해 데이터 전달하기 {/*passing-data-through-props*/} +### Props를 통해 데이터 전달하기 {/*passing-data-through-props*/} 다음으로 사용자가 사각형을 클릭할 때 사각형의 값을 비어있는 상태에서 "X"로 변경해야 합니다. 조금 전 보드를 만들었던 방법으로는 사각형을 변경하는 코드를 9번 (각 사각형당 한번) 복사해서 붙여 넣어야 합니다! 복사-붙여넣기 대신 React의 컴포넌트 아키텍처를 사용하면 재사용할 수 있는 컴포넌트를 만들어서 지저분하고 중복된 코드를 피할 수 있습니다. @@ -528,7 +528,7 @@ export default function Board() { } ``` -다음으로, Board 컴포넌트를 JSX 문법을 사용하여 해당 `Square` 컴포넌트를 렌더링하도록 수정하세요. +다음으로, `Board` 컴포넌트를 JSX 문법을 사용하여 해당 `Square` 컴포넌트를 렌더링하도록 수정하세요. ```js {5-19} // ... @@ -561,9 +561,9 @@ export default function Board() { ![1로 채워진 보드](../images/tutorial/board-filled-with-ones.png) -이런! 이전에 가지고 있던 번호가 채워진 사각형이 사라졌습니다. 이제 각 사각형은 "1"로 표시됩니다. 이 문제를 해결하기 위해 *props*를 사용하여 각 사각형이 가져야 할 값을 부모 컴포넌트(`Board`)에서 자식 컴포넌트(`Square`)로 전달하겠습니다. +이런! 이전에 가지고 있던 번호가 채워진 사각형이 사라졌습니다. 이제 각 사각형은 "1"로 표시됩니다. 이 문제를 해결하기 위해 *Props*를 사용하여 각 사각형이 가져야 할 값을 부모 컴포넌트(`Board`)에서 자식 컴포넌트(`Square`)로 전달하겠습니다. -`Square` 컴포넌트를 `Board`에서 전달할 prop `value`를 읽도록 수정하세요. +`Square` 컴포넌트를 `Board`에서 전달할 Prop `value`를 읽도록 수정하세요. ```js {1} function Square({ value }) { @@ -571,7 +571,7 @@ function Square({ value }) { } ``` -`function Square({ value })`는 사각형 컴포넌트에 `value` prop를 전달할 수 있음을 나타냅니다. +`function Square({ value })`는 사각형 컴포넌트에 `value` Prop를 전달할 수 있음을 나타냅니다. 이제 모든 사각형에 `1` 대신 `value`를 표시하겠습니다. 아래와 같이 해보세요. @@ -585,7 +585,7 @@ function Square({ value }) { ![value로 채워진 보드](../images/tutorial/board-filled-with-value.png) -컴포넌트에서 단어 "value"가 아닌 JavaScript 변수 `value`가 렌더링 되어야 합니다. JSX에서 "JavaScript로 탈출"하려면, 중괄호가 필요합니다. JSX에서 `value` 주위에 중괄호를 다음과 같이 추가하세요. +컴포넌트에서 단어 "value"가 아닌 자바스크립트 변수 `value`가 렌더링 되어야 합니다. JSX에서 "자바스크립트로 탈출"하려면, 중괄호가 필요합니다. JSX에서 `value` 주위에 중괄호를 다음과 같이 추가하세요. ```js {2} function Square({ value }) { @@ -597,7 +597,7 @@ function Square({ value }) { ![비어있는 보드](../images/tutorial/empty-board.png) -보드가 비어있는 이유는 `Board` 컴포넌트가 렌더링하는 각 `Square` 컴포넌트에 아직 `value` prop를 전달하지 않았기 때문입니다. 이 문제를 해결하기 위해 `Board` 컴포넌트가 렌더링하는 각 `Square` 컴포넌트에 `value` prop를 추가하겠습니다. +보드가 비어있는 이유는 `Board` 컴포넌트가 렌더링하는 각 `Square` 컴포넌트에 아직 `value` Prop를 전달하지 않았기 때문입니다. 이 문제를 해결하기 위해 `Board` 컴포넌트가 렌더링하는 각 `Square` 컴포넌트에 `value` Prop를 추가하겠습니다. ```js {5-7,10-12,15-17} export default function Board() { @@ -708,7 +708,7 @@ body { ### 사용자와 상호작용하는 컴포넌트 만들기 {/*making-an-interactive-component*/} -이제 `Square` 컴포넌트를 클릭하면 `X`로 채워보겠습니다. `Square` 내부에 `handleClick` 함수를 선언하세요. 그런 다음 `Square` 컴포넌트에서 반환된 JSX 버튼의 props에 `onClick`을 추가하세요. +이제 `Square` 컴포넌트를 클릭하면 `X`로 채워보겠습니다. `Square` 내부에 `handleClick` 함수를 선언하세요. 그런 다음 `Square` 컴포넌트에서 반환된 JSX 버튼의 Props에 `onClick`을 추가하세요. ```js {2-4,9} function Square({ value }) { @@ -735,11 +735,11 @@ function Square({ value }) { -다음으로 사각형 컴포넌트가 클릭 된 것을 "기억"하고 "X" 표시로 채워보겠습니다. 컴포넌트는 무언가 "기억"하기 위해 *state*를 사용합니다. +다음으로 사각형 컴포넌트가 클릭된 것을 "기억"하고 "X" 표시로 채워보겠습니다. 컴포넌트는 무언가 "기억"하기 위해 *State*를 사용합니다. -React는 컴포넌트에서 호출하여 무언가를 "기억"할 수 있는 `useState`라는 특별한 함수를 제공합니다. `Square`의 현재 값을 state에 저장하고 `Square`가 클릭 되면 값을 변경해 보도록 하겠습니다. +React는 컴포넌트에서 호출하여 무언가를 "기억"할 수 있는 `useState`라는 특별한 함수를 제공합니다. `Square`의 현재 값을 State에 저장하고 `Square`를 클릭하면 값을 변경하도록 하겠습니다. -파일 상단에서 `useState`를 불러오세요. `Square` 컴포넌트에서 value prop을 제거하는 대신, `Square` 컴포넌트의 시작 부분에 `useState`를 호출하는 새 줄을 추가하고 `value`라는 이름의 state 변수를 반환하도록 하세요. +파일 상단에서 `useState`를 불러오세요. `Square` 컴포넌트에서 `value` Prop을 제거하는 대신, `Square` 컴포넌트의 시작 부분에 `useState`를 호출하는 새 줄을 추가하고 `value`라는 이름의 State 변수를 반환하도록 하세요. ```js {1,3,4} import { useState } from 'react'; @@ -751,9 +751,9 @@ function Square() { //... ``` -`value`는 값을 저장하고 `setValue`는 값을 변경하는 데 사용하는 함수입니다. `useState`에 전달된 `null`은 이 state 변수의 초깃값으로 사용되므로 현재 `value`는 `null`과 같습니다. +`value`는 값을 저장하고 `setValue`는 값을 변경하는 데 사용하는 함수입니다. `useState`에 전달된 `null`은 이 State 변수의 초깃값으로 사용되므로 현재 `value`는 `null`과 같습니다. -`Square` 컴포넌트는 더 이상 props를 허용하지 않으므로 보드 컴포넌트가 생성한 9개의 사각형 컴포넌트에서 `value` prop를 제거하세요. +`Square` 컴포넌트는 더 이상 Props를 허용하지 않으므로 `Board` 컴포넌트가 생성한 9개의 사각형 컴포넌트에서 `value` Prop를 제거하세요. ```js {6-8,11-13,16-18} // ... @@ -780,7 +780,7 @@ export default function Board() { } ``` -이제 `Square`가 클릭 되었을 때 "X"를 표시하도록 변경하겠습니다. `console.log("clicked!");` 이벤트 핸들러를 `setValue('X');`로 변경하세요. 이제 `Square` 컴포넌트는 다음과 같습니다. +이제 `Square`를 클릭하였을 때 "X"를 표시하도록 변경하겠습니다. `console.log("clicked!");` 이벤트 핸들러를 `setValue('X');`로 변경하세요. 이제 `Square` 컴포넌트는 다음과 같습니다. ```js {5} function Square() { @@ -801,11 +801,11 @@ function Square() { } ``` -`onClick` 핸들러에서 `set` 함수를 호출함으로써 React에 `