New 병아리 개발자

*리엑트 연습(ox)

- 클릭 시 'X' 체크 및 색상 변경

// HTML
<!-- 리액트 16 버전, 개발에 특화된 버전, 불러오기 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 리액트 DOM 16 버전, 개발에 특화된 버전, 불러오기 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<h1>게임루트</h1>
<div id="game-root"></div>

// CSS
body,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 커스텀 */
#game-root {
  border: 10px solid black;
  padding: 10px;
}

#game-root > .game {
  border: 10px solid red;
  padding: 10px;
  display: flex;
  flex-direction: column; /* 게임 안의 자식요소들을 세로로 배열 */
}

#game-root > .game > .board {
  padding: 10px;
  border: 10px solid gold;
  display: flex;
  flex-direction: column;
}

#game-root > .game > .board > .square-list {
  display: flex;
  flex-wrap: wrap;
}

#game-root > .game > .board > .square-list > .square {
  border: 10px solid green;
  flex-basis: 33.3333%; /* flex item(flex 요소의 자식)은 축너비를 지정할 때 width, height 보다는, flex-basis를 쓰는게 좋다. */
  box-sizing: border-box; /* border가 축너비 안쪽에 생기게한다. */
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

#game-root > .game > .board > .square-list > .square.active {
  background-color: red;
}

// JS
class Square extends React.Component {
  // 생성자
  constructor(props) {
    super(props);

    /* 상태정보를 다루는 변수 */
    this.state = {
      value: null
    };
  }

  getClassName() {
    return "square" + (this.isMarked() ? " active" : "");
  }

  isMarked() {
    return this.state.value != null;
  }

  onClick() {
    const newValue = this.isMarked() ? null : "X";
    var id = this.props.id;
    this.props.onClick(id, newValue);
    this.setState({ value: newValue });
  }

  render() {
    return (
      <div onClick={() => this.onClick()} className={this.getClassName()}>
        {this.state.value}
      </div>
    );
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);
  }

  renderSquare(id) {
    return <Square key={id} id={id} onClick={this.props.onClickSqure}></Square>;
  }

  renderSquares() {
    const squares = [...Array(9).keys()].map((id) => {
      return this.renderSquare(id);
    });

    return squares;
  }

  render() {
    return (
      <div className="board">
        <h3>보드</h3>

        <div className="square-list">{this.renderSquares()}</div>
      </div>
    );
  }
}
class Game extends React.Component {
  constructor(props) {
    super(props);

    this.playerTurnNo = 1;
  }

  onClickSqure(id, value) {
    alert(value);
  }

  render() {
    return (
      <div className="game">
        <h2>게임</h2>
        <Board onClickSqure={this.onClickSqure} />
      </div>
    );
  }
}

ReactDOM.render(<Game />, document.getElementById("game-root"));

*리엑트 (React)

- React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리로, “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

- 싱글 페이지, 모바일 애플리케이션 개발 시 토대로 사용될 수 있으며, 복잡한 리엑트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리 사용이 요구된다.

*싱글 페이지 애플리케이션 (SPA : Single-Page Application)

- 서버로부터 완전한 새 페이지를 불러오지 않고, 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션, 웹 사이트를 의미한다.

- 연속되는 페이지 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 만들어 준다.

- 싱글 페이지 애플리케이션에서 HTML, 자바스크립트, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원을 동적으로 불러들여 필요한 경우 문서에 추가한다. 보통은 사용자의 동작에 응답하는 방식이다.

- 문서는 프로세스 중에 어떠한 지점에서도 다시 불러들이지 않으며 다른 문서로 제어권을 넘기지 않으나, 위치 해시, HTML5 히스토리 API를 사용하면 애플리케이션 내에 논리 문서의 인식 및 탐색을 제공할 수 있다.

# Figma 화면간 연결 방법 (작업물 간 연결)

• 우측에 prototype 클릭

• 연결을 희망하는 대상 더블클릭 후 중간에 원형을 마우스로클릭후 연결할 대상에 드래그 하면 연결된다.

• 연동 후 확인하는 방법은 우측 상단에 플레이 버튼을 클릭하여 확인할 수 있다.

*Figma 협업 방법 (팀간 공유 방법)

- 우측 상단에 share 클릭 후 공유할 대상의 이메일 주소를 입력

- share 클릭 후 대상의 이메일 주소, 권한 부여(view만 가능하게 할지, edit도 가능하게 할지)