React10 Flask + PostgreSQL + React - 2 https://youtu.be/EAcD5ueqvHQ?si=tJ21_L9IAaKYkDID 저번 강의에서 간단하게나마 백엔드 구성이 끝났다. 플라스크와 SQLAlchemy, pgcopg2 를 활용하여 간단하게 이벤트 테이블의 모델을 만든 다음 CRUD를 구성했다. Frontend 구성하기 요즘 리액트 프로젝트는 vite 를 쓰는게 대세지만 예전 강의 특성상 cra을 쓰고 있다. 일단은 강의에 따라가기 위해 오랜만에 cra를 사용하고, axios 와 date-fns 를 다운 받아준다. date-fns 기존의 날짜/시간 관련 라이브러리는 day.js 만 알고 있었는데 해당 라이브러리를 새로이 알게 되었다. https://www.npmjs.com/package/date-fns date-fns Modern Java.. 2024. 3. 6. 리액트 Chart 라이브러리 자바스크립트 기반 차트 라이브러리 1. Chartjs Chart.js Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 2. C3.js C3.js | D3-based reusable chart library C3.js | D3-based reusable chart library Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 giv.. 2023. 8. 26. 리액트 테이블(표) 라이브러리 종류 1. react-base-table https://github.com/Autodesk/react-base-table GitHub - Autodesk/react-base-table: A react table component to display large datasets with high performance and flexibility A react table component to display large datasets with high performance and flexibility - GitHub - Autodesk/react-base-table: A react table component to display large datasets with high performance... github.c.. 2023. 8. 25. Custom Hooks 리액트 컴포넌트 설계에 대해 정리하다가 커스텀 훅에 대해 접하게 되었고, 로직과 UI를 분리하면 좋을 것 같아서 정리해본다. 비슷한 로직이 여러 컴포넌트에서 사용될 때 주로 사용 중복되는 로직을 유틸 함수와 같은 느낌으로 커스텀 훅을 만들어서 최소화시킬 수 있다. 커스텀 훅 만드는 법 중복되는 로직을 넣기 파일 이름을 useXXX 로 만든다(약속) // 예 useInput라는 input태그를 위한 state와 onChange 함수를 묶어줌 import { useState, useCallback } from "react"; export default (initialValue = null) => { // state 정의 const [data, setData] = useState(initialValue ); .. 2023. 7. 21. 이전 1 2 3 다음
