abcdefghklpqrstuvwxyz

1. 게임 동작 기록하기게임 동작을 기록하기 위해 History 배열을 생성하고 squares 배열이 동작할 때마다 squares 배열을 history 배열에 저장한다.우선 최상위 컴포넌트에 history state를 추가하고, Board 컴포넌트의 sIsNext state와 winner 관련 코드들을 최상위 컴포넌트로 옮긴다.function App() {  const [history, setHistory] = useState([{ squares: Array(9).fill(null) }]);  const [xIsNext, setXIsNext] = useState(true);    const calculateWinner = (squares) => {    const lines = [      [0, 1, ..

1. React HooksHooks는 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 해주는 기능이다. 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 udeEffect 등의 기능을 제공한다. 지금 앱은 클래스형 컴포넌트로 작성했지만 Hooks를 사용하기 위해 함수형 컴포넌트로 바꾼다. 함수형에서는 render()없이 바로 리턴한다. Board.jsimport React, { Component } from 'react';import Square from './Square';import "./Board.css";const Board = () => {  constructor(props) {    super(pr..

1. 기본 설정택택톡 앱은 크게 게임판 부분과 게임 정보 부분으로 구성된다.App.jsfunction App() {  return (          div className="game">        div className="game-board">        div>        div className="game-info">        div>      div>      );}export default App; App.css.game{  display: flex;  flex-direction: row;}.game-info {  margin-left: 20px;} index.cssbody {  font: 14px "Century Gothic", Futura, sans-serif;  margin: ..

2024.06.12 - [Frontend/React] - [React] 리액트 프로젝트 생성(create-react-app) [React] 리액트 프로젝트 생성(create-react-app)editor: vs code 1. Node.js, npm 설치 2. create-react-appcreate-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.터미gamzaggang7.tistory.com 저번에 생성한 프로젝트에서 App.js 파일을 열어본다. 1. 번들러import logo from './logo.svg';import './App.css';상단에 특정 파일들을 불러오고 있다. 번들러 도구를 사용하면 impo..

editor: vs code 1. Node.js, npm 설치 2. create-react-appcreate-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.터미널에서 원하는 디렉터리로 이동 후 명령어를 입력한다. npx create-react-app npx는 노드 패키지 실행을 도와주는 도구 그럼 바탕화면에 프로젝트 폴더가 생성됨 3. 프로젝트 기본 구조public: 정적 파일을 저장하는 곳. public 내부의 파일만 public/index.html에서 사용할 수 있다.src: 리액트 컴포넌트와 애플리케이션 로직이 들어있는 곳. Webpack은 여기 있는 파일만 보기 때문에 이 폴더 외에 넣은 것은 Webpa..