목록분류 전체보기 (98)
버글버글
PuTTY 서버 설정을 하던 도중, conf파일을 수정하려고 하는데 아래와 같은 오류가 발생하였다. E325: ATTENTION (1) Another program may be editing the same file. If this is the case, be careful not to end up with two different instances of the same file when making changes. Quit, or continue with cauion. (2) An edit session for this file crashed. If this is the case, use ":recover" or "vim -r /etc/nginx/nginx.conf"to recover the chang..
상품수정(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..
PuTTY서버 설정하기 - 서버 설정은 conf폴더의 nginx.conf파일 수정하면 된다. 1. PuTTY에 로그인을 한 뒤, root계정으로 접속한다. * 아직 PuTTY설치 전이라면, 아래 게시글을 참고하면 된다. https://hyo-s.tistory.com/84 2. su 라는 명령어를 친다. su 3. 암호를입력한다. 4. 성공하면 아래처럼 계정앞에 root라고 뜬다. 5. 이제 PuTTY에 아래 명령어를 쳐서, 서버 conf 파일을 연다. vi /etc/nginx/nginx.conf 6. 아래에서 서버 수정을 하면된다. ※ 위상황에서 수정을 어떻게 하는지 모르는 사람도 있을텐데, (내가그랬음..) 그냥 아무키나 입력하면, 입력이 된다....! 메모장처럼 클릭으로 이동이 불가능하고, 키보드로 ..
프로젝트 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..
NginX란? - 웹 서버 소프트웨어 및 리버스 프록시 서버로 널리 사용되는 소프트웨어이다. - Apache와 함께 가장 많이 사용되는 웹 서버 중 하나이며, 높은 성능과 안정성, 확장성, 보안성을 제공함 - C 언어로 작성되어 있으며, 이벤트 기반 아키텍처로 설계되어 있어 매우 빠른 처리 속도와 높은 동시 접속 처리 능력을 가지고 있다. - 확장성이 높아 수많은 사용자들을 처리할 수 있다. - 다양한 운영 체제에서 실행할 수 있으며, HTTP, HTTPS, SMTP, POP3, IMAP 등의 프로토콜을 지원한다. - 리버스 프록시 기능을 제공하여 서버 부하 분산, 캐시, SSL 종료 등의 기능을 수행할 수 있다. NginX 설치하기 1. 아래링크를 들어가 NginX설치 http://nginx.org/e..