안녕하세요, 아래 ISR에 대해서 질문드렸었는데, nextjs 에서 2가지 구현 방법이있다고 해서두가지가 어떤 차이점이 있고 어떻게 활용하는게 좋을지 궁금해서 질문드립니다!1번 방법 = fetch API 의 revlidate를 활용하여 ISR 구현import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default async function ProductPage () { const queryClient = getQueryClient(); await queryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(queryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) }import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 10 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } }'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={true} /> </QueryClientProvider> ) } export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const data = await res.json(); const currentTime = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3, hour12: false, }); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; }2번 방법 = export const revalidate 로 시간 설정 후 fetch로 받은 data 값을 바로 렌더링 시키기 import Product from "@/component/Product"; import styles from '@/component/ProductList.module.css'; import Image from "next/image"; export const revalidate = 10; export default async function Product2Page() { const data = await fetch('/api/products'); const products = await data.json(); console.log(revalidate, 'Product2Page'); return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <div className={styles.productList}> {products.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> </section> </> ) } 2개다 ISR로 구현되며, 1번 방법은 Data Cache 캐싱 매커니즘을 활용하고,2번 방법은 Full Router Cache 캐싱 매커니즘을 활용한다의 차이점으로 생각이 드는데,이 외에 다른 차이점과 실제 개발을 하면서 선호되는 방식이 따로 있을까요? 해당 페이지만 보았을때는 2번 방법으로 해도 어차피 주기적으로 다시 생성해서 최신 데이터를 반영하면 복잡하게 react-query를 사용하고, Hydration을 하면서 데이터를 동기화할 필요가 있나 싶어서 어떻게 사용해야할지 감이 안잡히네여

강의 중 빨간줄이 떠서 문의드립니다.빌드도 정상으로 되는데 저기 빨간줄은 왜 계속 떠있는거죠?  

