[javascript] object-hash 라이브러리의 성능 이슈
react-hook-form의 form 객체를 hash() 해 봤는데, 50ms ~ 80ms 정도의 시간이 소요되었다. 생각보다 부하가 커서, 빈번하게 호출되는 구간에는 사용하지 않는 것이 좋겠다.
Category Archives: Lang
[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를 하면 유사하게 구현 가능함.
[펌글] SASS 에서 미디어쿼리(media query)를 사용하여 기기(디바이스, device) 분기 처리(반응형, responsive)하는 샘플 코드
참고 원본 출처 – [SCSS(SASS)] 반응형 breakpoints 추가하는 방법 원본이 scss로 되어 있어서 sass로 변환해 봄 sass로 map 선언시, 개행하면 문법오류가 나서 map-merge를 사용했으나 별로 좋아보이지 않는다. sass의 한계인지? 샘플 소스 /////////////////////////////// 반응형 환경변수 정의 (S) /////////////////////////////// $breakpoints: ('mobile-extra-small': (min-width: 21.25rem)) // 340 $breakpoints: map-merge($breakpoints, ('mobile-portrait-only': (max-width: 29.9375rem))) // 479 $breakpoints: map-merge($breakpoints, ('mobile-landscape': (max-width: 51rem)))… Read More »
[html] input text 입력폼에서 원하지 않는 빨간색 밑줄(red underline)이 보일 경우 (spellCheck)
input 태그의 spellcheck 속성을 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
[typescript] object 내에 있는 key를 기준으로 object 내부를 정렬하기 (sort, order by…)
소스 /** * 인자로 받은 object를 key 기준으로 내부 정렬하여 리턴한다. * * – 한계점 * – 1depth 만 되는 것처럼 보인다. */ export const sortByKey = (unordered: any = {}) => { return Object.keys(unordered) .sort() .reduce((obj: any = {}, key: any) => { obj[key] = unordered[key]; return obj; }, {}); }; 참고 https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key
[typescript] 스프레드 연산자 (전개구문, 펼침, spread operator) 를 사용한 배열을 함수의 인자(인수, 매개변수, arguments)로 넘기고 싶을 경우
javascript 라면 그냥 사용하면 되는데, typescript 일 경우 아무 생각 없이 사용하면 다음과 같은 에러가 발생한다. A spread argument must either have a tuple type or be passed to a rest parameter function getObj(name: string, age: number) { return { name, age, }; } // 해결방안 1) as const를 사용하여 배열을 튜플(tuple)로 만든다. const result… Read More »
[javascript] textarea 의 마지막 글자 뒤에 커서가 위치하도록 하기 (set cursor at the end)
element.selectionStart = element.value.length 참고 https://stackoverflow.com/questions/10158190/how-to-set-cursor-at-the-end-in-a-textarea
[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 »
[css] 두 개 이상의 클래스가 존재하는 엘리먼트에 한해서만 적용되는 css 정의 (CSS rule to apply only if element has BOTH classes)
css 작성시 단순히 두 개의 클래스를 나열해 주면 된다. <div class="abc xyz">블라블라</div> .abc.xyz { /* rules go here */ }