mui grid 내에서 비동기 작업이 필요할 경우 (e.g. axios)
renderCell 하위 부분을 custom component화 해서 useEffect나 useQuery를 사용하자.
Author Archives: itpsolver
CORS 설정 관련 경험 기록
CORS 설정 OPTIONS method는 CORS 상황에서 발생한다? 여기서 CORS 관련 response header가 검증되면 브라우저가 본 요청을 보내는 것 같다. spring과 nginx에 CORS header 설정이 공존한다면 관리의 편의를 위해 spring에서만 CORS header를 설정하자 spring에서 CORS설정시 allow credentials 가 true일 경우, allow origins에’*’를 사용할 수 없다.
react에서 lodash debounce의 적용시 팁
꼭 이벤트핸들러에 딱 붙여서 하지 않아도 된다. FC body에서 debounce를 씌운 함수에, useCallback을 씌우고 변수로 할당하면 된다. debounce의 모든 영역에서 useCallback을 씌우는 것이 핵심이다!!
react 에서 hook을 호출할 수 없는 상황일 경우
함수를 주입받는 것도 생각해 보자.
react에서 js로 children 을 재귀 탐색하는 것은 불가능 한 듯.
냉무
yup 으로 custom function 사용시 yup.matches() 말고 yup.test()를 사용하자.
matches()는 메시지의 type이 matches()로 고정되고, react-hook-form에서 errors 배열을 추출할 대 구조가 달라서 문제가 된다.
mybatis if문(when)에서 알 수 없는 NumberFormatException 이 발생하는 경우
if 문 내의 비교 문자열이 외따옴표로 감싸져 있지 않은지 확인하자. 오류 케이스 <if test="activeYn == 'Y'"> 성공 케이스 <if test='activeYn == "Y"'>
Ctrl + Shift + X 로 캡쳐하는 프로그램, 단축키 바인딩 제거
개발하면서 대소문자 변환시 Ctrl + Shift + X 를 사용해서 대문자 변환을 하는데, 언제부터인지 이상한 캡쳐 프로그램 (capture)이 그 단축키를 점유해 버리는 짜증나는 경험을 하고 있었다. 찾지 못하던 중에 끝내 찾아냈으니… 범인은 바로… 웨일 브라우저 (whale) 어우 진짜 너무 짜증나네.
[react query] 즉시 새로운 데이터를 가져오기
방법 1 queryClient.invalidateQueries({ queryKey }); await queryClient.refetchQueries({ queryKey }); // 데이터를 즉시 새로 가져옴 두 개의 함수를 호출해야 한다는 것, await 에도 주의하자. 방법 2 refetch(); // 데이터를 새로 가져오고 useQuery의 결과를 업데이트 지금 새로운 데이터를 fetch 하지 않아도 되는데, 캐시는 확실히 지워야 할 경우 e.g.) edit modal 닫을 때 cache clear queryClient.removeQueries({ queryKey });… Read More »
[링크] p6spy 커스텀 설정 정보
개요 기본 설정(enable, logger)은 application.yml 에서 서버별로 설정 decorator: datasource: p6spy: enable-logging: true logging: slf4j 링크의 내용을 따라서 P6spyConfig 작성 P6spyPrettySqlFormatter 작성
react-hook-form의 FormProvider와 storybook을 함께 사용하는 preview 샘플코드
기존에 preview.ts를 사용하고 있었다면, preview.tsx 로 rename. preview.tsx import type { Preview } from "@storybook/react"; import React from "react"; import { FormProvider, useForm } from "react-hook-form"; import "../src/index.css"; /** * 각 컴포넌트에 react-hook-form 이 결합되어 있어서 * storybook 화면에서 에러를 방지하기 위해 global FormProvider wrapping을 수행. */ const formDecorator = (Story) => { const methods… Read More »
[링크] frontend UI 컴포넌트들을 모아놓은 사이트 (javascript input table grid…)
https://component.gallery/components/table/ https://open-ui.org/components/table.research/
윈도우10 에서 프로세스명 System (파일명 ntoskrnl.exe)이 cpu 점유를 많이 하는 문제에 대한 해결
이 프로세스는 윈도우 커널이라서 종료할 수 없다. 아마 타 회사의 상주 프로그램과 궁합이 좋지 않아서 무한루프성 작업을 하는 듯 했다. 아래 참고링크의 내용처럼 상주 프로그램들을 제거하고 재부팅 했더니 해결됨. 1. Open the run box by pressing the Windows Key + R and type msconfig 2. System Configuration Utility box will open and by default you… Read More »
[react-hook-form] useFormContext 장점
Context 라는 이름에서 유추할 수 있듯이, form이 다른 컴포넌트를 포함하고 있다면 해당 컴포넌트의 input까지 register를 내려서 묶을 수 있다.
[vite 4] vite에서 moment/locale이 정상 작동하지 않는 문제
import 구문을 dist 포함으로 변경해 주어야 한다. Replace import ‘moment/locale/ru’; with import ‘moment/dist/locale/ru’;
[react] NiceModal의 useModal() 은 toastGrid 와 충돌을 일으킨다 (냉무)
spring 에서 다중(multiple) web application context 구성
web.xml 에 추가적인 dispatcher servlet을 구성하여, 2개의 web application context 를 구성할 수 있다. 이 경우, dispatcher-servlet.xml 은 2개가 된다. web application context는 root application context의 하위 요소임. 이전에는 프레임웍 셋팅할 때, ajax 요청은 특정 header 값을 포함시켜서 구분하곤 했는데, 이런 식으로 아예 dispatcher servlet 을 별개로 구성해서 해도 깔끔할 것 같다.
[유틸] 윈도우 클립보드 복사/붙여넣기 프로그램 (clcl.exe)
https://blog.naver.com/dlaskarud2/221901236095 클립보드 복사 이력을 불러와서 활용 가능.
[javascript] javascript의 Set 은 JSON.stringify 로 직렬화 할 수 없다.
어우 몰랐네… 괜히 삽질… JSON.stringify 를 사용하려면 Set을 배열로 변환해야 한단다. let mySet = new Set([1, 2, 3]); let myArray = Array.from(mySet); let jsonString = JSON.stringify(myArray); console.log(jsonString); // 출력: "[1,2,3]"
AnyDesk 에서 전체화면 모드 사용시, 다른 모니터의 창을 클릭 (focus out) 하면 AnyDesk 창이 최소화 되는 문제에 대한 해결.
설정 > 표시 > 표시 모드 > Windowd full-screen mode 에 체크