버글버글

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

1. Font Awesome의 공식 React 패키지인 아래 두개를 설치 npm install @fortawesome/react-fontawesome@npm:@fortawesome/react-fontawesome@latest npm install @fortawesome/fontawesome-svg-core@npm:@fortawesome/fontawesome-svg-core@latest 2. 필요한 아이콘 패키지 설치 (아래 코드는 전체 아이콘 설치) npm install @fortawesome/free-solid-svg-icons@npm:@fortawesome/free-solid-svg-icons@latest ex) React 컴포넌트에서 Font Awesome 사용해보기 import React from..

새로운 포트 열고나서 nginx의 code-server에 업로드한 react프로젝트를 컴파일(build) 하면, nginx서버에서 자동으로 컴파일된 파일을 찾아서 열어주게 Nginx서버를 설정하는 방법 1. 새로운 포트 열어주기 - 자세한 사항은 아래 글 참고해서 포트를 열어주면 된다. https://hyo-s.tistory.com/92 [Linux] CentOS 7 방화벽 포트 열기/닫기 방화벽서비스 추가하기 1. PowerShell 열어서 로그인하기 ssh 계정명@서버주소 2. port 추가하기 firewall-cmd --permanent --zone=public --add-port=포트번호/tcp 3. reload 해주기 firewall-cmd --reload 4. 추가되었는지 확 hyo-s.tis..