예시 // 작동함 .excludePathPatterns("/aaa/**") .excludePathPatterns("/bbb*/**") // 작동하지 않음 .excludePathPatterns("/aaa**") // 별표 두개는 꼭 슬래쉬 뒤에 와야 하는 것 같다. 순서에 대하여 gpt에 물어보니, 패턴을 정의하는 순서에 의미가 있다고 한다. (위의 것이 먼저 필터링) 실험 결과 넓은 url 범위를 exclude 하고, 하위의 좁은 범위를 다시 add 했을 때, add가 의도한대록 작동(권한체크)되지는 않았다. (gpt는 된다고 했는데…?)
문제 상황 웹서버 대신 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를 하면 유사하게 구현 가능함.
참고 원본 출처 – [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 »
input 태그의 spellcheck 속성을 false로 설정해 보자
소스 예시 let props = condition ? {tabIndex: 1} : {}; let div = <div {…props} /> 출처 https://stackoverflow.com/questions/36523225/dynamic-tabindex-attribute-in-jsx-react
소스 /** * 인자로 받은 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
nginx.conf http { … gzip on; gzip_comp_level 6; gzip_min_length 5120; gzip_buffers 16 8k; gzip_proxied any; gzip_types text/plain text/css text/js text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/rss+xml image/svg+xml; … } 참고 gzip_min_length 5120 은 적당히 생각해서 지정한 값임. https://extrememanual.net/10004
