https://codepen.io/phillip-gimmi/pen/XWOdEMW React Smooth Section NavigatorAn interactive React application that provides seamless navigation between sections of content using the wheel or touch gestures. It employs GSAP's (Gr...codepen.io코드펜에서 발견한 섹션 전환 애니메이션을 프로젝트에 적용시켰다.gsap은 처음 사용하기 때문에 코드를 하나씩 살펴보고 프로젝트에 적용시키는 과정을 포스팅하고자 한다. gsap을 사용하려면 먼저 gsap을 설치해야 한다.npm install gsap import React, { useE..

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