// src/components/TanstackQueryOption.ts import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 15 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } }// src/components/TanstackQueryProvider.tsx 'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} /> </QueryClientProvider> ) } // src/app/layout.tsx import Banner from "@/component/Banner"; import Footer from "@/component/Footer"; import Header from "@/component/Header"; import TanstackQueryProvider from "@/component/TanstackQueryProvider"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "@/app/global.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <TanstackQueryProvider> <div className='container'> <Banner/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); } // src/app/page.tsx import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default function Page () { const newQueryClient = getQueryClient(); newQueryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(newQueryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) }; 'use client' // src/components/ProductList.tsx import Product from "@/component/Product"; import { getProducts } from "@/fetch/getProducts"; import { useQuery, useSuspenseQuery } from "@tanstack/react-query"; import styles from "@/component/ProductList.module.css"; export const ProductList = () => { const {data, isLoading, isFetching} = useSuspenseQuery({queryKey: ['products'], queryFn: getProducts}); console.log(`isLoading: ${isLoading}, isFetching: ${isFetching}`) return ( <div className={styles.productList}> {data?.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> ) }; export default ProductList;// src/components/Product.tsx import Link from "next/link"; import Image from "next/image"; export const Product = ({product} : any) => { return ( <Link href={`/product/${product.item_no}`} prefetch> <Image src={product.detail_image_url} alt={product.item_name} width={500} height={300} /> <h3>{product.item_name}</h3> <span>{product.price}</span> </Link> ) } export default Product;// src/app/product/[id]/page.tsx export default function ProductDetailPage() { return ( <> 상품 상세페에지 </> ) }// src/fetch/getProducts.ts export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const currentTime = new Date().toLocaleTimeString(); const data = await res.json(); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; }// src/server/server.js import express from "express"; import cors from "cors"; const app = express(); const port = 9090; app.use(cors()); app.use(express.json()); app.get("/api/products", (req, res) => { const currentTime = new Date().toLocaleTimeString(); console.log(`Received request at ${currentTime}`); const products = [ { item_no: 122997, item_name: '상품 1', detail_image_url: 'https://picsum.photos/id/237/500/500', price: 75000, }, { item_no: 768848, item_name: '상품 2', detail_image_url: 'https://picsum.photos/id/238/500/500', price: 42000, }, { item_no: 552913, item_name: '상품 3', detail_image_url: 'https://picsum.photos/id/239/500/500', price: 240000, }, // { // item_no: 1045738, // item_name: '상품 4', // detail_image_url: // 'https://picsum.photos/id/240/500/500', // price: 65000, // }, ]; res.json(products); }); app.listen(port, () => console.log('Server is running')); 안녕하세요, fetch와 tanstackQuery를 사용해서 ISR 동작을 테스트하고있었습니다.테스트 마다 .next 파일은 지우고 새로 build 하여 run start를 통하여 확인하였습니다.staleTime과 revalidate 의 시간이 서로 상이한데, 동일하게 설정했을때, 시간의 간격을 두었을때의 차이점을 직접 확인하려고 하였는데 어떤점에서 차이가 나는지 보고도 이해가 안가서 질문드립니다.궁금점 1. staleTime과 revalidate 는 gcTime 처럼 staleTime이 revalidate보다 적은 시간으로 설정을 해야하는지? 그렇다면 그 이유는 gcTime보다 작게 설정하는 이유와 같은지? 가 궁금합니다.2. server.js에 주석처리해놓은 item을 다시 주석을 해지하면 처음 revaildate의 10초 설정으로 인해새로고침을해도 아이템은 계속 페이지에서 3개만 노출되고있고, 상품을 클릭해서 이동을 하면서staleTime의 설정인 15초가 되었을때는 client 요청이 발생하여 아이템이 4개로 잘 노출되고있습니다.하지만 이 때 새로고침을 하게되면 처음 fetch revalidate로 cache되어있던 데이터인 아이템 3개까지만 노출이 되고 새로고침을 한번 더 진행해야 그때서야 4개로 노출이되는데 클라이언트와 서버 쪽이 서로 싱크가 안맞는거같은데 이러한 문제점이 왜 일어나는지 이해가 잘안됩니다!3. 확장된 fetch와 tanstackQuery를 어떻게 분리해서 사용해야할까도 많이 고민이 되는데.. queryFn 에 이미 fetch로 만들어둔 함수를 가져와 사용하니 분리라는 개념을 생각하면 안되는걸까요? fetch를 독립적으로 사용하는 경우도있다고하는데 이 경우는 왜 독립적으로 사용하는지 잘모르겠습니다.

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다.) m1 맥iosNode : 20.10.0ruby : 3.1.0 - 2.7.6 버전으로 다운받고 실행했을때 cocoapods가 현재는 2.7.6버전이 아닌 3.1.0버전 이상이 필요하다하여 사용했습니다.cd ios rm -rf Pods rm -rf Podfile.lock pod install위 명령어를 사용해서 pod도 재설치 한 뒤 xcode로 실행해도 빌드가 되지 않습니다.xcode에서는 아래와같은 오류가 나옵니다.Command PhaseScriptExecution failed with a nonzero exit code vscode에서는 아래와 같이 나옵니다.info Opening the app on iOS...info Found Xcode workspace "MatzipApp_01.xcworkspace"info No booted devices or simulators found. Launching first available simulator...info Launching iPhone SE (3rd generation) (iOS 18.0)info Building (using "xcodebuild -workspace MatzipApp_01.xcworkspace -configuration Debug -scheme MatzipApp_01 -destination id=675A0CA6-486F-4EF1-A232-AAC4D04C438D")info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctorCommand line invocation:/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace MatzipApp_01.xcworkspace -configuration Debug -scheme MatzipApp_01 -destination id=675A0CA6-486F-4EF1-A232-AAC4D04C438DUser defaults from command line:IDEPackageSupportUseBuiltinSCM = YESPrepare packagesComputeTargetDependencyGraphnote: Building targets in dependency ordernote: Target dependency graph (56 targets)Target 'MatzipApp_01' in project 'MatzipApp_01'➜ Implicit dependency on target 'Pods-MatzipApp_01' in project 'Pods' via file 'libPods-MatzipApp_01.a' in build phase 'Link Binary'➜ Implicit dependency on target 'CocoaAsyncSocket' in project 'Pods' via options '-lCocoaAsyncSocket' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'DoubleConversion' in project 'Pods' via options '-lDoubleConversion' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'Flipper' in project 'Pods' via options '-lFlipper' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'Flipper-Boost-iOSX' in project 'Pods' via options '-lFlipper-Boost-iOSX' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'Flipper-Fmt' in project 'Pods' via options '-lFlipper-Fmt' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'Flipper-Folly' in project 'Pods' via options '-lFlipper-Folly' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'Flipper-PeerTalk' in project 'Pods' via options '-lFlipper-PeerTalk' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'FlipperKit' in project 'Pods' via options '-lFlipperKit' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'RCT-Folly' in project 'Pods' via options '-lRCT-Folly' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'RCTTypeSafety' in project 'Pods' via options '-lRCTTypeSafety' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-Codegen' in project 'Pods' via options '-lReact-Codegen' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-Core' in project 'Pods' via options '-lReact-Core' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-CoreModules' in project 'Pods' via options '-lReact-CoreModules' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-NativeModulesApple' in project 'Pods' via options '-lReact-NativeModulesApple' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTAnimation' in project 'Pods' via options '-lReact-RCTAnimation' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTAppDelegate' in project 'Pods' via options '-lReact-RCTAppDelegate' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTBlob' in project 'Pods' via options '-lReact-RCTBlob' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTImage' in project 'Pods' via options '-lReact-RCTImage' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTLinking' in project 'Pods' via options '-lReact-RCTLinking' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTNetwork' in project 'Pods' via options '-lReact-RCTNetwork' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTSettings' in project 'Pods' via options '-lReact-RCTSettings' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTText' in project 'Pods' via options '-lReact-RCTText' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-RCTVibration' in project 'Pods' via options '-lReact-RCTVibration' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-cxxreact' in project 'Pods' via options '-lReact-cxxreact' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-debug' in project 'Pods' via options '-lReact-debug' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-hermes' in project 'Pods' via options '-lReact-hermes' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-jsi' in project 'Pods' via options '-lReact-jsi' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-jsiexecutor' in project 'Pods' via options '-lReact-jsiexecutor' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-jsinspector' in project 'Pods' via options '-lReact-jsinspector' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-logger' in project 'Pods' via options '-lReact-logger' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-perflogger' in project 'Pods' via options '-lReact-perflogger' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-runtimescheduler' in project 'Pods' via options '-lReact-runtimescheduler' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'React-utils' in project 'Pods' via options '-lReact-utils' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'ReactCommon' in project 'Pods' via options '-lReactCommon' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'SocketRocket' in project 'Pods' via options '-lSocketRocket' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'Yoga' in project 'Pods' via options '-lYoga' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'YogaKit' in project 'Pods' via options '-lYogaKit' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'fmt' in project 'Pods' via options '-lfmt' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'glog' in project 'Pods' via options '-lglog' in build setting 'OTHER_LDFLAGS'➜ Implicit dependency on target 'libevent' in project 'Pods' via options '-llibevent' in build setting 'OTHER_LDFLAGS'Target 'Pods-MatzipApp_01' in project 'Pods'➜ Explicit dependency on target 'CocoaAsyncSocket' in project 'Pods'➜ Explicit dependency on target 'DoubleConversion' in project 'Pods'➜ Explicit dependency on target 'FBLazyVector' in project 'Pods'➜ Explicit dependency on target 'FBReactNativeSpec' in project 'Pods'➜ Explicit dependency on target 'Flipper' in project 'Pods'➜ Explicit dependency on target 'Flipper-Boost-iOSX' in project 'Pods'➜ Explicit dependency on target 'Flipper-DoubleConversion' in project 'Pods'➜ Explicit dependency on target 'Flipper-Fmt' in project 'Pods'➜ Explicit dependency on target 'Flipper-Folly' in project 'Pods'➜ Explicit dependency on target 'Flipper-Glog' in project 'Pods'➜ Explicit dependency on target 'Flipper-PeerTalk' in project 'Pods'➜ Explicit dependency on target 'FlipperKit' in project 'Pods'➜ Explicit dependency on target 'OpenSSL-Universal' in project 'Pods'➜ Explicit dependency on target 'RCT-Folly' in project 'Pods'➜ Explicit dependency on target 'RCTRequired' in project 'Pods'➜ Explicit dependency on target 'RCTTypeSafety' in project 'Pods'➜ Explicit dependency on target 'React' in project 'Pods'➜ Explicit dependency on target 'React-Codegen' in project 'Pods'➜ Explicit dependency on target 'React-Core' in project 'Pods'➜ Explicit dependency on target 'React-CoreModules' in project 'Pods'➜ Explicit dependency on target 'React-NativeModulesApple' in project 'Pods'➜ Explicit dependency on target 'React-RCTActionSheet' in project 'Pods'➜ Explicit dependency on target 'React-RCTAnimation' in project 'Pods'➜ Explicit dependency on target 'React-RCTAppDelegate' in project 'Pods'➜ Explicit dependency on target 'React-RCTBlob' in project 'Pods' 

