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, ..

난이도 - 골드 4문제0과 1로 구성된 이진수가 있다. 이 이진수에서 0을 10으로, 1을 01로 동시에 치환하면 길이가 두 배인 이진수를 얻을 수 있다. 이러한 이진수들을 차례로 나열하면 하나의 이진수 수열이 된다. 편의상 시작 수는 1이라고 하자. 처음 몇 개의 이진수들을 구해 보면,1 → 01 → 1001 → 01101001 → …이 된다.N이 주어졌을 때, N번째 이진수에서 연속된 0들의 그룹이 몇 개나 있는지 알아내는 프로그램을 작성하시오. N=4일 경우의 이진수는 01101001이고, 따라서 이 안에는 연속된 0들이 세 그룹 있게 된다.입력첫째 줄에 정수 N(1 ≤ N ≤ 1,000)이 주어진다.출력첫째 줄에 답을 출력한다.  2진수를 나열하고 0의 그룹 개수를 찾는 코드를 작성하면 메모리 초..

2진수를 8진수로 바꾸려면 2진수의 3비트씩 잘라내 해당 비트의 8진수값을 순서대로 붙이면 된다.3개씩 잘라내기 위해 2진수의 길이가 3의 배수가 아니면 모자른 길이만큼 2진수 앞에 0을 붙인다.11001100로 예를 들면11001100 => 011001100 => 011 / 001 / 100011 => 3001 => 1100 => 4=> 314import java.io.*;public class Main { public static void main(String[] args) throws Exception { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new Buff..

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..

2024.05.24 - [Canvas] - [Canvas] 보일러 플레이트 작성 (캔버스 클래스) [Canvas] 보일러 플레이트 작성 (캔버스 클래스)index.js  CanvasOption.jsexport default class canvasOption { constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.dpr = window.devicePixelRatio this.fps = 60 this.interval = 1000 / this.fps this.canvagamzaggang7.tistory.com 1. 파티클 생성js 폴더 내에 Particle.js 을 만들..