본문 바로가기
반응형

Node js53

Node JS - FormData와 multer로 여러 파일 업로드하기 (Upload Multiple Files with FormData and multer) Node JS 전체 링크 참고- multer로 이미지 업로드하기 다음과 같이 웹에서 여러 파일을 업로드하면 서버로 전송되도록 구현해 보자.리액트 input 태그에 multiple을 설정하면 여러 파일을 선택할 수 있다. handleUpload 구현은 전체 코드를 참고하자.formData의 append를 이용해 e.target.files를 순회하면서 파일을 추가한다.한글 파일이 있는 경우 파일 이름을 처리하기 위해 encodeURIComponent를 이용해야 한다.formData와 config("content-type": "multipart/form-data")를 post에 설정하여 서버로 전송하면 된다.import React from "react";import axios from "axios";const.. 2024. 4. 27.
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.
리액트, 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.
리액트, Node JS - 스프레드시트 공동 작업하기 Project Settings (Real-Time Collaboration with Handsontable Spreadsheet) 리액트 전체 링크 Node JS 전체 링크 참고 - 로그인 + 채팅방 UI 만들기 - Hansontable Customizing with GitHub - https://forum.handsontable.com/t/is-there-a-feature-for-simultaneous-editing/7510 - 스프레드시트 공동 작업하기 Project Settings - Handsontable에 Socket.IO 적용하기 - 변경된 셀만 데이터 전송해서 최적화하기 - 행 / 열 이동 및 크기 변경 연동하기 - 다른 클라이언트가 선택한 셀 표시하기 다음과 같이 동시에 편집할 수 있는 스프레드 시트를 만들어보자. 그리고 다른 클라이언트가 작업하고 있는 셀의 정보도 알 수 있도록 하자. 주의 : handsontable.. 2024. 4. 13.
리액트, Node JS - Socket.IO로 Toast UI Editor 동시 편집하기 리액트 전체 링크 Node JS 전체 링크 참고 - Toast UI 에디터로 깃허브 마크다운 저장하기 - Socket.IO로 로그인 유저 관리하기 - debounce vs throttle로 최적화하기 with useMemo (lodash-es) socket.io를 이용해서 구글 docs 공동 작업처럼 리액트에서 문서를 동시에 편집해 보자. 구현 소켓 서버는 매우 간단하다. 클라이언트는 전체 Editor의 내용을 보내기 때문에 현재 data를 currentData 저장하도록 하였다. 그리고 broadcast로 다른 클라이언트에게 에디터에 있는 내용을 전송한다. const { Server } = require("socket.io"); let currentData = undefined; const io = n.. 2024. 4. 6.
리액트, Node JS - Socket.IO Middleware로 중복 로그인 방지하기 (Limiting Connections using Socket.IO Middleware) 리액트 전체 링크 Node JS 전체 링크 참고 - https://socket.io/docs/v4/middlewares/ - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 이전 글에서 중복 로그인을 제한했던 내용을 Socket.IO의 Middleware로 구현해 보자. Middleware socket.io의 미들웨어는 use()를 이용해서 구현할 수 있다. use.. 2024. 4. 5.
반응형

티스토리툴바