본문 바로가기
반응형

개발/React175

리액트 Material - Alert로 플로팅 메시지 만들기 (Floating / Toast Message with Mui Alert) 리액트 전체 링크 참고 - https://mui.com/material-ui/react-alert/ - https://mui.com/base-ui/react-snackbar/ 이벤트가 발생하면 플로팅 메시지(토스트 메시지)가 나타나고 사라지도록 해보자. (링크에서 확인) 구현 showAlert는 플로팅 메시지를 보여주는 조건이다. const [showAlert, setShowAlert] = useState(false); 버튼을 클릭하면 N번째 메시지를 보여준다고 가정하자. const handleButtonClick = (index) => { setShowAlert(true); setFloatingMessage(`${index} 번째 플로팅 메시지...`); }; 임의의 여러 내용은 아래와 같이 만들었다... 2024. 2. 3.
리액트 Material - 런타임에 Tab 추가, 삭제하기 (Mui Dynamic Tabs) 리액트 전체 링크 참고 - https://mui.com/material-ui/react-tabs/ - SweetAlert2로 모달, 팝업 만들기 Mui Tabs를 이용해서 동적으로 Tab을 추가 / 삭제해 보자. (링크에서 확인) 먼저 위의 링크를 참고하여 Tab 아래에 Text Area를 추가해 보자. 코드는 다음과 같다. import React, { useState } from "react"; import Box from "@mui/material/Box"; import Tabs from "@mui/material/Tabs"; import Tab from "@mui/material/Tab"; import Textarea from "@mui/joy/Textarea"; const TextAreaTabPa.. 2024. 2. 3.
리액트 - react-diff-viewer-continued로 텍스트 비교하기 (Compare Text with Diff Viewer) 리액트 전체 링크 참고 - https://github.com/aeolun/react-diff-viewer-continued 아래 결과는 링크에서 확인할 수 있다. 위의 뷰어를 만들기 위해 react-diff-viewer-continued를 설치하자. npm install react-diff-viewer-continued 예제 코드는 다음과 같다. import React from "react"; import Box from "@mui/material/Box"; import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"; const oldCode = ` const a = 10 const b = 10 const c = () => cons.. 2024. 1. 31.
리액트 - html2pdf로 PDF 다운로드하기 리액트 전체 링크 참고 - Toast UI로 에디터 만들기 리액트에서 HTML의 요소(Toast UI Editor Viewer)를 .pdf로 다운로드 받아 보자. 링크에서 실제로 에디터를 편집하고 다운로드 받아볼 수 있다. 여기서는 html2pdf.js를 사용한다. npm install html2pdf.js --legacy-peer-deps 구현 다운로드하고 싶은 영역을 아래와 같이 id로 추가한다. (pdf-download) 버튼을 추가해 아래 메서드를 실행하면 원하는 요소를 pdf로 다운로드 받을 수 있다. 옵션은 아래 내용을 참고하자. const downloadPDF = () => { const element = document.getElementById("pdf-download"); // PDF로.. 2024. 1. 28.
React Material - Stepper로 워크 플로우 관리하기 (Managing Workflows with Mui Stepper) 리액트 전체 링크 참고 - https://mui.com/material-ui/react-stepper/ 아래 결과는 링크에서 확인할 수 있다. Material UI Stepper를 이용해서 워크 플로우를 관리해 보자. 시작 코드는 다음과 같다. import React from "react"; import Box from "@mui/material/Box"; import Stepper from "@mui/material/Stepper"; import Step from "@mui/material/Step"; import StepLabel from "@mui/material/StepLabel"; import Typography from "@mui/material/Typography"; const steps =.. 2024. 1. 24.
리액트 - 리덕스로 로그인 상태 관리하기 (Managing Login State with Redux) 리액트 전체 링크 참고 - 인증 토큰 획득 서버 구현하기 - 깃허브 OAuth 콜백 처리하기 - 리덕스로 상태 관리하기 - Context API로 상태 관리하기 - recoil로 상태 관리하기 - SWR로 상태 관리하기 위의 링크를 참고해서 구현하면 로그인 정보를 유지하기가 매우 까다롭다. App.js에서 loginStatus를 useState로 관리하고, 각 Component에 전달해야 하기 때문이다. 리덕스를 이용하여 아래와 같이 로그인 상태 정보를 유지해 보자. 아래의 구현에서부터 시작한다. Node JS githubLogin.js const axios = require("axios"); const express = require("express"); const router = express.Rou.. 2024. 1. 22.
리액트 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 (Toast UI Markdown Editor) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 Git / GitHub 전체 링크  참고- Toast UI 에디터로 깃허브 마크다운 저장하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 Toast UI Editor에서 캡처 이미지를 포함하여 깃허브의 README.md를 수정해 보자. Toast UI 에디터로 깃허브 마크다운 저장하기를 참고하여 아래 코드에서 시작하자.이 코드는 auto-test 리포지토리의 README.md를 편집할 수 있다.import.. 2024. 1. 17.
리액트 - 캡처한 이미지 여러 개 업로드하기 (Upload Captured Images to GitHub) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 Git / GitHub 전체 링크 참고- multer로 이미지 업로드하기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이전 글을 응용해서 여러 개의 캡처된 이미지를 업로드해 보자 여러 개의 이미지를 다루기 때문에 useState는 배열로 관리한다.const [imageDataUrls, setImageDataUrls] = useState([]); 그리고 붙여넣기 이벤트가 발생할 때마다 배열에 이미지 URL을.. 2024. 1. 17.
리액트 - 캡처한 이미지를 깃허브에 업로드하기 (Upload Captured Image to GitHub) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- 이미지 캡처해서 웹에 붙여넣기 - 깃허브 리포지토리 이미지 불러오기 - 깃허브 API로 이미지 업로드하기 - 깃허브에 업로드된 이미지 삭제하기 - 캡처한 이미지를 깃허브에 업로드하기 - 캡처한 이미지 여러 개 업로드하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 이번에는 이미지 파일을 업로드하지 말고, 캡처한 이미지를 깃허브에 올려보자. 링크를 참고하여 캡처한 이미지를 먼저 웹 페이지에 붙여 넣는 코드에서 보완해 나가자import React, { useState } from "react";const Capture = () => { const [ima.. 2024. 1. 17.
반응형

티스토리툴바