[react] useEffect 의 deps 변경에 대해 debounce (throttle) 처리하는 샘플코드

By | 10월 26, 2022

import { dc, isNotBlank } from '@/utils/common'; import _ from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; /** * textarea 의 내용이 변할 때 debounce를 걸고 convert 함수를 실행한다. */ const TsxConverter = () => { const [contents, setContents] = useState<string>(''); const debounced = useRef(_.debounce((newVal) => convert(newVal), 1000)); useEffect(() => { if… Read More »

[react/typescript] FC의 Props type을 조건부(conditionally) 필수(required) 처리 하는 샘플코드

By | 10월 24, 2022

react로 select box를 구현하던 중 작성한 코드 type SELECT_기본선택지 = '선택' | '전체'; type Props = { data: any[]; // select box를 구성할 리스트 데이터 labelKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 label로 사용하고 싶을 경우 기재 valueKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 value로 사용하고 싶을 경우 기재 style?: CSSProperties; } &… Read More »

vite 에서 특정 라이브러리(dependencies)를 버전업 (yarn up [라이브러리명]…) 했는데, 신 버전이 적용되지 않고 계속 구버전으로 로딩되던 현상. 심지어 yarn remove를 했는데도 이전 버전이 작동하던 문제 해결

By | 10월 19, 2022

환경 vite 2.9.15 원인: vite의 캐시(cache)가 문제였다. vite cache clear 방법 (둘 중 선택) node_modules/.vite 폴더 삭제 vite로 로컬 서버 실행하는 명령문에 –force 옵션 추가

yarn 3.x (berry) 가 제대로 동작하지 않을 경우에 대한 체크리스트

By | 2월 1, 2023

1. 안되면 일단 yarn을 재설치 해 보자 npm un yarn –location=global npm i yarn –location=global 2. 그래도 안되면 어딘가에 있을지도 모르는 .yarnrc 파일을 찾아서 삭제해 주자. 3. 프로젝트 루트의 yarn 관련 모든 것을 일단 삭제 해 보자. .yarn 폴더, node_modules 폴더, pnp.* 파일, .yarnrc.yml … yarn.lock 파일은 삭제하지 말고 내용만 clear 한다. 4. yarn -v… Read More »

react-multi-date-picker 커스텀 관련 메모

By | 10월 18, 2022

원본 repo https://github.com/shahabyazdi/react-multi-date-picker fork 및 npm 배포환경 설정 참고 fork한 프로젝트 로컬에서 최초 실행 @itpsolver/react-multi-date-picker 프로젝트 루트에서 npm i npm build 위 폴더에서 ‘cd website’ 로 웹사이트 폴더 진입 npm i -g gatsby-cli npm i npm run start 브라우저 http://localhost:8000 진입 소스코드 내 모듈명 replace 본 프로젝트 내에 포함된 website 폴더처럼 해당 라이브러리를 esm import… Read More »

@toast-ui/react-grid (toast grid, tui grid, 토스트그리드) 사용시 data.some is not a function (data.map is not a function)… 등의 에러가 발생했던 경험.

By | 10월 11, 2022

문제상황 toast grid 의 특정 셀을 클릭하여 modal을 띄우는 과정에서 아래와 같은 스크립트 에러 발생 react-dom.development.js:26923 Uncaught TypeError: data.some is not a function at Object.createData (item.js:267:4) at Object.resetData (dropdown.js:314:7) at Grid2.dispatch (utils.js:69:8) at Grid2.resetData (utils.js:69:8) at toastui-react-grid.js:1:4602 at Array.forEach (<anonymous>) at c2.value (toastui-react-grid.js:1:4525) at checkShouldComponentUpdate (react-dom.development.js:14134:33) at updateClassInstance (react-dom.development.js:14698:62) at updateClassComponent (react-dom.development.js:19695:20) 오류메시지의 data가 Grid… Read More »

윈도우 탐색기(내컴퓨터) 가 너무 느릴 때 (폴더를 처음 연 순간 느림, 아니면 정렬 등을 수행할 때 버벅거림)

By | 10월 10, 2022

1. 폴더 최적화 설정 확인 1) 탐색기(내컴퓨터)에서 느린 증상이 있는 폴더 우클릭 > 속성 > ‘사용자 지정’ 탭으로 이동 2) ‘다음에 대해 이 폴더 최적화’ 항목을 ‘일반 항목’으로 변경해 보자. 3) 빨라졌으면 성공, 실패면 다른 방법을…? 설정이 ‘비디오’ 등으로 되어 있으면, 각 파일의 메타정보를 읽어서 처리하는 작업 등에서 시간이 걸린다고 한다.

[React] 특정 엘리먼트 ‘외부’를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 (when click outside of element trigger event) [메뉴, 자동완성 구현 등에 사용]

By | 3월 10, 2023

공통 스크립트 /** * 특정 엘리먼트 '외부'를 클릭했을 때 특정 함수를 실행하도록 하는 이벤트 바인더 */ export const useBindClickOutside = (ref: React.RefObject<HTMLElement>, onClickOutside: (e: React.MouseEvent) => void) => { useEffect(() => { // Invoke Function onClick outside of element const handleClickOutside = (e: any) => { if (ref.current && !ref.current.contains(e.target)) { onClickOutside(e); } }; document.addEventListener('mousedown',… Read More »

[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기

By | 9월 23, 2022

환경 React 18.2.0 Typescript 4.6.3 eslint 8.16.0 common.ts /** * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기 */ export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => { // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); func(e); } }; test.tsx //… Read More »

[링크] Frontend (프론트엔드) 개발 팁(tip) 모음

By | 1월 5, 2023

스토리북으로 인터랙션 테스트하기 (20220111) React UI 상태를 URL에 저장해야 하는 방법과 이유 (20211214) 우선순위 힌트로 리소스 로딩 최적화하기 (2021117) CORS에서 이기는 방법 (20211110) 2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능 (20211027) 당신이 모르는 자바스크립트(javascript)의 메모리 누수의 비밀 (20210611) 출처가 다른 윈도우 간에는 데이터를 어떻게 통신할까 (cross origin) (20220831)?

[css] 스크롤바(scrollbar) 모양(design, 디자인) 조정하는 샘플코드 (custom…)

By | 9월 16, 2022

/* * 스크롤바 디자인 커스텀하는 코드 * * – 일단 antd table 내의 스크롤바를 가공해 보았음 * – webkit 계열에서만 사용할 수 있다고 함. */ /* 스크롤바 폭 */ .ant-table-body::-webkit-scrollbar { width: 8px; /* 여기서 height가 의미가 있나? */ } /* 스크롤바에서 움직이는 부분 */ .ant-table-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 2px; background-color: #bbb;… Read More »