172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
리액트 쿼리의 suspense 스트리밍 기능 구현 중 버그가 발생해 인사이트를 얻고자 질문드립니다. 상위 컴포넌트에서 useInfiniteQuery 로 promise를 반환하고, 해당 promise를 자식 컴포넌트의 props로 넘긴 뒤 React의 use hook으로 감싸서 data를 반환하도록 구현했습니다. 그리고 promise를 throw하는 자식 컴포넌트를 Suspense로 감싸서 promise를 캐치하도록 했는데요. 페이지 렌더링 자체는 정상적으로 되는데, request가 완료되지 않는 문제가 있습니다. 크롬 개발자도구의 Network 탭에서 document를 확인하면 "Caution: request is not finished yet"이라는 경고가 표시됩니다. TanStack Query 공식 문서에도 useInfiniteQuery 의 promise 사용 시 "This can be used with React.use() to fetch data"라고 명시되어 있어 React use 와 함께 사용하라고 안내하고 있는데, 혹시 이 문제의 원인을 알 수 있을까요? 참고로 prefetch는 안했습니다. 그리고 prefetch 안하는 방법으로 suspense 스트리밍을 구현하고 싶습니다. 코드는 아래와 같습니다. 감사합니다! export default function DetailReviewWrapper({ pid, userId }: DetailReviewProps) { const { infoData, observerRef, isFetchingNextPage, refetch, promise } = useReviewListInfinity({ userId, pid, }) return ( <Suspense fallback={<DetailReviewLoading />}> <DetailReview pid={pid} userId={userId} promise={promise} refetch={refetch} isFetchingNextPage={isFetchingNextPage} observerRef={observerRef} /> </Suspense> ) } export default function DetailReview({ pid, userId, promise, refetch, isFetchingNextPage, observerRef, }: DetailReviewProps) { const data = use(promise) return ( <> <section> <ReviewListView userId={userId} pid={pid} data={data?.list || []} className={cn('review-list')} refetch={refetch} showPoint /> {isFetchingNextPage && <Loading />} <div ref={observerRef} /> </section> export function useReviewListInfinity(params: UseReviewListInfinityProps) { const section = useSearchParams().get('contentType') as SectionType const orderType = useRecoilValue(commentOrderState) const filterType = useRecoilValue(filterTypeState) const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch, promise } = useInfiniteQuery({ queryKey: [REVIEW_LIST_KEY, params, orderType, filterType, section], queryFn: ({ pageParam = 1 }) => getReviewApi({ uid: params.userId, pid: params.pid, section, pageInfo: { curPage: pageParam, pageSize: 20, }, orderType: orderType === 'RECOMMENDED' ? 'like' : 'date', filterType, }), select: (data) => { return { list: data.pages.flatMap((page) => page.data.list), info: data.pages[0].data.info, } }, getNextPageParam: (lastPage) => { const nextPage = lastPage.data.pageInfo.curPage + 1 return nextPage <= lastPage.data.pageInfo.pageCount ? nextPage : undefined }, initialPageParam: 1, }) const { observerRef } = useIntersectionObserver({ onScroll: () => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, }) return { isLoading, isFetchingNextPage, observerRef, refetch, promise, } } const getQueryClient = (): QueryClient => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchInterval: false, refetchOnReconnect: true, refetchOnMount: true, staleTime: Infinity, gcTime: Infinity, retry: false, experimental_prefetchInRender: true, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.
react next.js react-query next-auth msw
변재정
2025-11-05T00:43:56.088Z
댓글 1
좋아요 0
조회수 126
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
리액트 쿼리의 suspense 스트리밍 기능 구현 중 버그가 발생해 인사이트를 얻고자 질문드립니다. 상위 컴포넌트에서 useInfiniteQuery 로 promise를 반환하고, 해당 promise를 자식 컴포넌트의 props로 넘긴 뒤 React의 use hook으로 감싸서 data를 반환하도록 구현했습니다. 그리고 promise를 throw하는 자식 컴포넌트를 Suspense로 감싸서 promise를 캐치하도록 했는데요. 페이지 렌더링 자체는 정상적으로 되는데, request가 완료되지 않는 문제가 있습니다. 크롬 개발자도구의 Network 탭에서 document를 확인하면 "Caution: request is not finished yet"이라는 경고가 표시됩니다. TanStack Query 공식 문서에도 useInfiniteQuery 의 promise 사용 시 "This can be used with React.use() to fetch data"라고 명시되어 있어 React use 와 함께 사용하라고 안내하고 있는데, 혹시 이 문제의 원인을 알 수 있을까요? 참고로 prefetch는 안했습니다. 그리고 prefetch 안하는 방법으로 suspense 스트리밍을 구현하고 싶습니다. 코드는 아래와 같습니다. 감사합니다! export default function DetailReviewWrapper({ pid, userId }: DetailReviewProps) { const { observerRef, isFetchingNextPage, refetch, promise } = useReviewListInfinity({ userId, pid, }) return ( <Suspense fallback={<DetailReviewLoading />}> <DetailReview pid={pid} userId={userId} promise={promise} refetch={refetch} isFetchingNextPage={isFetchingNextPage} observerRef={observerRef} /> </Suspense> ) } export default function DetailReview({ pid, userId, promise, refetch, isFetchingNextPage, observerRef, }: DetailReviewProps) { const data = use(promise) return ( <> <section> <ReviewListView userId={userId} pid={pid} data={data?.list || []} className={cn('review-list')} refetch={refetch} showPoint /> {isFetchingNextPage && <Loading />} <div ref={observerRef} /> </section> export function useReviewListInfinity(params: UseReviewListInfinityProps) { const section = useSearchParams().get('contentType') as SectionType const orderType = useRecoilValue(commentOrderState) const filterType = useRecoilValue(filterTypeState) const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch, promise } = useInfiniteQuery({ queryKey: [REVIEW_LIST_KEY, params, orderType, filterType, section], queryFn: ({ pageParam = 1 }) => getReviewApi({ uid: params.userId, pid: params.pid, section, pageInfo: { curPage: pageParam, pageSize: 20, }, orderType: orderType === 'RECOMMENDED' ? 'like' : 'date', filterType, }), select: (data) => { return { list: data.pages.flatMap((page) => page.data.list), info: data.pages[0].data.info, } }, getNextPageParam: (lastPage) => { const nextPage = lastPage.data.pageInfo.curPage + 1 return nextPage <= lastPage.data.pageInfo.pageCount ? nextPage : undefined }, initialPageParam: 1, }) const { observerRef } = useIntersectionObserver({ onScroll: () => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, }) return { isLoading, isFetchingNextPage, observerRef, refetch, promise, } } const getQueryClient = (): QueryClient => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchInterval: false, refetchOnReconnect: true, refetchOnMount: true, staleTime: Infinity, gcTime: Infinity, retry: false, experimental_prefetchInRender: true, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.
변재정
2025-11-05T00:39:42.483Z
댓글 1
좋아요 0
조회수 82
미해결
맛집 지도앱 만들기 (React Native & NestJS)
invalidateQueries와 setQueryData 이전 강의 영상에서는 네트워크 요청을 최소화의 목적으로 setQueryData를 사용했는데 이번 강의 영상에서는 invalidateQueries를 사용한 이유가 있을까요? 단순히 궁금해서 입니다!
react-native typescript nestjs react-query zustand
oridori2705
2025-11-04T13:29:35.902Z
댓글 2
좋아요 0
조회수 116
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
react react-native 하이브리드-앱 typescript expo
이영훈
2025-11-04T03:09:04.626Z
댓글 2
좋아요 0
조회수 131
미해결
AI와 함께 배우는 Next.js
퀴즈에 1., 2. 이런 문자들이 있어서 보기가 조금 불편합니당 ..! 그래도 이해는 가능합니다 ..ㅎㅎ
javascript react next.js cursor 인공지능(ai)
Seoin
2025-11-03T09:14:58.059Z
댓글 1
좋아요 0
조회수 88
해결됨
[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
Cursor를 업데이트하고 기능을 확인하던 중에 Rules 말고도 Commands 라는 기능을 있는걸 봤어요. 설명을 읽어보고, 몇 번 실행해 보긴 했는데 Rules 를 배우고 적용해보는게 이번이 처음이라서 그런지 두 개가 비슷해보이고 차이점을 잘 모르겠네요. 제가 이해할 수 있는건 Rules는 코드를 바꿀 수 있고, Commands 바꿀 수 없다 정도인 것 같아요. Commands를 잘 쓰면 팀에서 쓰기도 좋을 것 같은데, 혹시 현재 쓰고 계신다면 라이브 강의에서 간단하게 라도 설명해주실 수 있나요? 아래는 Commands 관련 공식 링크 입니다: https://cursor.com/ko/docs/agent/chat/commands
react next.js cursor 프롬프트엔지니어링 바이브코딩
날래날래
2025-11-03T06:03:18.817Z
댓글 2
좋아요 0
조회수 142
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 좋은 강의로 Next.JS 수강을 마쳤습니다. 그런데 수업노트에 있는 강의 피드백 폼 링크가 엉뚱한 곳으로 연결 됩니다. https://forms.gle/MhvAagJvttQCtS1f6 링크 주소를 치고 들어가면 제대로 들어 접근하는데.. 링크를 클릭하면 다른 곳으로 연결됩니다. 수정이 필요합니다.
react typescript next.js 카카오공채-개발
Codingbear
2025-11-01T11:25:59.449Z
댓글 2
좋아요 0
조회수 68
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. next.js 16 버전으로 해당 강의를 보며 달리고 있는데요. revalidateTag 설정에서 파라미터 값이 하나 더 늘어나 있습니다. revalidateTag(tag: string, profile: string | { expire?: number }): void; tag 파라미터 뒤에 profile 파라미터를 넣어야 하네요. 기본적으로는 'max' 값을 넣었고, expire로 사용자 지정 만료 동작을 위한 값을 지정하게 되어 있습니다. 이것이 구체적으로 어떤 매개변수인지 궁금합니다. 그리고 이전의 tag 파라미터만 있을 경우 와 같은 조건의 매개변수 값은 어떻게 되는지 알고 싶습니다.
react typescript next.js 카카오공채-개발
Codingbear
2025-11-01T02:39:50.621Z
댓글 1
좋아요 0
조회수 109
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
💬 좋은 질문 예시 [진도] 1주차 5강 웹사이트 만들기 [질문] Lovable 에 자체 클라우드가 생기면서 supabase를 연동하기 힘들어 졌습니다. Lovable유료결제 까지 하면서 원인을 찾아보려고 했는데 일주일 동안 찾지 못 했습니다. 전에 같은 질문을 하신분의 답변에 다른 분의 영상을 봤는데도, 그것으로는 해결이 되지 않는 상황입니다. 아예 베이스가 없기 때문에 supabase가 뭔지도 모르는 상황이고 이 둘을 어떻게 연결해야 할지도 모르는 상황입니다. 현재 바뀐 상황을 들여다 본 후 답변 주셨으면 좋겠습니다. 혹은, supabase 연동 없이 Lovable 자체 클라우드를 활용해서 강의를 진행해도 괜찮을지 알려주시면 supabese 없이 Lovable 클라우드로 진행해 보겠습니다. 제가 변화에 대처하질 못하는 상황이지만, 항상 질 높은 강의 감사드립니다.
flutter next.js cursor supabase 바이브코딩
멘토폴메이커
2025-10-30T22:54:33.635Z
댓글 3
좋아요 0
조회수 279
해결됨
React Native with Expo: 제로초에게 제대로 배우기
혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?
react react-native 하이브리드-앱 typescript expo
hjjoo
2025-10-30T09:25:48.902Z
댓글 2
좋아요 0
조회수 96
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
react react-native 하이브리드-앱 typescript expo
이영훈
2025-10-30T06:42:04.806Z
댓글 1
좋아요 0
조회수 136
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 에러가 발생해서 질문드립니다. 경로는 아무리 봐도 맞게 쓴거 같은데 찾지를 못 합니다. Build Error Module not found: Can't resolve '@/app/(afterLogin)/_component/FollowRecommend' ./Desktop/FRONT/z-com/src/app/(afterLogin)/layout.tsx (10:1) Module not found: Can't resolve '@/app/(afterLogin)/_component/FollowRecommend' 8 | import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; 9 | import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; > 10 | import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 11 | 12 | export default function AfterLoginLayout({ children }: { children: ReactNode }) { 13 | return ( Import map: aliased to relative './src/app/(afterLogin)/_component/FollowRecommend' inside of [project]/Desktop/FRONT/z-com/src https://nextjs.org/docs/messages/module-not-found
react next.js react-query next-auth msw
김영제
2025-10-30T04:23:25.492Z
댓글 2
좋아요 0
조회수 147
미해결
맛집 지도앱 만들기 (React Native & NestJS)
강의를 다 듣지 않은 상태에서 빠르게 실행을 해보고 싶습니다. 서버 실행, 데이터베이스 연결 이런 건 잘 했는데 지도 라이브러리 다운 및 설정 등 일부 강의만 듣고 설정해서 실행하려고 하니 문제가 생기네요. 필요한 라이브러리 버전 등 실행에 필요한 정보가 한꺼번에 나와있는 글은 없나요? ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. (에러 일부만 자르거나 일부만 복사하지말아주세요 )
react-native typescript nestjs react-query zustand
batch sarm
2025-10-29T12:09:26.675Z
댓글 1
좋아요 0
조회수 109
미해결
맛집 지도앱 만들기 (React Native & NestJS)
강의를 11강 이후의 백엔드 구현 먼저 듣고 앞부분으로 돌아와도 문제가 있을까요? 수업이 구성된 방식이 궁금합니다.
react-native typescript nestjs react-query zustand
yeong
2025-10-29T02:41:35.948Z
댓글 1
좋아요 0
조회수 105
미해결
한 입 크기로 잘라먹는 Next.js
개인적으로 오픈 채팅방이나 카페는 별로 선호하지 않아서 혹시 안내된 디스코드 같은 경우에는 링크가 없을까요?
react typescript next.js 카카오공채-개발
yeong
2025-10-29T02:00:04.695Z
댓글 1
좋아요 0
조회수 46
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. layout 컴포넌트는 레이아웃 용도에 맞게 컴포넌트 함수명을 짓는데.. page 컴포넌트는 일관되게 Page 로 컴포넌트 명을 사용하는 이유가 있나요? page 컴포넌트도 IndexPage, SearchPage, BookDetailPage 식으로 의미를 부여했으면 합니다.
react typescript next.js 카카오공채-개발
Codingbear
2025-10-28T14:41:53.781Z
댓글 2
좋아요 1
조회수 102
해결됨
한 입 크기로 잘라먹는 Next.js
Next.js 에서 스타일 파일을 작성할 때 기존에 styles 폴더 안에 작성하지 않는 이유가 있나요? 처음 프로젝트 생성할 때 보면 styles 폴더에 module.css 파일이 존재하던데.. styles 폴더가 존재하는 이유는 globals.css 하나 땜인가요?
react typescript next.js 카카오공채-개발
Codingbear
2025-10-28T13:58:59.869Z
댓글 2
좋아요 0
조회수 92
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 한 입 크기로 잘라 먹는 Next.js 책을 구매하고 나서 해당 강의를 듣기 시작한 강생입니다. 책의 내용과 수강 내용을 병행하며 강의를 듣고 있습니다. 책 내용에서는 Next.js 15로 페이지 라우터 프로젝트를 생성하고 있어서... 이젠 15로 페이지 라우터 생성해도 되겠지요 아래는 책에서 지정한 명령어 npx create-next-app@15.2.3 onebite-books-page-router 강의에서 추천한 프로젝트 생성 명령어 npx create-next-app@14 section02
react typescript next.js 카카오공채-개발
Codingbear
2025-10-28T11:53:17.148Z
댓글 2
좋아요 0
조회수 109
미해결
AI와 함께 배우는 Next.js
안녕하세요 ! 수업자료 url이 연결되어있지 않은 것 같습니다 ~ 추천 플러그인 궁금하네요 ..!! 👀 👀
javascript react next.js cursor 인공지능(ai)
Seoin
2025-10-28T10:16:42.993Z
댓글 1
좋아요 0
조회수 80
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님 강의 잘 듣고 있습니다. 다름이 아니라, 강의를 들으면서 Ngrok를 설치 후forwarding Url로 크롬브라우저에서 치고 들어가면 , 아래와 같은 에러 가 떠서 어떻게 해결 해야 하는지 답변 을 듣고 싶어 글을 작성하게 되었습니다. 에러 화면은 아래와 같습니다. 추가적으로 위 사진하나로 해결 방법이 파악이 불가능하다면, 추가로 다른 어떤 것을 첨부해야 에러를 해결 할 수 있는 점이라면 , 저에게 어떤 스샷이 필요한지 말씀해주시면, 다시 스샷 올려서 질문을 이어나가겠습니다. 답변 꼭 주시면 감사하겠습니다.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
isbcom1004
2025-10-28T09:27:40.985Z
댓글 1
좋아요 0
조회수 171