강의 내용 내에서의 질문입니다.23:54에서 콘솔에 isComback이 4회가 찍히는 이유가 뭔가요?

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다.)  안녕하세요! 강의 너무 잘 듣고 있습니다. 만들면서 따라가다 보니 에러가 나거나 하지는 않았지만 궁금한 점이 생겨서 질문남깁니다. 이번 강의에서 ScoreInput 컴포넌트에 전달하는 onChangeScore 함수로 handleChangeScore 를 정의해서 넘기셨는데, 사실 이 함수가 하는 일은 현재 setScore를 하는 것 뿐이라 그냥 setScore 함수를 넘겨도 되지 않는지 의문이 들어서요. 혹여 그렇게 했을 경우 문제가 되거나 하는 부분이 있다면 말씀 부탁드립니다. 감사합니다!

로그인하고 홈 메인페이지에서 새로고침하면 오류 뜹니다PostForm.tsx쪽 TextAreaAutosize 라이브러리 이 부분 주석하면 에러 안뜨는데 라이브러리 문제인지 제가 잘못한건지 모르겠습니다 key값 없다고 하는데 TrendSection.tsx에 {data?.map((trend) => ( <Trend trend={trend} key={trend.tagId} /> ))}여기 trend.tagId에서 tagId를 못찾는거 같은데 백엔드 문제인가요???타입스크립트 Hashtag에 tagId: number 있어요

안녕하세요 강사님!AOS에서는 로그아웃 후 로그인하면 마커들이 보이지만IOS에서는 로그인하면 마커들이 보이지 않습니다..그런데 앱을 종료했다가 다시 실행하면 마커들이 다시 보입니다..어디가 문제인지 도저히 찾지를 못하겠습니다..ㅠㅠ혹시 몰라서 깃헙 주소 전달드립니다ㅠㅠ감사합니다.. https://github.com/KMSKang/react

npm run start // 이후 i 입력 후 IOS 시뮬레이터 실행위 명령어를 실행하면 yarn run v1.22.19$ react-native start ▒▒▓▓▓▓▒▒ ▒▓▓▓▒▒░░▒▒▓▓▓▒ ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒ ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓ ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓ ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓ ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓ ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓ ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓ ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒ ▒▓▓▓▒░░░░▒▓▓▓▒ ▒▒▓▓▓▓▒▒ Welcome to Metro v0.76.8 Fast - Scalable - Integratedr - reload the appd - open developer menui - run on iOSa - run on Androidinfo Opening the app on iOS...info Found Xcode workspace "kobeReactNative.xcworkspace"info No booted devices or simulators found. Launching first available simulator...info Launching iPhone SE (3rd generation) (iOS 18.0)info Building (using "xcodebuild -workspace kobeReactNative.xcworkspace -configuration Debug -scheme kobeReactNative -destination id=A9D1DDD6-6FB9-4912-B4F1-048775538E64")info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor Command line invocation: /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace kobeReactNative.xcworkspace -configuration Debug -scheme kobeReactNative -destination id=A9D1DDD6-6FB9-4912-B4F1-048775538E64User defaults from command line: IDEPackageSupportUseBuiltinSCM = YESPrepare packagesComputeTargetDependencyGraphnote: Building targets in dependency ordernote: Target dependency graph (56 targets) Target 'kobeReactNative' in project 'kobeReactNative' ➜ Implicit dependency on target 'Pods-kobeReactNative' in project 'Pods' via file 'libPods-kobeReactNative.a' in build phase 'Link Binary' ➜ Implicit dependency on target 'CocoaAsyncSocket' in project 'Pods' via options '-lCocoaAsyncSocket' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'DoubleConversion' in project 'Pods' via options '-lDoubleConversion' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper' in project 'Pods' via options '-lFlipper' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-Boost-iOSX' in project 'Pods' via options '-lFlipper-Boost-iOSX' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-Fmt' in project 'Pods' via options '-lFlipper-Fmt' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-Folly' in project 'Pods' via options '-lFlipper-Folly' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Flipper-PeerTalk' in project 'Pods' via options '-lFlipper-PeerTalk' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'FlipperKit' in project 'Pods' via options '-lFlipperKit' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'RCT-Folly' in project 'Pods' via options '-lRCT-Folly' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'RCTTypeSafety' in project 'Pods' via options '-lRCTTypeSafety' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-Codegen' in project 'Pods' via options '-lReact-Codegen' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-Core' in project 'Pods' via options '-lReact-Core' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-CoreModules' in project 'Pods' via options '-lReact-CoreModules' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-NativeModulesApple' in project 'Pods' via options '-lReact-NativeModulesApple' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTAnimation' in project 'Pods' via options '-lReact-RCTAnimation' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTAppDelegate' in project 'Pods' via options '-lReact-RCTAppDelegate' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTBlob' in project 'Pods' via options '-lReact-RCTBlob' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTImage' in project 'Pods' via options '-lReact-RCTImage' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTLinking' in project 'Pods' via options '-lReact-RCTLinking' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTNetwork' in project 'Pods' via options '-lReact-RCTNetwork' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTSettings' in project 'Pods' via options '-lReact-RCTSettings' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTText' in project 'Pods' via options '-lReact-RCTText' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-RCTVibration' in project 'Pods' via options '-lReact-RCTVibration' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-cxxreact' in project 'Pods' via options '-lReact-cxxreact' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-debug' in project 'Pods' via options '-lReact-debug' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-hermes' in project 'Pods' via options '-lReact-hermes' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-jsi' in project 'Pods' via options '-lReact-jsi' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-jsiexecutor' in project 'Pods' via options '-lReact-jsiexecutor' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-jsinspector' in project 'Pods' via options '-lReact-jsinspector' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-logger' in project 'Pods' via options '-lReact-logger' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-perflogger' in project 'Pods' via options '-lReact-perflogger' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-runtimescheduler' in project 'Pods' via options '-lReact-runtimescheduler' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'React-utils' in project 'Pods' via options '-lReact-utils' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'ReactCommon' in project 'Pods' via options '-lReactCommon' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'SocketRocket' in project 'Pods' via options '-lSocketRocket' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'Yoga' in project 'Pods' via options '-lYoga' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'YogaKit' in project 'Pods' via options '-lYogaKit' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'fmt' in project 'Pods' via options '-lfmt' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'glog' in project 'Pods' via options '-lglog' in build setting 'OTHER_LDFLAGS' ➜ Implicit dependency on target 'libevent' in project 'Pods' via options '-llibevent' in build setting 'OTHER_LDFLAGS' Target 'Pods-kobeReactNative' in project 'Pods' ➜ Explicit dependency on target 'CocoaAsyncSocket' in project 'Pods' ➜ Explicit dependency on target 'DoubleConversion' in project 'Pods' ➜ Explicit dependency on target 'FBLazyVector' in project 'Pods' ➜ Explicit dependency on target 'FBReactNativeSpec' in project 'Pods' ➜ Explicit dependency on target 'Flipper' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Boost-iOSX' in project 'Pods' ➜ Explicit dependency on target 'Flipper-DoubleConversion' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Fmt' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Folly' in project 'Pods' ➜ Explicit dependency on target 'Flipper-Glog' in project 'Pods' ➜ Explicit dependency on target 'Flipper-PeerTalk' in project 'Pods' ➜ Explicit dependency on target 'FlipperKit' in project 'Pods' ➜ Explicit dependency on target 'OpenSSL-Universal' in project 'Pods' ➜ Explicit dependency on target 'RCT-Folly' in project 'Pods' ➜ Explicit dependency on target 'RCTRequired' in project 'Pods' ➜ Explicit dependency on target 'RCTTypeSafety' in project 'Pods' ➜ Explicit dependency on target 'React' in project 'Pods' ➜ Explicit dependency on target 'React-Codegen' in project 'Pods' ➜ Explicit dependency on target 'React-Core' in project 'Pods' ➜ Explicit dependency on target 'React-CoreModules' in project 'Pods' ➜ Explicit dependency on target 'React-NativeModulesApple' in project 'Pods' ➜ Explicit dependency on target 'React-RCTActionSheet' in project 'Pods' ➜ Explicit dependency on target 'React-RCTAnimation' in project 'Pods' ➜ Explicit dependency on target 'React-RCTAppDelegate' in project 'Pods' ➜ Explicit dependency on target 'React-RCTBlob' i이런 로그에서 멈춰서 더 이상 진행이 안되는데, 뭐가 문제인지 도저히 감이 잡히질 않네요 ㅠ

