react-query 사용시 남아있는 캐시를 날리기 위해 resetQueries 나 removeQueries를 사용한다. 모든 퀴리를 삭제하거나 reset하는경우 // resetreturn queryClient.resetQueries()// removequeryClient.removeQueries() 여러개의 쿼리키를 삭제나 reset하는경우 map 를 사용해서 여러개를 Reset할수 있다. const qurieskeies = ['getOrderExistData', 'getCouponsSummary', 'getProfileAccumulationsSummary', 'getProfileOrders', 'getProfile', 'getProfileOrders'] qurieskeies.map((qu..

tailwind tip https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/ tailwind 도입한 이유 https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/ tailwind config px로 작업하는경우 단위 변경을 위해 변수세팅을 한다. animation도 정의할 수 있음 /** @type {import('tailwindcss').Config} */ const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) }; const px0_100 = { ...Array.from(Array(101)).map((_, ..

next에서 getInitialProp는 권고하지 않고, getStaticProps, getServerSideProps를 사용하라고 권고 이번 프로젝트에서 페이지 앱인경우 공통으로 header값을 가져와야하는 케이스 모든페이지에 getServerSideProps를 사용할수없으니 _app.tsx에서 공통으로 처리하려고 함 그래서 getInitialProps를 사용해서 처리 getInitialProps는 getServersideProps보다 먼저 실행됨 둘다 서버에서 실행되는것으로 서버에서 header정보를 가져올 수있음 최신 next에서는 서버컴포넌트에서는 아래처럼 사용함 https://nextjs.org/docs/app/api-reference/functions/headers 이번 프로젝트는 서버 컴포넌..

useQueries는 React Query 라이브러리에서 여러 개의 쿼리를 동시에 병렬로 실행할 수 있게 해주는 훅입니다. useQuery는 단일 쿼리를 위한 것이고, useQueries는 여러 개의 useQuery를 한 번에 처리하는 데 사용됩니다. Promise.all 과 같은 역활을 하는 useQueries 사용 예시const results = useQueries({ queries: userIds.map(id => ({ queryKey: ['user', id], queryFn: () => fetchUser(id), }))})results.forEach(result => { if (result.isLoading) { console.log('Loading...') } else ..

https://levelup.gitconnected.com/how-to-sort-imports-in-react-project-550f5ce70cbf' prettier와 eslint 중 하나를 선택해서 설정할 수 있다. package설치 npm install --save-dev @trivago/prettier-plugin-sort-imports // or use yarn yarn add --dev @trivago/prettier-plugin-sort-imports .prettierrc에 설정넣어주기 importOrder, importOrderSeparation을 넣어주면 되는데 나는 두가지 값을 넣어도 정렬이 되지 않아서 찾아보니 plugins를 넣어줘야 작동을 했다. importOrderSeparatio..

react hook form을 사용하면서 validate를 위해 zod패키지를 많이 사용하는것 같다, 패키지 용량도 작고 유효성검증(이메일..등등 다양한 폼요소)도 간단하게 할 수 있다. 각각 폼에 넣는것이아니라 한번에 컨트롤 할수있어서 좋은듯하다. zod 설치하기 npm add zod @hookform/resolvers import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ selectReason: z.string().nonempty('이유를 선택해주세요'), detailReason: z.string().trim().nonempty('디테일 이버력해'), refundN..

React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node 리액트 프로젝트 중 위와같은 오류메세지가 나왔다. {state && test} 리액트에서 i태그를 node로 인지하지 않아서 그러는 이슈같다. 인지할수 있는 node로 감싸주면 해결 완료 {state && test}

react컴포넌트에 스타일을 적용하는 방법으로 styles jsx를 사용하는 방법도 있다.styles jsx는 nextJS에만 있는 고유의 방법이다. styles jsx를 사용하면 이점별도의 파일이 필요없다는 점 styles jsx를 적용했을때도 module.css를 적용했을때와 동일하게 클래스명이 난수로 표현된다. 중복우려 없음! 컴포넌트안에 html style태그를 넣어주고 jsx props를 입력해준다. 그리고 그 안에 스타일을 작성한다. 이슈! a태그에 스타일을 적용하는데 적용이 안될때 해결법 1. 글로벌로 선언한다2. legacyBehavior 사용하여 이전버전 link를 커버한다.Home3. link > span태그를 넣어서 클래스를 span태그에 적용한다. Home 컴포넌트 안에서 ..

컴포넌트 스타일을 적용시키는 방법 중 제일 기본적인 방법 Nav.js 컴포넌트가 있다면 Nav.module.css 파일을 만들어서 import해준다. import Link from "next/link"import styles from './Navbar.module.css';import { useRouter } from "next/router"export default function NavBar() { const router = useRouter(); return( home about )} className에 적용하는 방법 다중 클래스 적용하는 방법 1. 백틱 이용하기 home 2. join을 이용하기className={[styles.link, router.path..

gh-pages? Github Pages에 build된 정적인 파일을 올리기위한 npm package Github Pages? git 저장소에 있는 정적인 페이지를 호스팅 해주는 서비스 설치 npm i gh-pages package.json 수정 homepage키를 추가한다. 깃헙 아이디와 저장소 이름을 요 형식에 맞춰서 "https://깃헙아이디.github.io/저장소이름" 넣어주면 된다. 저장소 이름 확인하는 방법 git remote -v로 확인해 볼 수 있다. 아래 이미지에서 todo가 저장소 이름이 된다. { ....other code, "homepage": "https://깃헙아이디.github.io/저장소이름" } 스크립트에 deploy, predeploy를 추가해 준다. predeploy는..