173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
Suspense 컴포넌트를 아래처럼 TabDeciderSuspense 컴포넌트 안에 포함시켰더니 데이터 페칭하는 동안 Tab, PostForm 컴포넌트가 로딩 스피너 때문에 보이지 않던데 Suspense 컴포넌트는 데이터 페칭하는 컴포넌트 밖으로 무조건 빼야 제대로 동작하는 건가요? <Suspense fallback={"Loading..."}> <HydrationBoundary state={dehydratedState} queryClient={queryClient}> <TabDecider /> </HydrationBoundary> </Suspense>
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
ERROR Error: [Reanimated] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details., js engine: hermes at DrawerViewBase ( http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.matzip&modulesOnly=false&runModule=true:167363:22 ) at RNGestureHandlerRootView at GestureHandlerRootView ( http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.matzip&modulesOnly=false&runModule=true:164680:21 ) at RNCSafeAreaProvider at SafeAreaProvider ( http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&lazy=true&minify=false&app=com.matzip&modulesOnly=false&runModule=true:134394:24 ) ..... 이러한 오류가 계속 뜨네요 해결방법을 혹시 알고계신지요ㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
어디서 에러를 살펴볼수있을까요? DB에도 들어가질 않습니다.
미해결
Next + React Query로 SNS 서비스 만들기
제로초님이 강의 하시다 Link태그 안에 img 태그를 넣는 방식으로 하시다가 사진 두개를 넣는 부분 부터 이작업을 안하셨는데 두번 째 방식까지는 .postImageSection img { border-radius: 16px; height: 100%; width: 100%; } img 태그에 100%를 주는 방법으로 해결했지만 그림 3개를 넣는 부분 부터는 크기가 맞지 않습니다 어떻게 해결하면 크기가 정확히 맞을까요? if (post.Images.length === 3) { return ( <div className={cx(style.postImageSection, style.threeImage)}> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[0].imageId}`} style={{ backgroundImage: `url(${post.Images[0]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[1]?.link} alt="" /> </Link> <div> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[1].imageId}`} style={{ backgroundImage: `url(${post.Images[1]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[1]?.link} alt="" /> </Link> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[2].imageId}`} style={{ backgroundImage: `url(${post.Images[2]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[2]?.link} alt="" /> </Link> </div> </div> );
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. 강의를 들으면서 카카오 로그인부터 부분부터 구현하고 있는 수강생입니다. 카카오 로그인을 진행하는데 ID와 PW를 입력하고 들어가면 Admin Settings Issue (KOE101)이라는 에러 창이 나타납니다. 해당 에러는 확인해 보면 'App Key'를 잘못 등록했을 때 발생하는 것이라고 확인하고 다시 확인해 봤지만 계속 같은 에러만 발생하는 상황입니다. 해결 방법 질문 드립니다.ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요. 강의 활용 방안에 대해서 간단한 질문이 있어서 글 남깁니다. 제가 해당 강의를 듣는 이유는 Next.js에 대한 학습이며 이와 더불어 추가적으로 활용하시는 기술 (웹소켓 등) 을 함께 학습하는 것이며, 최대한 빠르게 개념을 잡고 혼자서 사이드 프로젝트 등을 만들며 익숙해지는 것이 목적입니다. 본래는 강의 초반부에 추천해주신 것처럼 일정 부분 강의를 수강한 후 올려주시는 예시 코드를 바탕으로 직접 코드를 짜며 비교해보는 방식으로 활용해보려 했습니다. 하지만 해당 방식에 다소 불편함이 있어서 (ex. 올려주신 예시 코드에서도 로그인/아웃 기능이 구현되지 않은 상황이라 화면 구현하는데 다소 불편함이 따르는 등) 먼저 강의를 보기만 하는 식으로 완강한 후 배운 내용을 바탕으로 혼자서 구현해보는 방식으로 활용해보려 합니다. 관련하여 혹시 보다 추천하시는 방법이 있으신지 궁금해서 질문글 남기게 되었습니다.
미해결
Next + React Query로 SNS 서비스 만들기
강의 언제나 잘보고 있습니다. 따로 작업하다가 난감한게 있어서 문의드립니다. 예를 들어 ["ABC"] 라는 캐시가 있다는 가정하에 A페이지, B페이지에서 해당 캐시를 사용합니다. 이때 질문이 있습니다. A,B 페이지에서 useQuery로 데이터를 불러올 경우 실수로 A와 B가 다른 queryFn이 정의 되어있을 때, InvalidateQueries를 해도 데이터가 미스매칭될 수 있는 가능성이 존재할까요? prefetchQuery 사용 시, A페이지와 B페이지가 ABC라는 데이터가 공통으로 필요할 경우, A페이지에서 prefetchQuery를 읽어서 B로 가면 A의 ABC를 캐시해서 B에서도 사용 가능한 걸로 알고있는데요. 이럴때 만일 B페이지로 바로 접근이 가능할 경우, B 페이지에서도 prefetchQuery를 적용해야 둘다 SSR이 제대로 적용되는걸까요?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님. 이번 강좌에서 숙제로 내주신 부분(div로 radio버튼 만들기) 을 진행하다가 문득 궁금증이 생겼는데요. <input type="radio">가 많을때 useRef을 하나씩 만들어서 일일이 1대1 매칭으로 접근해야 하는건가요? 혹은 ref값을 빈배열로 만든 뒤 배열의 값을 radio 버튼의 value로 채워서 해당 배열의 인덱스 값으로 참조해야하는 걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 섹션3의 3번째 강의 server action을 보고 있는데요 const submit에서 에러가 발생해서 질문합니다. const submit에서 서버액션을 사용하기 위해 "use server"를 넣었는데 다음과 같은 에러가 발생합니다. ./src/app/(beforeLogin)/_component/SignupModal.tsx Error: × It is not allowed to define inline "use server" annotated Server Actions in Client Components. │ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component. │ │ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components │ ╭─[/home/tpark/SNS/z-com/src/app/(beforeLogin)/_component/SignupModal.tsx:3:1] 3 │ import { redirect } from "next/navigation"; 4 │ 5 │ export default function SignupModal() { 6 │ ╭─▶ const submit = async (formData: FormData) => { 7 │ │ "use server"; 8 │ │ if (!formData.get("id")) { 9 │ │ return "아이디를 입력하세요."; 10 │ │ } 11 │ │ if (!formData.get("name")) { 12 │ │ return "닉네임을 입력하세요."; 13 │ │ } 14 │ │ if (!formData.get("password")) { 15 │ │ return "비밀번호를 입력하세요."; 16 │ │ } 17 │ │ if (!formData.get("image")) { 18 │ │ return "이미지를 업로드하세요."; 19 │ │ } 20 │ │ if (!formData.get("id")) { 21 │ │ return "이미 사용 중인 아이디입니다."; 22 │ │ } 23 │ │ 24 │ │ let shouldRedirect = false; 25 │ │ try { 26 │ │ const response = await fetch( 27 │ │ `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, 28 │ │ { 29 │ │ method: "post", 30 │ │ body: formData, 31 │ │ credentials: "include", 32 │ │ } 33 │ │ ); 34 │ │ console.log(response.status); 35 │ │ if (response.status === 403) { 36 │ │ return { message: "user_exists" }; 37 │ │ } 38 │ │ console.log(await response.json()); 39 │ │ shouldRedirect = true; 40 │ │ } catch (err) { 41 │ │ console.error(err); 42 │ │ } 43 │ │ if (shouldRedirect) { 44 │ │ redirect("/home"); 45 │ │ } 46 │ ╰─▶ }; 47 │ return ( 48 │ <> 49 │ <div className={style.modalBackground}> ╰──── 서버 액션부분을 다른 컴포넌트로 분리해서 사용해야 하는거 같은데 강의 내용에서는 바로 진행이 되서 제가 어느부분이 잘못되었는지 잘 모르겠습니다. 그리고 혹시 최상단에 "use client"를 작성하지 않았기에 이건 서버컴포넌트인줄 알았는데 에러메세지에 클라이언트 컴포넌트에서 사용할 수 없다는건 현재 컴포넌트가 클라이언트 컴포넌트인건가요...? 아래는 제가 작성한 코드입니다. import style from "./signup.module.css"; import BackButton from "./BackButton"; import { redirect } from "next/navigation"; export default function SignupModal() { const submit = async (formData: FormData) => { "use server"; if (!formData.get("id")) { return "아이디를 입력하세요."; } if (!formData.get("name")) { return "닉네임을 입력하세요."; } if (!formData.get("password")) { return "비밀번호를 입력하세요."; } if (!formData.get("image")) { return "이미지를 업로드하세요."; } if (!formData.get("id")) { return "이미 사용 중인 아이디입니다."; } let shouldRedirect = false; try { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", body: formData, credentials: "include", } ); console.log(response.status); if (response.status === 403) { return { message: "user_exists" }; } console.log(await response.json()); shouldRedirect = true; } catch (err) { console.error(err); } if (shouldRedirect) { redirect("/home"); } }; return ( <> <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <BackButton /> <div>계정을 생성하세요.</div> </div> <form action={submit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" name="id" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="name"> 닉네임 </label> <input id="name" name="name" className={style.input} type="text" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" name="password" className={style.input} type="password" placeholder="" required /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="image"> 프로필 </label> <input id="image" name="image" className={style.input} type="file" accept="image/*" required /> </div> </div> <div className={style.modalFooter}> <button type="submit" className={style.actionButton}> 가입하기 </button> </div> </form> </div> </div> </> ); }
미해결
Next + React Query로 SNS 서비스 만들기
fetch 함수를 사용할 때 next 객체 tags에 태그들을 지정해서 넣는 것으로 배웠습니다. 제가 이해하기로는 그 태그들로 분류되어 next가 캐싱하는 걸로 알고 있는데, 브라우저 쪽에서 작동하는 fetch(예를 들어 onclick에 붙어있는 fetch라든지... )와 next 서버 쪽에서 작동하는 fetch(예를 들어 api 디렉토리의 routes.ts에서 동작하는...)의 태그가 같다면 캐시 공유가 되나요? 브라우저는 브라우저 쪽에 서버 쪽 fetch는 서버 쪽에 저장될 것 같은데 어떻게 동작하는지 질문드립니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
[3-8] React Query 도입(2) - 로그인 연동하기 아침에도 질문올리고 또 올리네요 ㅠ 거의 하루종일 이 부분 학습하고 회원가입 로그인 했는데 어떠한 오류도 없고 회원가입, 로그인이 안되서 질문 남깁니다. 강의 파일 비교해봐도 특별히 오타가 없는거 같은데요 혹시 깃주소 올리면 봐주시나요?
해결됨
Next + React Query로 SNS 서비스 만들기
tanstack query와 next.js 를 함께 사용하면서 의문이 들어 질문합니다! 강의의 코드를 보니 같이 prefetch를 해도 유저데이터는 useQueryClient를 사용해서 데이터를 재사용하는듯한데 안에 하위 컴포넌트의 경우 prefetch를하고 useQuery를 사용해서 데이터를 가져오는듯 하더라구요 이 경우도 데이터를 재사용하는건가요? 아니면 새로 가져오는건가요? 그렇다면 똑같이 데이터를 prefetch해도 useQueryClient를 사용해서 가져오는것과 useQuery를 사용해서 가져와야하는 기준이 있을까요? (저의경우 프로젝트 전체를 prefetch후 useQueryClient를해서 데이터를 가져왔더니 데이터를 가져옴과 동시에 fresh가아니라 inactive상태가 되더라구요. ) 좋은강의 감사합니다. 벚꽃같은 제로초 화이팅
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
[3-7] 백엔드 서버 실행하기 에서 에러로 폴더 생성이 안되는경우 인데요 unable to connect to server : connection timeout expired 이렇게 뜨고 폴더 생성이 안되는데요 기존 설치되었던 pgAdmin이 이상이 있나싶어 다시 설치하려고 하는데요 어떤걸 설치해야할지 모르겠습니다. 저는 윈도우 86-64인데요 버전이 너무 많아서요 수업 잘 듣고 있는데 여기서 막히네요 ㅠㅠ 터미널에서 서버를 실행하니 src/image/image.controller.ts:14:25 - error TS2307: Cannot find module 'src/@common/constants' or its corresponding type declarations. 14 import { numbers } from 'src/@common/constants'; ~~~~~~~~~~~~~~~~~~~~~~~ Found 1 error(s). 이런 오류가 뜨네요 어떻게 해야할까요? 깃파일에 오타가 있습니다
미해결
Next + React Query로 SNS 서비스 만들기
"홈탭 만들면서 Context API" 강좌를 듣고 localhost3000/home에 들어가면 localhost3000/[username] 경로로 들어가지다가(화면에 '프로필 페이지'라고 뜨는 것을 보니 이런 것 같습니다! ) 화면이 빈 화면으로 바뀝니다.. 그리고 왼쪽 섹션에 있는 프로필을 클릭하면 아래와 같은 오류가 뜹니다 ㅠ 무슨 문제일까요? 오류 내용 : ⨯ Error: Cannot find module '/Users/ryuhojun/Documents/z-com/.next/server/app/(afterLogin)/[username]/page.js' Require stack: - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/require.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/load-components.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/build/utils.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/dev/hot-middleware.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/dev/hot-reloader-webpack.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/lib/router-server.js - /Users/ryuhojun/Documents/z-com/node_modules/next/dist/server/lib/start-server.js
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
xcode 15.3 node 21.1.0 프로젝트를 latest로 설치하면 문제가 없는데, 강의와 일치시키려고 0.72.6으로 설치하면 https://github.com/facebook/react-native/issues/39743 위와 같은 에러가 발생했습니다. --- xcode에서 직접 빌드 시키니, flipperKit에서 에러가 발생했습니다. --- 이럴 경우 해결 방법입니다. https://github.com/facebook/react-native/issues/43335 저처럼 시간 쏟는 분들이 계실까봐 공유합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
사용하시는 vscode 테마가 무엇이죠?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 ! Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다. Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다. 1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다. 2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다. 현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다. 이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다. 제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ? 또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ? // 서버 컴포넌트 import { HydrationBoundary, dehydrate, QueryClient, } from "@tanstack/react-query"; import { QUERY_KEY } from "@/constants"; import { requestGetPushAlarmList } from "@/apis/notification"; import NotificationClient from "./Client"; export default async function Page() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: [QUERY_KEY.PUSH_LIST], queryFn: () => requestGetPushAlarmList({}), }); // const { rows: pushList } = queryClient.getQueryData([ // QUERY_KEY.PUSH_LIST, // ]) as unknown as Rows<PushAlarm>; 예시 2. getQueryData로 데이터에 접근 return ( <HydrationBoundary state={dehydrate(queryClient)}> <NotificationClient /> </HydrationBoundary> // <NotificationList pushList={pushList} /> 예시2. props로 직접 데이터 전달 ); } // 하위 컴포넌트 "use client"; import { useQuery } from "@tanstack/react-query"; import { requestGetPushAlarmList } from "@/apis/notification"; import { QUERY_KEY } from "@/constants"; import NotificationList from "./_components/NotificationList"; import ScreenBox from "@/components/ui/ScreenBox"; import Empty from "@/components/ui/Empty"; export default function NotificationClient() { const { data } = useQuery({ queryKey: [QUERY_KEY.PUSH_LIST], queryFn: () => requestGetPushAlarmList({}), select: (data) => data.rows, }); return ( <> {!data?.length ? ( <ScreenBox.CenterBody> <Empty message="알림이 없습니다." /> </ScreenBox.CenterBody> ) : ( <NotificationList pushList={data} /> )} </> ); }
미해결
Next + React Query로 SNS 서비스 만들기
깃허브에 올려놓은 소스(next-app-router-z /ch3-1)을 다운받은후에 403 에러발생을 확인하기 위해서 아래의 주석을 해제했습니다. src/mocks/handlers.ts http.post('/api/users', async ({ request }) => { console.log('회원가입'); return HttpResponse.text(JSON.stringify('user_exists'), { status: 403, }) }) }), PostMan 에서 http://localhost:9090/api/users?id=js&password=pass&name=js7777 호출을 하면 status 값이 의도한 대로 403 Forbidden 이 출력이 됩니다. 그런데, 브라우저 개발자모드 Network 에서 보면 Status 값이 200 으로 출력됩니다. 서버에서는 분명 403 상태로 보냈고, PostMan에서도 403으로 상태값이 넘어오는데, 왜? 개발자 도구(Network)에서만 상태값이 200으로 출력되는지 모르겠습니다.
미해결
Next + React Query로 SNS 서비스 만들기
추천탭에서 게시글을 작성하면 새로고침 시 사라져버리고 추천탭에서 게시한 게시글이 "팔로우 중" 탭에서 존재하여 좋아요 버튼을 클릭하면 새로고침 시 다시 추천탭에도 해당 게시글이 나타납니다. 도무지 뭐가문제인지 모르겠네요ㅠㅠ "use client" import { MouseEventHandler } from 'react'; import style from './post.module.css'; import cx from 'classnames'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { Post } from '@/model/Post'; type Props = { white? : boolean; postId: number; } export default function ActionButtons({white, postId}: Props) { const queryClient = useQueryClient(); const commented = true; const reposted = true; const liked = false; const heart = useMutation({ mutationFn: () => { return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/${postId}/heart`, { method: 'post', credentials: 'include', }) }, // 클릭한 하트 상태를 실시간으로 true로 만들어줌 // post에서 검색결과,추천,팔로잉,답글 등등 쿼리키가 다양한대 어떤 쿼리키인지 무슨상황인지 알 수가 없다. // 그래서 전부 다 해줘야 한다. onMutate() { const queryCache = queryClient.getQueryCache(); const queryKeys = queryCache.getAll().map(cache => cache.queryKey); console.log('queryKeys',queryKeys); queryKeys.forEach((querykey) => { if(querykey[0] === 'posts') { const value:Post | Post[] | undefined = queryClient.getQueryData(querykey); // 게시글 console.log(value) // 싱글포스트 일 수도 있기때문에 조건문 걸어줌. if(Array.isArray(value)){ const index = value.findIndex((v) => postId == v.postId); // 찾고자 하는 게시글이 있는지 확인 if(index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], } // 옅은 복사해준것을 쿼리에 전송 queryClient.setQueryData(querykey, shallow); } }else { // 싱글 포스트인 경우 } } }); }, onError() { }, onSettled() { } }) // 댓글 const onClickComment = () => {} // 리트윗 const onClickRepost = () => { } // 좋아요 const onClickHeart:MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); if(liked){ // unheart.mutate(); }else{ heart.mutate(); } } return ( <div className={style.actionButtons}> <div className={cx(style.commentButton, { [style.commented]: commented }, white && style.white)}> <button onClick={onClickComment}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"></path> </g> </svg> </button> <div className={style.count}>{1 || ''}</div> </div> <div className={cx(style.repostButton, reposted && style.reposted, white && style.white)}> <button onClick={onClickRepost}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"></path> </g> </svg> </button> <div className={style.count}>{1 || ''}</div> </div> <div className={cx([style.heartButton, liked && style.liked, white && style.white])}> <button onClick={onClickHeart}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true"> <g> <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path> </g> </svg> </button> <div className={style.count}>{0 || ''}</div> </div> </div> ) }
해결됨
Next + React Query로 SNS 서비스 만들기
csr 에서는 useQueryClient로 생성된 QueryClient를 가져와 사용하는 반면에 ssr 에서 prefetch 할 때에는 QueryClient 를 새로 생성해서 사용하시더라구요. 그럼 ssr에서 생긴 QueryClient csr에서 생긴 QueryClient 두개가 존재하게 되는데, 리액트쿼리가 hydrate 하는 과정에서 알아서 합쳐주는 건지 그 원리가 궁금합니다. 2. prefetch를 할 때마다 QueryClient를 새로 생성해야 하는지 아니면 ssr에서 사용할 QueryClient를 하나 생성해서 공유하는 방식으로 사용해야 하는 것인지, 또 공유해서 사용한다면 예제가 있을까요? 만약 prefetch 할 때마다 QueryClient를 새로 생성해야 한다면 성능상에 문제는 없을까요? prefetch를 난발하는 것을 멈추고 조심히 사용해야 할까요? 강의 덕분에 많이 배웠습니다. 좋은 강의 감사합니다.