안녕하세요! 강의 잘 듣고있습니다.강의를 듣던 중 cannot be used as it is not authorized 라는 오류가 떠서 찾아봤는데 supabase에서 SMTP설정이 필수적으로 정책이 변경된 것 같아요.

안녕하세요 강의를 듣는중 추가적으로 tanstack-query를 공부하다가 혼자서 도저히 이해를 할수 없는 부분이 있어서 이 부분에 대해 혹시 조언을 받을수 있을까 싶어 문의드립니다. prefetchQuery가 개인적으로 잘 이해가 안되어서 별도로 프로젝트를 생성하여 기본적인 것부터 다시 공부하고 있었습니다만, tanstack-query 공식사이트에서 권장하던 방법대로 임의적으로 코드를 생성하였더니 router.push()로 다른 페이지에 갔다가(->홈으로[/]) 다시 돌아오는것(->Post페이지(/post))을 반복하다보면 가끔 서버 컴포넌트에 있는 prefetchQuery안의 fetch와 클라이언트 컴포넌트에 있는 useQuery의 fetch가 동시에 실행이 되는 일이 가끔 발생을 해서요. fetch가 이중으로 실행이 되고 있는것 같은데 아무리 코드를 살펴봐도 제가 잘못한 부분을 찾을수가 없어서 조언을 구합니다ㅠ page.tsximport { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; import Post from './_component/Post'; import getPostRecommends from './_hook/fetch'; export default async function tanstackQuery() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <Post /> </HydrationBoundary> ); } post.tsx'use client'; import { useQuery } from '@tanstack/react-query'; import getPostRecommends from '../_hook/fetch'; import { useRouter } from 'next/navigation'; export default function TanstackQuery() { const { data } = useQuery({ queryKey: ['movies'], queryFn: getPostRecommends, }); const router = useRouter(); type PostItem = { id: number; title: string; }; return ( <div> <button onClick={() => router.push('/')}>홈으로</button> {data?.map((item: PostItem) => { return ( <div key={item.id}> <h2>{item.title}</h2> </div> ); })} {data?.message} </div> ); } getPostRecommendsexport default async function getPostRecommends() { if (typeof window === 'undefined') { console.log('서버에서 fetch 실행' + new Date()); } else { console.log('클라이언트에서 fetch 실행' + new Date()); } const response = await fetch('https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10', { cache: 'no-store', }); if (!response.ok) { throw new Error('Failed to fetch data'); } const res = await response.json(); return res; } 기본 provider 설정'use client'; import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactNode } from 'react'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 6 * 1000, }, }, }); } type Props = { children: ReactNode }; let browserQueryClient: QueryClient | undefined = undefined; function getQueryClient() { if (isServer) { return makeQueryClient(); } else { if (!browserQueryClient) browserQueryClient = makeQueryClient(); return browserQueryClient; } } export default function Providers({ children }: Props) { const queryClient = getQueryClient(); return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools /> </QueryClientProvider> ); }  서버 콘솔 브라우저 콘솔 위에 캡쳐화면 같이 fetch가 거의 동시간에 발생을 하고 있는 모습입니다. next.js router cache 때문에 30초마다 서버 컴포넌트쪽이 리랜더링 되어서 페이지를 새로고침을 하지 않고 router.push로 다시 페이지에 들어가도 서버 컴포넌트쪽이 다시 실행된다는건 이해를 했는데, 그렇다면 초기 랜더링할때와 똑같이 데이터가 prefetch되어서 클라이언트쪽 useQuery가 실행이 되지 않아야하지 않나요? 왜 두번이나 fetch가 도는건지 아무리 자료를 찾아봐도 잘 모르겠어서 결국 문의드리게 되었습니다ㅠ

