본문 바로가기
반응형

전체 글986

깃허브 액션 - github-pages-deploy-action로 리액트 gh-pages 자동 배포하기 Git / GitHub 전체 링크 참고 - gh-pages로 리액트 프로젝트 배포하기 - https://docs.github.com/en/actions/using-jobs/assigning-permissions-to-jobs - https://github.com/JamesIves/github-pages-deploy-action 리포지토리에 코드가 push 되는 것과 깃허브 페이지를 배포하는 것은 별개의 작업이다. (npm run deploy) 리포지토리에 push가 되면 페이지가 자동 배포되도록 깃허브 액션의 yml 파일을 만들어 보자. .github/workflows/push-and-deploy.yml을 만들어 보자. github-pages-deploy-action을 쓰려면 contents의 permi.. 2024. 4. 18.
리액트 Custom Hook - 모든 페이지의 로컬 스토리지 변경 감지하기 (useLocalStorage) 리액트 전체 링크 참고- 로컬 스토리지 사용 방법과 세션 스토리지 비교- 게으른 초기화로 useState 초기화하기 다음과 같이 로컬 스토리지 변경을 감지하는 커스텀 훅을 만들어보자.여기서는 모든 페이지에 대해 이벤트를 감지한다. 예시 코드는 다음과 같다.로컬 스토리지가 변경되면 useEffect에서 storage 변경 이벤트 리스너를 등록하면 된다.import React, { useState, useEffect } from "react";const KEY0 = "MY_DATA_0";const LocalStorageHook = () => { const [localStorageData, setLocalStorageData] = useState( localStorage.. 2024. 4. 15.
리액트 Custom Hook - input 입력 유효값 검사하기 (useInput) 리액트 전체 링크 다음과 같이 이 있다. 리액트에서는 아래와 같이 input state를 관리한다. import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> ); }; export default MyInput; (빈 문자열을 포함하여) 숫자만 입력 가능하도록 코드를 수정해 보자. import React, { useState } from "react"; const MyInput = () => { const [value, setValue] = useState(""); const handleChange = (val.. 2024. 4. 15.
Node JS - archiver로 폴더 압축해서 전송하기 (Compressing and Sending a Directory with Archiver) Node JS 전체 링크 참고 - https://www.npmjs.com/package/archiver 다음과 같은 경로가 있다고 가정하자. let folderPath = "D:\\github\\node-server\\macro\\myfiles"; // 압축할 폴더 경로 해당 경로에는 아래의 폴더와 파일이 존재한다. 리액트에서 버튼을 클릭하면 위의 폴더를 zip으로 다운로드 받아보자. 리액트 예시 코드는 다음과 같다. import React from "react"; import axios from "axios"; const DownloadZip = () => { const handleDownload = async () => { let server = `http://192.168.55.120:3002/fi.. 2024. 4. 15.
리액트 Custom Hook - useRef로 useState 이전 값 저장하기 (usePrevious) 리액트 전체 링크 다음과 같이 바로 직전의 값을 저장하는 커스텀 훅을 만들어보자. useRef는 값이 바뀌어도 렌더링을 발생시키지 않고 현재 상태를 저장할 수 있다.const usePrevious = (value) => { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current;}; 예를 들어, setCount로 count 값이 변경된다면, usePrevious는 count 값이 변경되기 전 값을 가지게 된다. const [count, setCount] = useState(0); const prevCount = usePrevious(count);.. 2024. 4. 15.
리액트, Node JS - 다른 클라이언트가 선택한 셀 표시하기 (Highlighting Cells Selected by Another Client) 리액트 전체 링크 Node JS 전체 링크 참고 - https://reactgrid.com/features - Socket.IO로 로그인 유저 관리하기 - module.css로 CSS 스타일 관리하기 - 스프레드시트 공동 작업하기 Project Settings - Handsontable에 Socket.IO 적용하기 - 변경된 셀만 데이터 전송해서 최적화하기 - 행 / 열 이동 및 크기 변경 연동하기 - 다른 클라이언트가 선택한 셀 표시하기 react-grid에는 공동 작업에 대한 셀 하이라이팅 기능을 제공한다. 아쉽게도 handsontable에는 해당 기능을 제공하지 않는다. 따라서 기존 기능을 이용해서 비슷하게 구현해 보자. 하이라이트 + 툴팁 만들기 먼저 임의의 셀의 테두리 색을 변경하고, toolt.. 2024. 4. 13.
리액트, Node JS - 행 / 열 이동 및 크기 변경 연동하기 (Sync Row / Column Movement and Size Adjustment) 리액트 전체 링크 Node JS 전체 링크 참고 - https://handsontable.com/docs/javascript-data-grid/api/hooks/#afterrowmove - 전치 행렬 구하기 - 스프레드시트 공동 작업하기 Project Settings - Handsontable에 Socket.IO 적용하기 - 변경된 셀만 데이터 전송해서 최적화하기 - 행 / 열 이동 및 크기 변경 연동하기 - 다른 클라이언트가 선택한 셀 표시하기 이제 행이나 열을 이동하거나, 삭제, 추가 그리고 크기 변경도 연동해 보자. 행 / 열 이동, 삭제, 추가 구현 afterRow / ColumnMove에는 여러 parameter가 있지만, 여기서는 movedRows / Columns와 finalIndex만 사용.. 2024. 4. 13.
리액트, Node JS - 변경된 셀만 데이터 전송해서 최적화하기 (Data Optimization with Socket.IO) 리액트 전체 링크 Node JS 전체 링크 참고 - 2차원 배열 빈 행 / 열 추가, 삭제하기 - 스프레드시트 공동 작업하기 Project Settings - Handsontable에 Socket.IO 적용하기 - 변경된 셀만 데이터 전송해서 최적화하기 - 행 / 열 이동 및 크기 변경 연동하기 - 다른 클라이언트가 선택한 셀 표시하기 이전 글에서 전체 데이터를 한 번에 서버로 전송하였다. afterChange: function (changes, source) { // changes : 변경된 데이터 정보, source : 변경을 발생시킨 원인 if (source === "loadData") return; console.log("Changed Data :", source, changes); socketI.. 2024. 4. 13.
리액트, Node JS - Handsontable에 Socket.IO 적용하기 (Handsontable with Socket.IO) 리액트 전체 링크 Node JS 전체 링크 참고 - Socket.IO로 Toast UI Editor 동시 편집하기 - 스프레드시트 공동 작업하기 Project Settings - Handsontable에 Socket.IO 적용하기 - 변경된 셀만 데이터 전송해서 최적화하기 - 행 / 열 이동 및 크기 변경 연동하기 - 다른 클라이언트가 선택한 셀 표시하기 Handsontable에 Socket.IO를 적용해서 편집된 데이터를 공유해 보자. Socket Server 소켓 서버는 Socket.IO로 Toast UI Editor 동시 편집하기와 동일하다. 기본적으로 전체 data를 broadcast로 전송하며, 최초 진입 클라이언트에게는 initData로 현재 데이터를 전송한다. const { Server } .. 2024. 4. 13.
반응형

티스토리툴바