프론트엔드 괴발개발 블로그

올해 업무를 하거나 면접을 보면서 React Query를 사용하거나 물어보는 경우가 많았다.특히 외국인 개발자분은 면접 중에 특이한 케이스를 주시고 이때 React Query를 어떻게 사용할건지 물어보시는 경우도 있었다.그래서 공부하면서 자주 잊는 부분들을 정리하고 가려고 한다. useMutation의 경우, onSuccess, onError등 적은 갯수의 옵션을 갖지만 useQuery를 옵션 값이 많아 useQuery에 대해 정리하였다.참고로 자주 사용되는 옵션은 queryKey, queryFn, staleTime, enabled, refetchWindowFocus, select 정도이다. useQuery의 옵션들queryKey캐시를 구분하는 고유한 키로 키가 같으면 동일한 캐시를 공유함 queryF..

현업에서 다른 분들의 코드를 보다보면 자주 보이는 T 외에도 K, V, S 등 다양하게 사용되는 제네릭 타입을 볼 수 있다.개인적으로 주니어로서 사수나 팀장 없이 일을 하면서 해당 내용이 늘 궁금했었는데 최근 다른분의 코드를 보다가 E를 또 발견하면서 다시 궁금증이 생겨 정리하고 가고자 한다. 해당 내용은 단순히 타입스크립트에 제한되지 않고 Java, C#등 다른 언어에서도 관용적으로 사용되는 표현으로 보인다.아래 내용이 절대적인 것은 아니니 혹시 해당 글을 보게 된다면 참고용으로만 사용하길 바란다. 약자의미사용 예시TTypefunction identity(value: T): T KKeyK extends keyof T VValueRecord EElementArrayRReturnReducerPProps/P..

기존에 개발할 때 unknown 타입은 "as unknown as Type" 형태로만 활용했는데,"우아한 타입스크립트 with 리액트" 를 읽으면서 any보다 안전하고 더 다양한 쓰임새가 있다는 것을 알게 되어두 타입을 다시 정리하게 되었다. any 타입이란any는 모든 타입의 값을 허용하는 특수한 타입이다.(단, never 타입은 예외)any로 선언된 변수는 타입 검사를 건너뛰기 때문에, 어떤 연산을 해도 오류가 발생하지 않는다.let value: any;value = 123;value = "Hello";value = { name: "Hyon" };console.log(value.toUpperCase()); // 오류 없음 (런타임 에러 가능) any의 주요 사용방법1. 임시로 타입을 유연하게 처리할..

Q. React-Query 사용 시 DB 데이터를 delete 했을 때 성공, 실패 여부를 어떻게 확인할 수 있는가? 1) onMutate과 onSuccess에서 invalidate 사용하여 파악 가능const useDeleteItem = () => useMutation({ mutationFn: deleteItem, onSuccess: (_data, id) => { // 목록, 상세 등 관련 캐시 무효화 queryClient.invalidateQueries({ queryKey: ['items'] }); queryClient.invalidateQueries({ queryKey: ['item', id] }); }, }); 2) onMutate + Optimis..

리액트를 활용하여 개발을 하면서 화면이 복잡한 경우, 성능 최적화에 신경을 쓰게 될 경우가 있다. 최근 진행한 프로젝트에서는 종합적으로 관리하는 페이지를 만들다보니 특정 페이지에서 렌더링 하는데 시간이 조금 더 소요되는 경우가 있었다.그래서 특정 상황에서 useCallback()을 사용하는 경우가 생겼는데 useCallback()에 대해 알아보기 전에 동일하게 Memorization으로 최적화에 사용하는 useMemo()에 대해 먼저 정리해보려고 한다. useMemo란?리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 hook으로 특정 함수의 결과 값을 임시 메모리에 담아두고(캐싱) 사용하여 렌더링을 줄이고 계산을 최적화 하는데 사용한다. (Memoization 개념)useCallBack과의 차이점은 u..

새로 프로젝트를 받아 설치를 마쳤는데 import문과 html 요소들, tsconfig.node.json 파일의 moduleResolution, allowImportingTsExtensions에서 빨간 줄이 나오고 있었다.하지만 서버는 정상적으로 빌드가 되고 실행이 되고 있었다. 이럴 때는 내 디바이스(vscode)에 설치된 타입스크립트 버전과 프로젝트의 타입스크립트 버전이 다른지 체크해주면 된다. vscode를 사용 중이라면 'cmd(alt) + shift + p'를 눌러서 'Typescript 버전 선택'을 눌러서 '작업 영역 버전 사용'을 눌러주면 된다.   만약 설정에서 보고 싶다면 설정에서 typescript를 찾아보면 아래와 같이 확인 할 수 있다.아래 변경된 항목(4번째)를 체크해주면 된다.