버글버글

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

상품수정(Update) 1. selectedIds 상태 변수 선언하기 - id 선택을 위한 useState Hook 사용 const [selectedIds, setSelectedIds] = useState([]); 2. Datagrid가 수정될 때, 수정된 row를 저장해주는 props 선언 - editMode : 그리드에서 셀을 클릭하여 데이터를 편집할 때 어떤 모드로 작동할지를 설정. ('row' = 전체 행 편집 가능, 'cell' = 각 셀 편집 가능) - processRowUpdate : 행 데이터가 업데이트 되었을 때 호출되는 콜백 함수를 전달. 업데이트된 행 데이터를 처리하고, 상태(state)에 저장. - onProcessRowUpdateError : processRowUpdate 함수 실..

상품삭제(Delete) 1. selectedIds 상태 변수 선언하기 - id 선택을 위한 useState Hook 사용 const [selectedIds, setSelectedIds] = useState([]); 2. 삭제를 위한 Button - 버튼 클릭시 실행되는 handleDelete 함수 삭제 3. Button handleDelete 함수 (1) 선택된 항목을 삭제하는 함수정의 (2) selectedIds의 길이(length)가 0이면 아무것도 선택된게 없음 > alert창을 띄우고 종료 (3) 해당 항목들의 id 값을 selectedIds 배열에서 추출하여 data 배열에 저장한다. (4) axios.post() 함수를 사용해 서버에 HTTP POST 요청을 보낸다. (5) 이때 data 배열..

상품등록(Create) 1. 상품명. 카테고리등 입력을 위한 TextField import import TextField from '@mui/material/TextField'; 2. useState Hook을 이용한 state 변수 선언하기 - 이 변수들은 각각의 input element와 바인딩 되어 있으며, - 사용자가 input element에 값을 입력하면 해당 state 변수의 값을 변경하게 된다. const [itemCd, setItemCd] = useState(''); const [itemNm, setItemNm] = useState(''); const [catCd, setCatCd] = useState(''); const [catNm, setCatNm] = useState(''); 3. ..

상품조회(Read) 1. useState Hook 사용을 위한 import 하기 import React, { useState } from 'react'; 2. rows 상태 변수 선언하기 - 초기값으로 빈 배열을 할당하고, DataGrid에서 사용할 데이터를 담아두는 용도로 사용. - setRows : rows 상태를 업데이트하는 함수 const [rows, setRows] = useState([]); 3. mui의 DataGrid 컴포넌트에서 사용 될 column 선언 - field : 열이 표시할 데이터의 필드 이름 - headerName : 열의 제목 - width : 열의 너비 지정 // crud.js const columns = [ { field: 'id', headerName: '순번', wi..

프로젝트 title 변경 1. 프로젝트 디렉토리 안에 [public] - [index.html]을 들어간다. 2. 태그 안의 내용을 수정해주면 된다. 프로젝트 favicon변경 1. 아이콘 생성 또는 다운로드 (1) 아이콘 다운로드 - 아래 링크에서 아이콘을 'ICO'를 선택하여 다운 받는다. https://icon-icons.com/ko/ 무료 아이콘 SVG, PNG, ICO 또는 ICNS icon-icons.com (2) 아이콘 만들기 아래 사이트로 들어가서 내가 가진 사진으로도 .ico를 만들 수 있다. https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF t..

1. 터미널에 다음 명령어를 친다. npm run build 2. 프로젝트에 build 폴더가 생기면 성공!