목록전체 글 (98)
버글버글
파라미터 다른 페이지로 전송하기 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..
code-server에서 npm run build 입력 시, 허가가 거부 되었다는 오류가 뜨는 경우 1. 터미널에 명령어 입력 chmod +x node_modules/.bin/react-scripts 명령어를 입력하여 권한을 주면 된다. +x :실행 권한을 추가하는 것이다. 2. 그 다음에 build 하기 npm run build
새로운 포트 열고나서 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..
방화벽서비스 추가하기 1. PowerShell 열어서 로그인하기 ssh 계정명@서버주소 2. port 추가하기 firewall-cmd --permanent --zone=public --add-port=포트번호/tcp 3. reload 해주기 firewall-cmd --reload 4. 추가되었는지 확인하기 firewall-cmd --list-ports 방화벽 서비스 목록 확인 1. services 목록 보기 firewall-cmd --list-services 방화벽서비스 삭제하기 1. port 삭제하기 firewall-cmd --permanent --zone=public --remove-port=포트번호/tcp 2. reload 해주기 firewall-cmd --reload 3. 삭제되었는지 확인하기 f..