[typescript] 인덱스 시그니처 (index signature) 타입을 정의할 때, 키(key)에 커스텀 타입 (custom type, literal, generic)을 매핑하는 방법 (Record)
type 회원구분 = '정회원' | '준회원'; export const 숨길메뉴들: Record<회원구분, string[]> = { 정회원: [ '0001', ], 준회원: [], };
Author Archives: itpsolver
[react-router-dom v6] 페이지 이동(route, navigate)시 보이지 않는 데이터(파라미터)를 담아서 이동하는 방법 (useLocation > state)
이동 전 페이지 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 참고 내 경우는 폴더의 소유자를 변경할 때, 창 하단의 ‘모든 자식 개체 사용 권한 항목을 이 개체의 상속 가능한 사용 권한 항목으로 바꾸기’ 까지 체크해 주어야 제대로 작동했었다.
[spring] WebMvcConfigurer > addInterceptors > excludePathPatterns 의 wildcard(*, asterisk) 문법에 대하여 (url 패턴에 의한 권한체크 필터)
예시 // 작동함 .excludePathPatterns("/aaa/**") .excludePathPatterns("/bbb*/**") // 작동하지 않음 .excludePathPatterns("/aaa**") // 별표 두개는 꼭 슬래쉬 뒤에 와야 하는 것 같다. 순서에 대하여 gpt에 물어보니, 패턴을 정의하는 순서에 의미가 있다고 한다. (위의 것이 먼저 필터링) 실험 결과 넓은 url 범위를 exclude 하고, 하위의 좁은 범위를 다시 add 했을 때, add가 의도한대록 작동(권한체크)되지는 않았다. (gpt는 된다고 했는데…?)
CDN 사용시 axios (ajax) 캐싱으로 인해, 쿠키(cookie) 정보가 누락된 채 서버로 요청이 전달되던 현상
문제 상황 웹서버 대신 CDN을 사용하고 있음. 브라우저 캐시를 제거한 채로 ajax 요청을 할 경우 잘 동작함. 브라우저 캐시가 활성화된 상태로 ajax 요청을 할 경우, 마치 쿠키 데이터(e.g. access token)가 없는 것 같은 현상이 서버에서 일어남. 해결 axios 공통함수의 default headers에 아래 두 개의 항목을 추가해 주어 해결함. ‘cache-control’: ‘no-cache’, pragma: ‘no-cache’,
[react/펌글] 외부 자바스크립트 파일을 동적으로 로딩 하기 (loading external javascript file dynamically in react)
원문 출처 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/mui] 모달(modal) 호출시 스크롤바가 사라졌다가, 모달을 닫으면 다시 생기는 문제로 인해(jumping scrollbar) 화면이 흔들리는 이슈
환경 react 18 @mui/material: 5.11.2 @mui/base의 Modal 컴포넌트를 사용하여 모달 구현 개요 mui의 데모 페이지에서는 모달이 뜬다고 해서 이런 현상이 발생하지 않았다. 우리 사이트의 레이아웃 특성상 발생하는 문제인 것 같다. 헤더(GNB) 영역이 좌우로 왔다갔다 하는 것이 눈에 거슬림 해결 /** * jumping scrollbar issue 해결방안 * * 1) 모달이 뜨면 스크롤바가 사라지면서 header부가 우측으로 밀리고,… Read More »
[react] 컴포넌트 함수 body 내에서 랜덤문자열(random string)을 상수(constants)화 하기 (useMemo)
useMemo를 사용하는 것을 왜 생각 못하고 엉뚱한 곳을 헤멨을까? const randomId = useMemo(() => nanoid(6), []);
[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를 하면 유사하게 구현 가능함.
[펌글] 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로 설정해 보자