프론트엔드 2

리액트 차트 라이브러리 react-chartjs-2 Line Chart 설치, 여러 줄 (데이터 여러개) 라인차트 구현하기, data prop 작성법

오늘은 리액트 차트 라이브러리인 chartjs 를 사용해보겠습니다.! 사실 한 두번 정도 제 기준 꽤나 복잡한 걸 적용시켜보았는데찾을 때마다 정보가 많이 없어서 힘들었어요 ㅠㅠ 그리고 또 쓸 일이 있어서 코드 작성하려니까 정말 기억이 리셋되어서.... 기록해보려고 합니다!!!  https://www.chartjs.org/docs/latest/getting-started/installation.html Installation | Chart.jsInstallation npm (opens new window) (opens new window) CDN CDNJS (opens new window) Chart.js built files are available on CDNJS (opens new window): h..

React 2024.09.05

리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 1편

안녕하세요 희새입니다!일이 있어서 (?) 리액트로 틱택토 게임을 구현해야 하는데, 헷갈려서 정리하고자 + 지피티에게 물어본 것들을 더 잘 이해하기 위해서 글을 씁니다 :) 제가 구현하고자 하는 틱택토 게임은 기존 리액트 공식문서 틱택토 게임에서 1. 컴퓨터와 대결2. 승, 패에 따른 점수 기록3. 게임 리셋 기능이 추가 된 틱택토를 구현하려고 한다. 이 기능을 위해 내가 해야하는 것을 정리해보자면 (한 칸을 square 라고 했을 때) square 클릭함수,컴퓨터가 수 놓는 함수,승패 구별 함수,게임 리셋 함수,score 업데이트 이렇게 인 것 같다. 게임 보드판, 현재 차례, 점수를 상태로 관리해 줄 것이다.현재 차례는 사용자가 O, 컴퓨터가 X square 클릭 함수인 handleClick 함수이다...

React 2024.05.07