forwardRef를 사용하는 정확한 이유에 대해서 알고싶습니다! 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하고 싶을때 사용하는게 맞을까요?ref는 자식으로 전달이 불가능한 prop이고 forwardRef를 사용해서, 두번쨰 인자로 ref를 전달하는것으로 이해했는데 혹시 맞을까요!!조금 자세한 설명을 듣고 싶습니다!

createDrawerNavigator를 위로 빼주는 이유에 대해서 알고싶습니다. 왜 function 위로 올리는지 이유에 대해서 궁금합니다!! 공식문서에서 그렇게 나와있기 떄문인가요!?

안녕하세요.인피니티스크롤 을 따라하는데 잘안되서요.const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["member", "sales", sawonCode], queryFn: getSales, initialPageParam: 0, }) const dehydratedState = dehydrate(queryClient); return <> <Suspense fallback={<Loading />}> <HydrationBoundary state={dehydratedState}> <SalesList sawonCode={sawonCode} /> </HydrationBoundary> </Suspense> </>const { data, fetchNextPage, hasNextPage, isFetching, } = useInfiniteQuery<Item[], Object, InfiniteData<Item[]>, [_1: string, _2: string, _3: number], number>({ queryKey: ["member", "sales", sawonCode], queryFn: getSales, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.page, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { if(inView) { console.log(data); !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]);useEffect에 콘솔에찍은 data는 undefined 이 찍히고 그후에 getSales에 찍은 api 로 가져온 데이터가 찍힙니다.어떤게 잘못되서 data에 값이 안들어가는지 몇시간을 봐도 잘모르겠네요..ㅜㅜ 

return { name: user.nickname, email: user.email, image: user.profileImage, ...user, };강의에서 user를 그대로 리턴해서 사용하지 않고 user를 커스텀해준 것을 보았습니다. 현재 return하는 값은 Typescript에서 지정한 User 타입을 그대로 사용하면서 수정해서 값을 할당해줬다고 이해했는데 추가로 들어가는 ...user는 어디에서 사용할 수 있는지 궁금합니다. 추가로 제 코드에는 반환하는 정보가 더 많은데 어떤 식으로 값을 할당해서 사용할 수 있는지 궁금합니다.타입을 하나 만들어서 확장해서 사용하고 싶은데 따로 파일을 만들어줘야 할까요?

Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요?왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요?Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요?감사합니다.

안녕하세요.Suspense 컴포넌트의 fallback 요소로 서버 컴포넌트 전달은 문제가 없는데, 내부적으로 useEffect와 타이머를 사용하는 클라이언트 컴포넌트를 전달했더니 해당 훅과 관련된 내용은 모두 스킵되고 그냥 초기 렌더링 내용만 나오는 것 같은데, 애초에 클라이언트 컴포넌트는 전달이 불가능한걸까요?클라이언트 컴포넌트 사용 의도는 1초마다 로딩바 게이지가 증가하는 모습을 보여주고 싶어서 사용해보려고 했습니다.공식 문서를 봐도 해당 내용에 대해서는 언급이 없는 것 같습니다.감사합니다. 

프로젝트 재실행하면 되네요!! 참고하시길...npx react-native start --reset-cache

"use client"; import { useQuery } from "@tanstack/react-query"; import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends"; import Post from "@/app/(afterLogin)/_component/Post"; import { Post as IPost } from "@/model/Post"; export default function PostRecommends() { const { data, error, isLoading } = useQuery<IPost[]>({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends, // gcTime은 staleTime보다 길어야한다 staleTime: 5 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지 gcTime: 300 * 1000, }); if (isLoading) { return <div>Loading...</div>; } if (error) { return <div>Failed to load posts</div>; } return data?.map((post) => <Post key={post.postId} post={post} />); } react query에서 에러가 발생합니다 이유는 모르겠지만 useQuery부분에서 에러가 발생하는 것 같습니다getPostRecommend.ts는 이렇게 작성한 상태입니다export async function getPostRecommends() { const res = await fetch(`http://localhost:9090/api/postRecommends`, { next: { tags: ["posts", "recommends"], }, //캐시를 저장하라고 지정하는 태그 // 너무 강력하게 캐싱을 하면 새로운 데이터가 안불러와 질 수 있다 // 이런 일을 방지하기위해 새로고침을 해야하는 이때 tags를 사용한다 }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } // 이렇게 하면 recommends를 키로 가지고 있는 서버에 있는 캐시가 날아감 // revalidateTag("recommends") // home으로 온 요청이 왔을때 페이지 전체의 캐시를 새로고침한다 // revalidatePath('/home') return res.json(); }근데 getPostRecoomed.ts가 잘못된거 같지는 않은것이처음 작동하는 queryClient.prefetchQuery는 잘 작동합니다

Unhandled Runtime ErrorError: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Did not expect server HTML to contain a <a> in <div>. See more info here: https://nextjs.org/docs/messages/react-hydration-error이런 에러가 발생하는데초반 랜더링과 뭐가 다르거나 랜덤 데이터를 사용하면 오류가 나온다는 것 같아서 혹시 faker를 사용해서 생긴느 에러인지 궁금합니다"use client"; import { useQuery } from "@tanstack/react-query"; import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends"; import Post from "@/app/(afterLogin)/_component/Post"; import { Post as IPost } from "@/model/Post"; export default function PostRecommends() { const { data } = useQuery<IPost[]>({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends, // gcTime은 staleTime보다 길어야한다 staleTime: 60 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지 }); return data?.map((post) => <Post key={post.postId} post={post} />); }여기에서 queryFn: getPostRecommends이 부분을 지워도 정상 작동하는데 queryFn: getPostRecommends 이것이 하는 기능이 무엇인가요?또 여기에서 Retech와 invalidate를 눌러도 트윗이 변하지 않습니다 혹시 위 에러와 관련이 있나요?

강의에 나오는것처럼 진행했을때 import {LatLng, MapMarkerProps} from 'react-native-maps'; declare module 'react-native-maps' { export interface MyMapMarkerProps extends MapMarkerProps { coordinate?: LatLng; } } 'MyMapMarkerProps' 인터페이스가 'MapMarkerProps' 인터페이스를 잘못 확장합니다.'MyMapMarkerProps' 형식은 '{ anchor?: Point | undefined; calloutAnchor?: Point | undefined; calloutOffset?: Point | undefined; centerOffset?: Point | undefined; coordinate: LatLng; ... 22 more ...; zIndex?: number | undefined; }' 형식에 할당할 수 없습니다.'coordinate' 속성의 형식이 호환되지 않습니다.'LatLng | undefined' 형식은 'LatLng' 형식에 할당할 수 없습니다.'undefined' 형식은 'LatLng' 형식에 할당할 수 없습니다.ts(2430)⚠ Error (TS2430) | MyMapMarkerProps 인터페이스가 MapMarkerProps 인터페이스를 잘못 확장합니다.   MyMapMarkerProps 형식은 { anchor?: Point | undefined; calloutAnchor?: Point | undefined; calloutOffset?: Point | undefined; centerOffset?: Point | undefined; coordinate: LatLng; ... 22 more ...; zIndex?: number | undefined; } 형식에 할당할 수 없습니다.동일하게 ?을 넣을 수없는 에러가 생겨서 import {LatLng, MapMarkerProps} from 'react-native-maps'; declare module 'react-native-maps' { export interface MyMapMarkerProps extends Partial<MapMarkerProps> { coordinate?: LatLng; } } 우선 아래와 같이 처리해 보았습니다만 CustomMarker.tsx에서 MyMapMarkerProps를 못불러오는 문제가 있습니다.

안녕하세요 제로초님,특정인 정보 api(api/users/{id}) response 관련 질문이 있습니다.response에 Followers 배열이 있어해당 유저를 팔로우 한 다른 사용자들을 얻고자 했습니다. 처음 시도는 강의에서 진행했던대로prefetchQuery + useQuery 조합으로 데이터를 끌어오고자 했습니다.하지만 이 경우에 Followers 배열이 빠진 상태로 응답이 돌아오고 있습니다.한 100번 새로고침하면 1~2번만 붙어서 옵니다.아래는 prefetchQuery + useQuery 조합 코드입니다. // page.tsx import Link from "next/link"; import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getUserInfo from "./_lib/getUserInfo"; import getUserPosts from "./_lib/getUserPosts"; import Nav from "./_component/Nav"; import ProfileUserData from "./_component/ProfileUserData"; import UserPosts from "./_component/UserPosts"; import { Container, Userzone, Profile, HeaderPhotoZone } from "./page-style"; type Props = { params: { username: string }; }; export default async function Username({ params }: Props) { const { username } = params; console.log("username : ", username); const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ["user", username], queryFn: getUserInfo, }); await queryClient.prefetchQuery({ queryKey: ["posts", "user", username], queryFn: getUserPosts, }); return ( <Container> <HydrationBoundary state={dehydrate(queryClient)}> <Nav username={username} /> <Userzone> <Profile> <HeaderPhotoZone> <Link href="/home">{/* <Image src={이미지} alt="header_photo"></Image> */}</Link> </HeaderPhotoZone> <ProfileUserData username={username} /> </Profile> <UserPosts username={username} /> </Userzone> </HydrationBoundary> </Container> ); } //Nav.tsx "use client"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import getUserInfo from "../_lib/getUserInfo"; import BackBtn from "../../_component/BackBtn"; import { Navigation } from "./style"; import { User } from "@/model/User"; type Prop = { username: string; }; export default function Nav({ username }: Prop) { const { data } = useQuery<User, Object, User, [_1: string, _2: string]>({ queryKey: ["user", username], queryFn: getUserInfo }); console.log("네비게이션 유저 데이터 : ", data); return ( <Navigation> <BackBtn></BackBtn> {data === undefined ? ( <div>프로필</div> ) : ( <div> <div>{data?.nickname}</div> <div>0 게시물</div> </div> )} </Navigation> ); } //ProfileUserData.tsx "use client"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import Link from "next/link"; import { useSession } from "next-auth/react"; import Tab from "./Tab"; import FollowButton from "../../_component/FollowButton"; import { ProfileUserdataMid, UserName, SignupDate, AboutFollower, ProfileUserdata, NoAccountId, NoAccountMsg, ProfileUserdataTop, AbsoluteProfileContainer } from "./style"; import { User } from "@/model/User"; import getUserInfo from "../_lib/getUserInfo"; type Prop = { username: string; }; export default function ProfileUserData({ username }: Prop) { const { data: session } = useSession(); const { data } = useQuery<User, Object, User, [_1: string, _2: string]>({ queryKey: ["user", username], queryFn: getUserInfo }); console.log("프로필 유저 데이터 : ", data); // const createdDate = new Date(data?.createdAt!); if (data === undefined) { return ( <> <NoAccountId>@{username}</NoAccountId> <NoAccountMsg>계정이 존재하지 않음</NoAccountMsg> </> ); } // return null; // 팔로우, 팔로잉 데이터 추가 필요 return ( <ProfileUserdata> <ProfileUserdataTop> <AbsoluteProfileContainer> <div>아 몰랑</div> </AbsoluteProfileContainer> {/* 팔로우 버튼 확인 */} {/* <Link href="/settings/profile">프로필 수정</Link> */} {/* {session?.user?.email === data?.id ? <Link href="/settings/profile">프로필 수정</Link> : <FollowButton user={data} />} */} </ProfileUserdataTop> <ProfileUserdataMid> <UserName> <div>{data?.nickname}</div> <div>@{data?.id}</div> </UserName> <SignupDate> <svg viewBox="0 0 24 24" aria-hidden="true" height="1.25rem"> <g> <path d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"></path> </g> </svg> {/* <div>{`가입일 ${createdDate.getFullYear()}년 ${createdDate.getMonth() + 1}월`}</div> */} </SignupDate> <AboutFollower> <Link href="/follow"> <span>{data._count.Followings}</span> 팔로우 중 </Link> <Link href="/followers"> <span>{data._count.Followers}</span> 팔로워 </Link> </AboutFollower> <Tab></Tab> </ProfileUserdataMid> </ProfileUserdata> ); } react-query 결과 때문에 다른 방법으로 prefetchQuery를 사용하지 않고useQuery만을 사용해서 특정인 정보를 가져오는 시도를 했는데이 경우에는 모두 Followers 배열이 같이 날아오더군요.왜 이런 현상이 일어나는지 궁금해 질문 남깁니다.아래는 useQuery만 사용한 코드는 page.tsx에 prefetchQuery만 빠진 것 이외에 다른 부분은 동일합니다.//page.tsx import Link from "next/link"; import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getUserInfo from "./_lib/getUserInfo"; import getUserPosts from "./_lib/getUserPosts"; import Nav from "./_component/Nav"; import ProfileUserData from "./_component/ProfileUserData"; import UserPosts from "./_component/UserPosts"; import { Container, Userzone, Profile, HeaderPhotoZone } from "./page-style"; type Props = { params: { username: string }; }; export default async function Username({ params }: Props) { const { username } = params; console.log("username : ", username); const queryClient = new QueryClient(); // await queryClient.prefetchQuery({ // queryKey: ["user", username], // queryFn: getUserInfo, // }); await queryClient.prefetchQuery({ queryKey: ["posts", "user", username], queryFn: getUserPosts, }); // 개인 사용자 데이터 가져오는 것으로 수정해ㅑ함 // 이거 서버 컴포넌트인데 Nav 같은거는 client란 말이야 그래서 깜박거리는데 어카지; return ( <Container> <HydrationBoundary state={dehydrate(queryClient)}> <Nav username={username} /> <Userzone> <Profile> <HeaderPhotoZone> <Link href="/home">{/* <Image src={이미지} alt="header_photo"></Image> */}</Link> </HeaderPhotoZone> <ProfileUserData username={username} /> </Profile> <UserPosts username={username} /> </Userzone> </HydrationBoundary> </Container> ); } react - query 결과useQuery만 사용했을 때의 네트워크 탭getUserInfo.tsx는 다음과 같습니다.import { QueryFunction } from "@tanstack/query-core"; import { User } from "@/model/User"; const getUserInfo: QueryFunction<User, [_1: string, _2: string]> = async ({ queryKey }) => { const [_1, username] = queryKey; const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${username}`, { credentials: "include", }); if (response.ok) return response.json(); }; export default getUserInfo;   

안녕하세요 강사님강의 내에서 구성한 Nested Navigation 구조를 참고하여 무신사(musinsa)와 같은 화면 구성을 시도해 보고 있는데 navigation 구조 설계가 생각보다 어려워서 질문 드립니다.원하는 구조는 Bottom Tab에 따라서 Topbar Screen에 해당하는 부분에 장바구니와 알림 버튼이 들어가게 하고싶은데 아래와 같은 navigation 설계로 가능한지 질문드립니다.AuthStackNavigatorAuthHomeScreenKakaoLoginScreenBottomTabNavigatorHomeStackTopbarScreenHomeScreenStoreStackMypageStack ❗질문 작성시 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

패러렐 라우트 강의 중 폴더 이동하는 부분이 있는데i/flow/signup 페이지가 notFound로 나옵니다http://localhost:3000/ 경로에서도 해당 페이지 ui 가 나오지 않는데 어떤 문제일까요 

강의 후반부에 백엔드를 공부하기 위해선 react-query처럼 선수지식이 있어야될까요?

맥북 m1으로 똑같이 설정을 했습니다.그리고 npx react-native init MatzipApp으로 프로젝트를 실행하면 아래오 같은 메시지가 나옵니다. Downloading template ✔ Copying template ⠸ Processing template➤ YN0000: Retrieving https://repo.yarnpkg.com/3.6.4/packages/yarnpkg-cli/bin/yarn.js ⠙ Processing template➤ YN0000: Saving the new release in ../../../.yarn/releases/yarn-3.6.4.cjs ➤ YN0000: Done in 0s 666ms ⠼ Processing template➤ YN0000: Successfully set nodeLinker to 'node-modules' ✔ Processing template ⠸ Installing dependencieserror Installing pods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install pods manually when running iOS, follow additional steps in "Run instructions for iOS" section. ✖ Installing dependencies info 💡 To enable automatic CocoaPods installation when building for iOS you can create react-native.config.js with automaticPodsInstallation field. For more details, see https://github.com/react-native-community/cli/blob/main/docs/projects.md#projectiosautomaticpodsinstallation ✔ Initializing Git repository Run instructions for Android: • Have an Android emulator running (quickest way to get started), or a device connected. • cd "/Users/xxx/React-Project/React-Native/MatzipApp" && npx react-native run-android Run instructions for iOS: • cd "/Users/sss/React-Project/React-Native/MatzipApp/ios" • Install Cocoapods • bundle install # you need to run this only once in your project. • bundle exec pod install • cd .. • npx react-native run-ios - or - • Open MatzipApp/ios/MatzipAppcd .xcodeproj in Xcode or run "xed -b ios" • Hit the Run button Run instructions for macOS: • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.이런 메시지가 뜨고 npm run start로 실행을 하면 command not found메시지가 뜨면서 애뮬레이터도 실행이 안됩니다.ㅠㅠ

안녕하세요.하단 탭 메뉴 중 즐겨찾기 탭으로 이동하여 FeedItem 선택 후 FeedDetail 화면으로 이동한 후 뒤로 가기를 누르면 즐겨찾기 탭 으로 가는게 아니라 FeedHome 탭으로 이동합니다.즐겨찾기탭으로 돌아가게 하려면 어떻게 해야 될까요. ❗질문 작성시 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.

현재 개발하는 환경이 13 버전인데임포트가 되지 않네요

안녕하세요 친절한 강의에 정말 감사드립니다^^ios앱 심사 정보 작성에 여쭤볼게 있는데요.심사 과정에 통과하려면 backend 배포가 된 상태여야 심사가 가능하니, backend 배포가 선행돼야 하는건가요?앱에 로그인할 수 있도록 사용자 이름 및 암호를 입력하십시오. 앱 심사를 완료하려면 로그인 정보가 필요합니다.

다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요.왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )