📍목표- tanstack query(react-query, vue-query) 의 캐시된 데이터 전부 초기화하는 방법 알아보기- A계정으로 데이터 페칭 후, 로그아웃. B계정으로 새로 접속 시 A계정으로 불러온 데이터 제거하기 📍현재 상황- vue-query의 useQuery를 사용해서 데이터 페칭 후 캐싱- 로그인 페이지에서 useQueryClient() 를 이용해 queryClient 인스턴스를 선언- Nuxt의 $fetch로 로그인 요청- 로그인 요청이 성공(access token 및 refresh token이 반환됨)하면 queryClient.clear() 를 사용해서 모든 캐시 데이터 제거 시도=> 하지만, 캐시가 제거되지 않음 📍시도한 방법queryClient.clear() 대신- que..

📍목표- PNPM 패키지 매니저 사용해서 Next.js 프로젝트 만들기- Tailwind 사용 조건으로 ESLint, Prettier 빠르게 설치하기📍create-next-app- create-next-app으로 최신 Next.js 프로젝트 생성- pnpm 사용 npx create-next-app@latest [project-name] --use-pnpm 이후 터미널에서 이어지는 질문에서 ESLint 사용을 체크했다면 ESLint를 설치할 필요 없다 📍Prettier 설치- Prettier 및 Prettier와 ESLint와의 충돌을방지하는 플러그인과 익스텐션 설치- Prettier Tailwind 플러그인도 설치- ESLint Tailwind 플러그인도 설치 pnpm install -D prett..

📍Vue.js에서 외부 라이브러리 사용하기- js-confetti 라이브러리를 사용하면 색종이가 흩날리는 이펙트를 만들 수 있다- 🎉 Congratulations!

📍Slots- 엘리먼트를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 블럭을 전달할 수 있다- 자식 컴포넌트 이렇게만 해도 되고 아래는 fallback contents 전달하고 싶을 때 --> Fallback content - 부모 컴포넌트 (before) This is some slot content! - 내부의 내용은 fallback contents로 작동하여 부모 컴포넌트에서 contents를 입력하지 않았을 때 출력된다- 부모 컴포넌트 (after) Message: {{ msg }}

📍emit()- 자식 컴포넌트는 부모 컴포넌트로부터 props를 받지만,- 부모 컴포넌트에 event를 방출할 수도 있다- emit()의 1번째 인자로 이벤트 이름을 전달- 부모 컴포넌트는 자식 컴포넌트에서 방출된 이벤트를 v-on directive를 통해서 전달받음- 이벤트 핸들러는 여러 인자를 받고 부모 컴포넌트의 로컬 상태로 할당 가능 childMsg = msg" />- 내부에서는 ref값 참조 시 .value 안 붙임에 주의 정리- props: 부모 -> 자식 데이터 전달- emit: 자식 -> 부모 데이터 전달

📍Props- 자식 컴포넌트는 props를 통해 부모 컴포넌트로부터 데이터를 받을 수 있다- 먼저 props를 선언해야 한다 - msg props는 자식 컴포넌트의 블럭에서 사용 가능- defineProps의 반환값을 통해서 JS()에서 접근도 가능- 부모 컴포넌트에서 props를 자식 컴포넌트에 전달할 때는 어트리뷰트 형태로 전달한다- 동적인 값을 전달할 때는 v-bind를 사용하여 전달한다