npx react-native@0.72.6 init MatzipApp으로 프로젝트 생성시에 위 그림과 같은 에러가 발생합니다. ㅠㅠ 에러내용(error Couldn't find the "/var/folders/gc/vtr7g1756tq9m2vjzb7qtc7c0000gn/T/rncli-init-template-0bHa5c/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template.info Run CLI with --verbose flag for more details.)  어떻게 해결해야 할까요?

안녕하세요 강사님아래 과정에서 강사님 화면의 인증서라는 버튼이 보이지 않습니다.혹시 유료 멤버십을 가입해야만 애플로그인 과정을 진행할 수 있는걸까요?   

npx react-native run-ios 로 실행하는 것이 아닌Xcode에서 build 실행하셔야 적용됩니다!! 

[섹션4-4 클라이언트 컴포넌트에서 ServerActions 사용하기]제가 사용하고있는 라이브러리 버전입니다. "next": "^15.0.0-canary.181", "next-auth": "^5.0.0-beta.22", "react": "^18", "react-dom": "^18" useFormState현재 공식문서에선 useFormState from 'react-dom'이 아닌 useActionState from 'react` 로 사용하도록 되어있더라구요. 그래서 해당 변경사항대로 사용해도 문제가 없을지 궁금합니다. useFormStatus공식문서를 읽어보는데 "useFormStatus는 동일한 컴포넌트에서 렌더링한 <form>에 대한 상태 정보를 반환하지 않습니다."라고 명시가 되어있더라구요. 그런데 현재 제로초님의 코드는 동일한 컴포넌트의 form에 대해서 pending 값을 받고 있는데, 문제가 발생하지 않는 이유에 대해서 궁금합니다.

안녕하세요 강사님!날짜를 선택하면 아이폰에서는 원형으로 나오는데 안드로이드에서는 정사각형으로 나옵니다ㅠㅠ 

 BUILD FAILEDThe following build commands failed:CompileC /Users/gyeongdeok/Library/Developer/Xcode/DerivedData/matzip-ggkhtgdnrjngpwgdmpbaaurtozob/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FlipperKit.build/Objects-normal/x86_64/FlipperPlatformWebSocket.o /Users/gyeongdeok/Documents/01.git/matzip/client/ios/Pods/FlipperKit/iOS/FlipperKit/FlipperPlatformWebSocket.mm normal x86_64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'FlipperKit' from project 'Pods')Building workspace matzip with scheme matzip and configuration Debug(2 failures)]npx react-native run-ios를 실행시키면 어마어마하게 긴 에러가 쭉 나오고 끝에 build failed라고 뜨는데 뭐 찾아보니 flipper쪽 문제라는데... flipper 코드를 없애거나 여러 방법을 해봤는데 잘 안되네요...시뮬레이터는 잘 켜집니다.. 컴퓨터는 인텔맥입니다..

