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

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 을 만들..

애플리케이션 구조 개선현재 todoApp은 데이터를 입력했을 때 목록에 바로 반영되지 않으며, clear all 버튼을 눌렀을 때로 목록에 바로 반영되지 않는다. 4개의 컴포넌트로 분리했기 때문에 한 영역에서의 처리 결과를 다른 영역에서 감지하지 못하는 것이다. 그렇다고 하나의 컴포넌트 안에서 데이터 저장, 조회, 삭제를 모두 처리하는 것은 비효율적이다. TodoInput의 newTodoItem과 TodoList의 todoItems은 모두 '할 일' 이라는 같은 데이터 속성을 사용한다. 최상위 컴포넌트인 App 컴포넌트에서 '할 일' 데이터를 정의하고 하위 컴포넌트에 props로 전달한다면 위의 문제점들을 해결할 수 있다. App 컴포넌트에서 데이터 조화, 추가, 삭제를 하고 하위 컴포넌트들은 요청(이벤..

프로젝트 생성 및 초기 설정vue create [프로젝트명]으로 프로젝트 생성 awesome icon 사용 (index.html)link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 컴포넌트 생성할 일 관리 앱의 컴포넌트 구조는 헤더, 입력, 목록, 푸터로 구성된다. 컴포넌트 폴더에 To..

Vue의 template은 html, css 드으이 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성이다. template 속성 및 문법데이터 바인딩데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.1. 텍스트 보간법 - {{ }}template>  span>{{ msg }}span>template>script>export default {  data() {    return {      msg: 'Hello Vue'    }  }}script>이중 중괄호 태그 내 msg 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다.2. HTML 출력 - v-html이..

axios는 HTTP 요청을 보내기 위한 라이브러리로, Vue에서 비동기 통신을 쉽게 처리할 수 있다. axios APIaxios.get('url').then().catch(): 해당 url 주소에 대해 HTTP GET 요청을 보낸다. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 밥아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.axios.post('url').then().catch(): 해당 url 주소에 대해 HTTP POST 요청을 보낸다. then()고 catch()의 동작은 위와 같다.axios{( 옵션 속성 )}: HTTP 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있다. 데이터 요청을 보낼 URL, HTTP 요청 방식..