버글버글

상품수정(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 폴더가 생기면 성공!

Cookie란? - 클라이언트(웹 브라우저)에 저장되는 작은 데이터 조각이다. - 서버 > 웹 브라우저로 데이터를 보내면, 웹 브라우저는 해당 데이터를 로컬에 저장한다. - 그리고 다음에 같은 서버로부터 요청이 있을 때마다, 브라우저는 이전에 저장된 데이터를 서버로 보내주어 서버는 해당 정보를 활용하여 사용자에 맞는 웹페이지를 제공하게 된다. - 보안 문제로 브라우저에서는 쿠키에 접근하는 것이 제한되어 있으며, 쿠키에 저장된 데이터도 중요한 정보는 암호화되어 저장되어야 한다. - 웹 개발에서 쿠키는 사용자가 로그인을 했는지 여부, 사용자 설정 등을 저장하기 위해 사용된다. Cookie 어디에 저장되었는지 확인하기 1. [F12]로 개발자 도구를 연다. 2. [Application]을 클릭한다. 3. [C..

localStorage란? - 웹 브라우저에서 제공하는 웹 스토리지(Web Storage) 중 하나로, 키-값 쌍(key-value pairs)을 저장할 수 있는 클라이언트 사이드 저장소이다. - localStorage에 저장된 데이터는 브라우저를 닫아도 유지되며, 같은 도메인에서 실행되는 페이지들은 동일한 localStorage에 접근할 수 있다. - 주로 사용자의 기본 설정, 로그인 정보, 쇼핑 카트 등을 저장하는 데에 이용된다. localStorage 명령어 localStorage.setItem("key 이름", value) localStorage 추가하기 localStorage.getItem("key 이름") localStorage 값 가져오기 localStorage.removeItem("key ..