OS : Mac Os M3node -v : v22.9.0npm -v : 10.8.3watchman 2024.10.07.00 is already installed and up-to-date. 안녕하세요, 프로젝트 init 이후에 npm start를 하는데 첨부한 사진과 같은 오류가 발생합니다.watchman도 install 했는데 왜 이런 오류가 생기는지 해결방법을 못찾겠습니다.구글링을 다 해봤는데 다들 똑같이 install watchman이라는 답변만 나오네요

실제 시뮬레이터로, 테스트할 때는 앱이 정상적으로 동작하나, 베타 테스터를 할 수 있는 링크를 통해 앱을 설치해서 실행시키면은 스플래시 스크린에서 앱이 멈추는 현상이 발생합니다.스플래시 스크린 관련 부분은, 강사님 강의를 그대로 참고했는데, 혹시 버전 관련해서 문제가 발생하는게 있을까요?? 해결하고자하는데 잘 안되서, 이런 경우에 어떤식으로, 에러를 핸들링하는지 알고싶습니다!

안녕하세요!저는 fetch를 사용하지않고 axios를 사용해봤는데요!서버에서 prefetch한 데이터가 초기에 useQuery에 값이 없는 이슈가 있어서 디깅을 해보다가 ReactQueryProvider에서 선언한 queryClient와 Home.tsx에서 선언한 queryClient가 달라 캐시한 값을 가져오지 못한다고 생각하는데 혹시 맞을까요? "use client"; import { useState } from "react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { isProduction } from "@/app-src/shared/env"; export const ReactQueryProvider = ({ children }: React.PropsWithChildren) => { const [queryClient] = useState( () => new QueryClient({ defaultOptions: { queries: { staleTime: Infinity, gcTime: Infinity, }, }, }) ); return ( <QueryClientProvider client={queryClient}> {children} {!isProduction && <ReactQueryDevtools initialIsOpen={false} />} </QueryClientProvider> ); }; import { PostIndex } from "@/app-src/post/[slug]"; import { API_PATH } from "@/app-src/shared/apis"; import { getPost } from "@/app-src/shared/apis/post/get-post"; import { dehydrate, HydrationBoundary, QueryClient, } from "@tanstack/react-query"; const PostPage = async ({ params }: { params: { slug: string } }) => { const { slug } = params; const queryClient = new QueryClient(); // 서버에서 미리 데이터를 패칭 await queryClient.prefetchQuery({ queryKey: [API_PATH.POST(slug)], queryFn: () => getPost(slug), }); const a = queryClient.getQueryData([API_PATH.POST(slug)]); console.log(a, "a"); // 데이터 직렬화 const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <PostIndex /> </HydrationBoundary> ); }; export default PostPage;"use client"; import { API_PATH } from "@/app-src/shared/apis"; import { getPost } from "@/app-src/shared/apis/post/get-post"; import { useQuery } from "@tanstack/react-query"; import { useParams } from "next/navigation"; export const PostIndex = () => { const { slug } = useParams<{ slug: string }>(); const { data } = useQuery({ queryKey: [API_PATH.POST(slug)], queryFn: () => getPost(slug), }); // 초기에 없음 -> 패칭 -> 있음 console.log(data, "data"); return ( <div> <div>{data?.title}</div> </div> ); };만약 제가 생각한게 맞다면 어떻게 해결해야할까요?