버글버글

Mui Table 사용하여 반복적인 data를 가지고 table로 생성하기 import "./styles.css";import React from "react";import { TableBody, TableContainer, TableHead, TableRow } from "@mui/material";import { TableCell } from "@material-ui/core";import { Table } from "@material-ui/core";import CheckIcon from "@mui/icons-material/Check";import PriorityHighIcon from "@mui/icons-material/PriorityHigh";import RemoveIcon from "@mu..

index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import App from './pages/App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( {/**/} {/**/} ); 부분을 주석해주면 1번만 호출하게 된다. React.StrictMode는 React 개발 모드에서 사용되는 컴포넌트로,애플리케이션에서 잠재적인 문제를 미리 감지하고 안전한 코드를 작성하도록 도움. 실제 운영 모드에서는 동작하지 않고, 개발 중에만 작동.

mui-datatable 사용하기 1. mui datatable 설치 - 터미널에 npm install mui-datatables 입력 npm install mui-datatables 2. 자신의 프로젝트에 import 해주기 import MUIDataTable from "mui-datatables"; 3. colums 정의해주기 const columns = [ { name: "id", label: "번호", options: { sort: true }}, { name: "title", label: "제목", options: { sort: true }}, { name: "writer", label: "작성자", options: { sort: true }} ] 4. list 넣어주기 const list = ..

1. react-bootstrap 설치하기 - 터미널에 npm install react-bootstap 입력 npm install react-bootstrap 2. import 해주기 - src - index.js에 import 하기 import 'bootstrap/dist/css/bootstrap.min.css'; 3. 사용할 Components import 해서 사용하기 - example import Card from 'react-bootstrap/Card'; - example 전체코드 import React from 'react'; import Card from 'react-bootstrap/Card'; const Home =() =>{ return ( Card Title Card Subtitle ..

파라미터 다른 페이지로 전송하기 navigate('이동하려는 URL', { state: { key: 'value' }}) } 1. 'react-router-dom'을 import 하기. import {useNavigate} from 'react-router-dom'; 2. navigate 선언하기. const navigate = useNavigate(); 3. onClick함수를 포함한 button 생성하기. 클릭 4. click to move 함수 정의하기. const clickToMove = () => { navigate('이동하려는 URL', { state: { key1: 'value1', key2: 'value2', }}) } 다른페이지에서 보낸 파라미터 전달 받기 1. 'react-router-..

1. 아래 주소에서 nvm-setup.zip 다운 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 2. 알집을 풀고 nvm-setup.exe를 실행시켜준다. 3. 기존에 설치되었던 nodejs가 삭제되고 다시 설치된다. (기존 nodejs경로 꼭 확인) 4. 이제 명령프롬프트를 관리자 권한으로 연다. (윈도우키 > cmd 입력) 5. 현재 nojs 버전을 확인해본다. node -v 6. 변경할 노드 ..

1. mui datagrid의 no-row-overlay를 모듈화하기 https://mui.com/x/react-data-grid/components/#no-rows-overlay Data Grid - Components - MUI X The grid is highly customizable. Override components using the slots prop. mui.com 2. NoRows.js라는 이름으로 component 생성 import * as React from 'react'; import Box from '@mui/material/Box'; import { styled } from '@mui/material/styles'; const StyledGridOverlay = styled('..

1. axios 설치를 한다. npm install axios 2. pdf 다운로드 할 button을 생성해준다. 다운로드 3. event handler 추가 다운로드 4. handler 정의하기 const downloadPdf = () => { axios({ url: 'PDF URL', // 다운로드할 PDF 파일의 URL method: 'GET', responseType: 'blob', // 응답 데이터는 Blob 형식 }) .then(response => { const downloadUrl = window.URL.createObjectURL(new Blob([response.data])); // 서버에서 받은 응답 데이터를 Blob 객체로 감싸고, 그 객체를 사용하여 다운로드할 수 있는 URL 생성..