[react] 컴포넌트 함수 body 내에서 랜덤문자열(random string)을 상수(constants)화 하기 (useMemo)
useMemo를 사용하는 것을 왜 생각 못하고 엉뚱한 곳을 헤멨을까? const randomId = useMemo(() => nanoid(6), []);
Category Archives: JavaScript
[react] 윈도우 스크롤 모니터 (html window scroll state monitor) 샘플 코드 (with lodash 스로틀링(throttle))
개요 보통은 react-use의 useWindowScroll 로 충분하다. 그러나 이번에 작업하는 컴포넌트는 소형 컴포넌트로, 한 페이지 내에 다수가 들어갈 수 있어서 성능을 위해 scroll event에 throttle 처리를 해 주고 싶었음 소스 export const useWinScroll = ({ throttleInterval = 50 }) => { const [scrollX, setScrollX] = useState(window.scrollX); const [scrollY, setScrollY] = useState(window.scrollY); // dc(`## scrollY: [${scrollY}]`); useEffect(()… Read More »
[react/vite] 로컬 서버 기동(부팅, booting)시 콘솔 에러 로그 없이 멈추는 현상 (hang, halt, stop, freeze)
환경 react 18 vite 4 원인 1 스크립트 에러가 존재할 경우 원인 2 정말 알 수 없는 케이스 (URL()이 문제인가? import.meta.url이 문제인가?) export function getImageUrl(filePath: string) { // const ret = import.meta.url; // 문제 없음 // const ret = new URL(`${filePath}`, ''); // 문제 없음 // const ret = new URL('blablabla', import.meta.url).href; // 문제 없음… Read More »
[javascript] object-hash 라이브러리의 성능 이슈
react-hook-form의 form 객체를 hash() 해 봤는데, 50ms ~ 80ms 정도의 시간이 소요되었다. 생각보다 부하가 커서, 빈번하게 호출되는 구간에는 사용하지 않는 것이 좋겠다.
[react router 6] 브라우저 주소표시줄 (browser url address bar) 내용 변경하기 (navigate())
환경 react router 6 개요 vanilla js에서는 window.history.pushState 를 사용한다고 하는데 react router 6 에서는 useNavigate 를 사용하면 된다. const navigate = useNavigate(); const { pathname } = useLocation(); … const handleSearch = () => { const newSearch = new URLSearchParams({ page: 1 } as any).toString(); navigate({ pathname, search: newSearch }); };
[react] 체크박스(checkbox) 클릭을 아예 막는 방법 (클릭해도 무반응인 상태)
이렇게 하는 것이 정석인지 아닌지는 모르겠다. 일단 요건은 만족하는 것으로 보인다. type Props = { … readOnly?: boolean; // true일 경우, 클릭해도 아무 일도 일어나지 않는다. … }; /** * FC */ const Checkbox = ({ … readOnly = false, … }: Props) => { return <input … onClick={(e) => { if (readOnly) e.preventDefault(); }}… Read More »
[sendbird] React UIKit을 사용하여 자체 서버에 파일 업로드를 하도록 커스터마이징 (file upload customize) 하던 중 발생한 문제 해결
sendbird UIKit 에서 onBeforeSendFile (맞나?) 를 사용하려다가 sync – async 문제로 안되서 어려워 하다가, fileUploadIconRenderer (맞나?) 를 통해 fileUploadIcon을 아예 새로 만들어서 해결했다고 함.
[React] click/keydown 이벤트 등으로 인해 blur 이벤트 발생시, click/keydown 이벤트가 씹히는(무시되는) 케이스에 대한 해결
개요 focus 라는 이름의 boolean state를 특정 input의 focus 여부에 따라 상태관리를 하려 함. input의 onBlur(), onFocus() 에서 set state를 하는데, click/keydown 등으로 촉발(trigger)된 Blur이벤트를 타서 set state를 할 경우, 원래의 이벤트인 click/keydown이 실행되지 않는 문제 발견 onBlur() 에서 set state를 할 경우, 리렌더링이 발생하고 최초 이벤트가 무시되는 것처럼 보임. 처음에는 event.relatedTarget 을 통해 해결하려… Read More »
[javascript] async function 이 아닌 곳에서 await 사용하기 (using await inside non-async function) – 미검증
https://stackoverflow.com/questions/47227550/using-await-inside-non-async-function
[javascript] 동적으로(dynamically) css 클래스(class) 추가하기
element.classList.add("my-class"); // 추가 element.classList.remove("my-class"); // 삭제
[javascript] 배열(array) forEach() 호출시 break 할 수는 없나? (Array.every() 로 대체)
Array.forEach() 로는 loop 중간에 멈추는 것은 불가능하다고 함. Array.every() 를 forEach()처럼 사용하면서, loop 내에서 기본적으로 return true를 해 주고, break 하고 싶은 곳에서 return false를 하면 유사하게 구현 가능함.
[react] 조건(condition)에 따라 React Element에 속성(attribute, props?)을 추가하는 예시 (조건에 따라 tabIndex 속성을 넣었다 뺐다 하기, 조건부 속성 추가)
소스 예시 let props = condition ? {tabIndex: 1} : {}; let div = <div {…props} /> 출처 https://stackoverflow.com/questions/36523225/dynamic-tabindex-attribute-in-jsx-react
[react] 특정 html element의 값을 수동으로(programmatically) 셋팅 (el.value = newValue)하는 데 완벽하게 되지 않을 경우에 대한 해결 샘플.
개요 react로 wrapping한 메신저 라이브러리 (sendbird)의 메시지 입력창 (textarea)에 set value를 해야 하는 상황 textarea.textContent = newValue 식으로 값을 셋팅한 후 textarea.dispatch(new Event(‘input’)); => 처음 한 번은 잘 됨. 이후로는 계속 안됨. 검색 끝에 아래의 방법으로 해결함. 유틸함수 선언 const inputTypes = [ window.HTMLInputElement, window.HTMLSelectElement, window.HTMLTextAreaElement, ]; /** * 특정 html element의 value를 set 하는… Read More »
[react] input text – placeholder 처럼 생긴 레이블(label, 라벨)이 인풋박스의 좌상단으로 이동하는 애니메이션(animation) 기능 구현 샘플. (floating label)
repl 아래 참고 링크중 하나를 복붙하여 구현 참고 https://blog.stackfindover.com/animated-floating-input-labels-using-css/ https://dev.to/rafacdomin/creating-floating-label-placeholder-for-input-with-reactjs-4m1f https://jacobruiz.com/blog/2021/2/11/how-to-transition-placeholder-text-into-a-label-in-react-floating-label-inputs
[링크] 간단한 javascript 수행시간 검사(check time elapsed, stopwatch, console.time…)
console.time() 쓸만하네 https://developer-talk.tistory.com/286
[react-query/useQuery] fetch를 분명히 했는데도 캐시(cache data)를 덮어쓰지(overwrite) 않았던 현상.
생각해 보면 좀 멍청한 이야기인데… -__-; ajax promise가 reject 되지는 않았는지 확인해 보자.
[react] html 엘리먼트 (real dom element) 에 리액트 컴포넌트 (react component) 삽입(insert)하기
환경 react ^18.2.0 import React, { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import TestExt from "./TestExt"; /** * TestExt 컴포넌트를 특정 DOM 노드에 선택적으로 삽입하기 위해 wrapping한 컴포넌트 */ const TestExtWrap = ({ isOpen }: { isOpen: boolean }) => { const wrap = document.getElementById("div-sample")!; return <>{isOpen && createPortal(<TestExt />,… Read More »
[react] react-device-detect 라이브러리의 단점
라사이즈(resize) 이벤트에 대응하지 못한다.
yarn dev로 서버를 띄워 브라우저로 테스트를 하는데, vite connected 상태에서 화면에 출력되지 않을 경우
환경 "vite": "2.9.15" "react": "^18.2.0" "typescript": "4.9.4" 현상 browser 콘솔(console) 에서는 ‘vite connected’ 상태 로딩중 동글뱅이 돌고 있음. browser network 탭을 보면 main.tsx 에서 대기(pending)중 해결 yarn build시 컴파일 오류가 나는 부분이 있었는데, 그 부분을 해결하니 다시 잘 됨.
[react] package.json 내의 라이브러리 버전 고정의 위험성
환경 vite 2.9.15 @mui/material ^5.10.5 @mui/material 의 버전업이 너무 빨라서 ‘되던 게 안되는 현상’ 이 발생하여 (minor version 변경임에도 props 구조가 변해 버림) 꺽쇠 ^를 사용하지 않고 버전 숫자만으로 지정하여 고정을 시도했으나, yarn build는 성공했는데 yarn dev 에서 알 수 없는 오류를 계속 뱉어내어 롤백을 했다.