이동 전 페이지 const navigate = useNavigate(); const goErrorPage = (errMsg: ReactNode) => { navigate('/error', { state: { errMsg } }); }; // 이후 goErrorPage('블라블라') 호출 이동 후 페이지 const { state } = useLocation(); … return <> <h2>{state.errMsg}</h2> </>
문제 상황 웹서버 대신 CDN을 사용하고 있음. 브라우저 캐시를 제거한 채로 ajax 요청을 할 경우 잘 동작함. 브라우저 캐시가 활성화된 상태로 ajax 요청을 할 경우, 마치 쿠키 데이터(e.g. access token)가 없는 것 같은 현상이 서버에서 일어남. 해결 axios 공통함수의 default headers에 아래 두 개의 항목을 추가해 주어 해결함. ‘cache-control’: ‘no-cache’, pragma: ‘no-cache’,
원문 출처 https://betterprogramming.pub/loading-third-party-scripts-dynamically-in-reactjs-458c41a7013d script loader as a module const loadGMaps = (callback) => { const existingScript = document.getElementById('googleMaps'); if (!existingScript) { const script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js'; script.id = 'googleMaps'; document.body.appendChild(script); script.onload = () => { if (callback) callback(); }; } if (existingScript && callback) callback(); }; export default loadGMaps; 적용 import React, {… Read More »
환경 react 18 @mui/material: 5.11.2 @mui/base의 Modal 컴포넌트를 사용하여 모달 구현 개요 mui의 데모 페이지에서는 모달이 뜬다고 해서 이런 현상이 발생하지 않았다. 우리 사이트의 레이아웃 특성상 발생하는 문제인 것 같다. 헤더(GNB) 영역이 좌우로 왔다갔다 하는 것이 눈에 거슬림 해결 /** * jumping scrollbar issue 해결방안 * * 1) 모달이 뜨면 스크롤바가 사라지면서 header부가 우측으로 밀리고,… Read More »
useMemo를 사용하는 것을 왜 생각 못하고 엉뚱한 곳을 헤멨을까? const randomId = useMemo(() => nanoid(6), []);
개요 보통은 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 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 »
react-hook-form의 form 객체를 hash() 해 봤는데, 50ms ~ 80ms 정도의 시간이 소요되었다. 생각보다 부하가 커서, 빈번하게 호출되는 구간에는 사용하지 않는 것이 좋겠다.
환경 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 }); };
이렇게 하는 것이 정석인지 아닌지는 모르겠다. 일단 요건은 만족하는 것으로 보인다. type Props = { … readOnly?: boolean; // true일 경우, 클릭해도 아무 일도 일어나지 않는다. … }; /** * FC */ const Checkbox = ({ … readOnly = false, … }: Props) => { return <input … onClick={(e) => { if (readOnly) e.preventDefault(); }}… Read More »
sendbird UIKit 에서 onBeforeSendFile (맞나?) 를 사용하려다가 sync – async 문제로 안되서 어려워 하다가, fileUploadIconRenderer (맞나?) 를 통해 fileUploadIcon을 아예 새로 만들어서 해결했다고 함.
개요 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 »
https://stackoverflow.com/questions/47227550/using-await-inside-non-async-function
element.classList.add("my-class"); // 추가 element.classList.remove("my-class"); // 삭제
Array.forEach() 로는 loop 중간에 멈추는 것은 불가능하다고 함. Array.every() 를 forEach()처럼 사용하면서, loop 내에서 기본적으로 return true를 해 주고, break 하고 싶은 곳에서 return false를 하면 유사하게 구현 가능함.
소스 예시 let props = condition ? {tabIndex: 1} : {}; let div = <div {…props} /> 출처 https://stackoverflow.com/questions/36523225/dynamic-tabindex-attribute-in-jsx-react
개요 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 »
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
console.time() 쓸만하네 https://developer-talk.tistory.com/286
생각해 보면 좀 멍청한 이야기인데… -__-; ajax promise가 reject 되지는 않았는지 확인해 보자.
