프로젝트 진행하면서 협의과정에서 워드클라우드를 폐기하기로 정하였다. 메인페이지의 바 그래프도 폐기할지 생각중.... 추가적으로 메인페이지에서 카드뉴스를 출력하기위해서 캐러셀 사용을 하려고한다. npm install react-items-carousel https://github.com/kareemaly/react-items-carousel?ref=morioh.com&utm_source=morioh.com GitHub - kareemaly/react-items-carousel: Items Carousel Built with react-motion and styled-components Items Carousel Built with react-motion and styled-components - GitHu..

도넛차트를 써야해서 해당 라이브러리를 찾아서 세팅 import React from 'react'; import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; import { Doughnut } from 'react-chartjs-2'; ChartJS.register(ArcElement, Tooltip, Legend); export const data = { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [ { label: 'Value', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, ..

프론트엔드로 프로젝트를 진행하면서 사용하거나 일어난 일들을 작성할 예정 5인 프로젝트를 진행하게 되었다. 사용 기술스택으로는 Front : React Back : Spring boot Gradle DB : MongoDB, MySQL API : FastAPI 이렇게 구성하였다. Front-end에서는 React + js 기반으로 작성을 진행 할 예정이다 사용하는것 Vite / React / JavaScript React 라이브러리 react-router-dom / axios / styled-components / d3 / d3-cloud 라이브러리는 추후 필요에따라 추가삭제 할 예정 styled-components 를 사용하여 현재 페이지가 Home일 때 Home버튼의 css 속성이 바뀌게 작성하려고 진행..

React 개발환경에서 워드클라우드를 사용할 필요성이 있어서 사용하게 되었다. d3를 사용하기 이전에 react-wordcloud를 사용하려고 했는데 해당 라이브러리는 Note that react-wordcloud requires react^16.13.0 as a peer dependency. react 18버전을 지원하지 않았다... 그래서 사용하게된 d3 라이브러리 $ npm install d3 $ npm install d3-cloud d3, 클라우드를 설치해준다. https://github.com/jasondavies/d3-cloud/blob/master/examples/browserify.js d3-cloud의 깃허브에있는 소스코드를 베이스로 사용하였다. .rotate(function() { re..

이전에는 class로 작성하였는데 함수 컴포넌트로 작성하기 const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9)); const [value, setValue] = React.useState(''); const [result, setResult] = React.useState(''); const [sum, setSum] = React.useState(0); const inputRef = React.useRef(null); 함수 컴포넌트 안에서 ref와 useState를 사용할 수 있게 해준게 react h..

React는 js와 html css로 변환해서 출력해주는 형태 데이터 중심으로 움직인다. 위의 두개 스크립트는 개발용 아래의 두개 스크립트는 배포용 React18버전 'use strict'; class LikeButton extends React.Component { constructor(props) { super(props); this.state = {liked: fales}; } render() { if (this.stat.liked){ return 'You liked this.'; } return React.createElement('button', {onClick: () => this.setState({liked: true})}, 'Like'); } }; // ErrorBoundary const ..