본문 바로가기
반응형

개발730

리액트, 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.
리액트 - Handsontable Context Menu 커스터마이징 (Fix Issue for Disappearing Comments) 리액트 전체 링크 참고 - https://forum.handsontable.com/t/comment-window-automatically-disappears/2822 - https://github.com/handsontable/handsontable/issues/5614 - https://handsontable.com/docs/react-data-grid/context-menu/ handsontable 6.2.2 ver에는 아래와 같이 셀이 많을 때, 메모가 사라져서 입력을 할 수 없는 버그가 있다. 다음과 같이 Custom Add Comment를 새로 만들어서 해결하자. Context Menu 커스터마이징 contextMenu를 true로 할 경우 마우스 오른쪽 버튼으로 컨텍스트 메뉴가 나온다. con.. 2024. 4. 12.
자바스크립트 - 전치 행렬 구하기 (Transpose 2D Array) 자바스크립트 전체 링크 다음과 같은 원본 배열이 있다고 가정하자. const originalArray = [ [1, 2, 3, 4, 5, 6], [7, 8, 9, 10, 11, 12], [13, 14, 15, 16, 17, 18], ]; 이 배열을 전치(transpose)해서 아래의 배열을 얻어보자. [ [ 1, 7, 13 ], [ 2, 8, 14 ], [ 3, 9, 15 ], [ 4, 10, 16 ], [ 5, 11, 17 ], [ 6, 12, 18 ] ] 코드는 다음과 같다. const transpose = (array) => { const rows = array.length; const cols = array[0].length; const transposedArray = []; for (let j .. 2024. 4. 10.
자바스크립트 - 2차원 배열 빈 행 / 열 추가, 삭제하기 자바스크립트 전체 링크 다음과 같은 배열에 빈 행/열을 추가하거나 삭제해보자. 주어지는 배열의 모든 행의 길이는 같다고 가정한다. const myArray = [ [1, 2, 3, 4, 5, 6, 7], [8, 9, 10, 11, 12, 13, 14], [15, 16, 17, 18, 19, 20, 21], [22, 23, 24, 25, 26, 27, 28], [29, 30, 31, 32, 33, 34, 35], ]; 행 추가 table의 rowIndex 부터 amount 만큼 행을 추가하는 메서드는 다음과 같다. emptyArray로 table row의 length만큼 빈 문자열로 이루어진 배열을 만들어서 추가하였다. const insertRows = (table, rowIndex, amount) => .. 2024. 4. 10.
리액트 - 게으른 초기화로 useState 초기화하기 (Lazy Initialization for useState) 리액트 전체 링크 참고 - https://legacy.reactjs.org/docs/hooks-reference.html#lazy-initial-state - React.memo, useMemo, useCallback으로 최적화하기 이전 글에서 상태 변경에 의해 컴포넌트가 매번 렌더링 될 때 메모이제이션을 이용해 렌더링을 최적화하였다. 비슷한 최적화로 useState의 게으른 초기화(Lazy Initialization)를 사용할 수 있다. useState의 초기화에서 함수를 사용하고 있는 경우를 살펴보자. 만약 value0이 getInitValue 함수로 값을 초기화한다고 가정하자. const getInitValue = () => { console.log("getInitValue"); return "";.. 2024. 4. 7.
리액트 - React.memo, useMemo, useCallback으로 최적화하기 리액트 전체 링크 참고 - debounce vs throttle로 최적화하기 with useMemo (lodash-es) - 게으른 초기화로 useState 초기화하기 아래 코드를 실행해 보자. import React, { useState } from "react"; const MySpan = ({ input }) => { console.log("MySpan is Rendered..."); return input 0 : {input}; }; const MemoTest = () => { const [value0, setValue0] = useState(""); const [value1, setValue1] = useState(""); const [value2, setValue2] = useState("").. 2024. 4. 7.
리액트 - classnames로 CSS 스타일 조건부 렌더링하기 리액트 전체 링크 참고 - https://www.npmjs.com/package/classnames - styled-components로 타이핑 효과 만들기 - module.css로 CSS 스타일 관리하기 - classnames로 CSS 스타일 조건부 렌더링하기 classnames를 이용하면 리액트에서 조건부로 css를 적용할 수 있다. 먼저 classnames 라이브러리를 설치한다. npm install classnames module.css로 관리할 CssTest.module.css 파일은 다음과 같다. .blue_input { border: 0; margin: 10px; padding: 10px; border-radius: 10px; background-color: blue; } .input { b.. 2024. 4. 7.
리액트 - debounce vs throttle로 최적화하기 with useMemo (lodash-es) 리액트 전체 링크 참고 - https://www.npmjs.com/package/lodash-es - React.memo, useMemo, useCallback으로 최적화하기 - Socket.IO로 Toast UI Editor 동시 편집하기 debounce와 throttle은 성능 최적화를 할 때 사용된다. debounce는 연속된 이벤트를 하나로 묶어 처리할 수 있다. (딜레이 적용) throttle은 일정 시간 간격으로 이벤트를 호출되도록 제한한다. (주기적 호출) debounce 예를 들어 input에서 타이핑을 할 때, 타이핑을 멈춘 후, 검색 요청을 보내고 싶다고 가정하자. 이런 경우 debounce를 이용할 수 있다. 예시 코드는 다음과 같다. import React, { useMemo, us.. 2024. 4. 6.
리액트, 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.
반응형