// Sample arrays const array1 = [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }, ]; const array2 = [ { id: 2, name: 'Banana' }, { id: 4, name: 'Grapes' }, ]; // Get differences based on the 'id' property const differences = array1.filter(item1… Read More »
내 경우에는 bitdefender의 방화벽 문제였음. bitdefender > 시스템 보호 > 방화벽 > 설정 에서 dart.exe 가 허용되지 않아 발생했던 문제였음.
gpt로 질문해 봄 https://chat.openai.com/share/4cf77dc4-40ca-47cf-8a36-bd8f69d7a1e5
CSS : 요소 및 레이어 중앙정렬 방법
llm lang chain llama polyglot-ko
환경 "react-hook-form": "^7.34.0" 개요 form.watch 사용시, 모든 form 컴포넌트를 리렌더링하기 때문에, 성능에 영향을 미치는 경우가 있었음. useWatch는 re-rendering의 범위를 단위 컴포넌트 내로 제한하며, 필드명으로 범위를 또 제한할 수가 있었음. 샘플 코드 // fromDate, toDate 두 개의 props를 받는 datepicker에서의 작업예시 const watchVals = useWatch({ control: form.control, name: [fieldName, fieldName2 || 'dummy'] }); 위 샘플에서는 control,… Read More »
React 18의 strict mode 때문이었음
https://velog.io/@vpdls1511/Springboot-415-Unsupported-Media-Type
왤까? 왜 그러는 것일까?
배열의 요소를 변경한 후, 배열의 사본을 set 해야 한다. array1 이라는 state라면 => […array1] 로 적용
type 회원구분 = '정회원' | '준회원'; export const 숨길메뉴들: Record<회원구분, string[]> = { 정회원: [ '0001', ], 준회원: [], };
이동 전 페이지 const navigate = useNavigate(); const goErrorPage = (errMsg: ReactNode) => { navigate('/error', { state: { errMsg } }); }; // 이후 goErrorPage('블라블라') 호출 이동 후 페이지 const { state } = useLocation(); … return <> <h2>{state.errMsg}</h2> </>
링크 https://zkim0115.tistory.com/980 참고 내 경우는 폴더의 소유자를 변경할 때, 창 하단의 ‘모든 자식 개체 사용 권한 항목을 이 개체의 상속 가능한 사용 권한 항목으로 바꾸기’ 까지 체크해 주어야 제대로 작동했었다.
예시 // 작동함 .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 »
