티스토리

버글버글

검색하기

블로그 홈

버글버글

hyo-s.tistory.com/m

N 버글자수

구독자: 1

방명록 방문하기

주요 글 목록

[React] mui Table 사용하여 데이터 반복문 처리하기 Mui Table 사용하여 반복적인 data를 가지고 table로 생성하기 import "./styles.css";import React from "react";import { TableBody, TableContainer, TableHead, TableRow } from "@mui/material";import { TableCell } from "@material-ui/core";import { Table } from "@material-ui/core";import CheckIcon from "@mui/icons-material/Check";import PriorityHighIcon from "@mui/icons-material/PriorityHigh";import RemoveIcon from "@mu.. 공감수 0 댓글수 0 2024. 11. 27.
[React] mui-datatable를 사용하여 checkbox의 index 가져오기 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 = .. 공감수 0 댓글수 0 2023. 7. 28.
[React] Boot Strap 사용하기 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 .. 공감수 0 댓글수 0 2023. 7. 18.
[React] 다른페이지로 파라미터 전달하기 파라미터 다른 페이지로 전송하기 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-.. 공감수 0 댓글수 0 2023. 6. 7.
[React] windows 환경에서 react버전 다운그레이드하기 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. 변경할 노드 .. 공감수 0 댓글수 0 2023. 5. 26.
[React] Mui-DataGrid의 NoRow Overlay 모듈화하기 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('.. 공감수 0 댓글수 0 2023. 5. 25.
[React] axios로 pdf 다운로드 받기 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 생성.. 공감수 0 댓글수 0 2023. 5. 23.
[React] React에서 Font Awesome 사용하기 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.. 공감수 0 댓글수 0 2023. 5. 22.
[React] code-server에서 build한 프로젝트 nginx로 열기 새로운 포트 열고나서 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.. 공감수 0 댓글수 1 2023. 5. 12.
[React] mui DataGrid를 통한 API 호출 CRUD (4) Update 상품수정(Update) 1. selectedIds 상태 변수 선언하기 - id 선택을 위한 useState Hook 사용 const [selectedIds, setSelectedIds] = useState([]); 2. Datagrid가 수정될 때, 수정된 row를 저장해주는 props 선언 - editMode : 그리드에서 셀을 클릭하여 데이터를 편집할 때 어떤 모드로 작동할지를 설정. ('row' = 전체 행 편집 가능, 'cell' = 각 셀 편집 가능) - processRowUpdate : 행 데이터가 업데이트 되었을 때 호출되는 콜백 함수를 전달. 업데이트된 행 데이터를 처리하고, 상태(state)에 저장. - onProcessRowUpdateError : processRowUpdate 함수 실.. 공감수 0 댓글수 0 2023. 5. 8.
[React] mui DataGrid를 통한 API 호출 CRUD (3) Delete 상품삭제(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 배열.. 공감수 0 댓글수 0 2023. 4. 27.
[React] mui DataGrid를 통한 API 호출 CRUD (2) Create 상품등록(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. .. 공감수 0 댓글수 0 2023. 4. 26.
[React] mui DataGrid를 통한 API 호출 CRUD (1) Read 상품조회(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.. 공감수 0 댓글수 0 2023. 4. 25.
[React] 프로젝트 title / favicon(파비콘) 변경 프로젝트 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.. 공감수 0 댓글수 0 2023. 4. 19.
[React] 프로젝트 배포하기 1. 터미널에 다음 명령어를 친다. npm run build 2. 프로젝트에 build 폴더가 생기면 성공! 공감수 0 댓글수 0 2023. 4. 17.
[React] Cookie에 정보저장하기 Cookie란? - 클라이언트(웹 브라우저)에 저장되는 작은 데이터 조각이다. - 서버 > 웹 브라우저로 데이터를 보내면, 웹 브라우저는 해당 데이터를 로컬에 저장한다. - 그리고 다음에 같은 서버로부터 요청이 있을 때마다, 브라우저는 이전에 저장된 데이터를 서버로 보내주어 서버는 해당 정보를 활용하여 사용자에 맞는 웹페이지를 제공하게 된다. - 보안 문제로 브라우저에서는 쿠키에 접근하는 것이 제한되어 있으며, 쿠키에 저장된 데이터도 중요한 정보는 암호화되어 저장되어야 한다. - 웹 개발에서 쿠키는 사용자가 로그인을 했는지 여부, 사용자 설정 등을 저장하기 위해 사용된다. Cookie 어디에 저장되었는지 확인하기 1. [F12]로 개발자 도구를 연다. 2. [Application]을 클릭한다. 3. [C.. 공감수 0 댓글수 2 2023. 4. 13.
[React] localStorage에 token 저장하기 (feat.JWT) localStorage란? - 웹 브라우저에서 제공하는 웹 스토리지(Web Storage) 중 하나로, 키-값 쌍(key-value pairs)을 저장할 수 있는 클라이언트 사이드 저장소이다. - localStorage에 저장된 데이터는 브라우저를 닫아도 유지되며, 같은 도메인에서 실행되는 페이지들은 동일한 localStorage에 접근할 수 있다. - 주로 사용자의 기본 설정, 로그인 정보, 쇼핑 카트 등을 저장하는 데에 이용된다. localStorage 명령어 localStorage.setItem("key 이름", value) localStorage 추가하기 localStorage.getItem("key 이름") localStorage 값 가져오기 localStorage.removeItem("key .. 공감수 0 댓글수 0 2023. 4. 12.
[React] Proxy수동설정, axios(get, post) 1. VS code의 터미널에서 proxy-middleware 설치 npm install http-proxy-middleware 2.'setupProxy.js' 파일 생성 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/auth/register', // /auth/register을 사용 했을때, 아래 target으로 우회(?) createProxyMiddleware({ target: 'http://123.0.0.0:포트번호', // 사용할 주소 changeOrigin: true, }) ); }; - setupProxy는 설정하면 꼭 서버 재 시작을 해줘야.. 공감수 0 댓글수 0 2023. 4. 4.
[React] VS code에서 개발하기 ( + mui 사용하기) ■ node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ■ vscode 설치 https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimiz.. 공감수 0 댓글수 0 2023. 3. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.