[번역] Tutorial: Overview 2

Inspecting the Starter Code

시작 코드 관찰하기

 

If you’re going to work on the tutorial in your browser, open this code in a new tab: Starter Code. If you’re going to work on the tutorial locally, instead open src/index.js in your project folder (you have already touched this file during the setup).

만일 너가 너의 브라우저에서 튜토리얼을 작업한다면 새 탭에서 이 코드를 열어라. 만일 너가 로컬에서 튜토리얼 작업을 한다면 너의 프로젝트 폴더 안에 src/index.js를 열어라.(이미 setup단계에서 이 파일을 다뤘다.)

 

This Starter Code is the base of what we’re building. We’ve provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game.

By inspecting the code, you’ll notice that we have three React components:

• Square
• Board
• Game

이 시작 코드는 우리가 만들 것의 기반이다. 우리는 css 스타일링을 제공한다. 너가 오직 리액트를 배우고 틱택토 게임을 프로그래밍 하는데에만 집중하도록 하기 위함이다. 그 코드를 관찰하면서, 너는 세 개의 리액트 컴포넌트를 알게 된다.

네모, 판, 게임 ( 컴포넌트 )

 

The Square component renders a single <button> and the Board renders 9 squares. The Game component renders a board with placeholder values which we’ll modify later. There are currently no interactive components.

Square 컴포넌트는 하나의 버튼 태그를 렌더한다. Board는 9개의 square들을 렌더한다. 게임 컴포넌트는 board를 렌더한다. 우리가 후에 수정할 곳을 표시한 곳과 함께. 현재 컴포넌트들 간의 상호작용은 없다.