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
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
Int x = 25는 아무것도 아닌건가요? 부모에서 5가 가는게 이해 안됩니다.
김장호
2025-11-04T17:38:01.720Z
댓글 2
좋아요 0
조회수 79
해결됨
38군데 합격 비법, 2026 코딩테스트 필수 알고리즘
안녕하세요, 현재 DFS 관련하여 내용을 수강하고 있습니다. (39강. DFS & BFS) 깊이 탐색인 알고리즘인 DFS를 처음엔 재귀로 접근하셨다가 RecursionError 의 이유로 스택을 사용하셨는데요, 스택을 생각하게 된 생각의 흐름(?) 을 잡아보고싶어 질문을 드리게되었습니다. (나중에 코테 연습 때 대비가 될까하여 더 고민을 해보는 것인데, 시간대비 효율이 나지않는다면 말씀해주세요 ㅎㅎ) 일단 제가 이해한 흐름은 여기까지입니다. DFS는 깊이 우선 탐색 깊이 파고들었다가 다시 나오고 반복 그래프의 끝까지 깊이 파고들었다가 , 방문하지 않는 노드를 방문하기 위해 나중에 다시 돌아갈 "기준점" 이 필요하게 될 것임 그렇다면 이전에 어디까지 방문했는지 기록 을 해놓아야함 어떻게 해야 기록을 더 효율적으로 할 수 있을까? 하지만 여기서 스택을 사용해야겠다고 생각이 들게 되는 이유를 찾고 싶습니다 ㅎㅎ 알고리즘을 잘하시는 분들 보시면 이런 부분은 큐를 써야겠고, 스택을 써야겠다 라고 바로 생각을 하시는데, 저로서는 왜 이게 바로 스택을 써야한다고 생각이 드는지 이해가 되질 않아서요 혹여 이전에 강의때 설명하신 부분이라면 죄송합니다..ㅎㅎ
python 코딩-테스트 알고리즘 data-structure
깡패 햄스터
2025-11-04T14:20:30.519Z
댓글 3
좋아요 1
조회수 246
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
저는 저 부분을 아래와 같이 for문 안에 if구문으로 처리 하고 싶었는데... if구절에서 i 값을 찍어보면 처음 값만 데이터 그대로 나오고.. 그 담부턴 어뚱한 값이 나오네요.. 뭘 잘못한걸까요? ㅠㅠ mean_2001 = df.iloc[1].mean() print(mean_2001) #print(df.iloc[1]) #cond = df.iloc[1] > mean_2001 #sum(cond) for i in list2001: if i > mean_2001: print(i)
python 머신러닝 빅데이터 pandas 빅데이터분석기사
김지혜_남는건 사진이였어
2025-11-04T14:16:12.394Z
댓글 2
좋아요 0
조회수 54
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
위와 같이 에러가 나네요. ㅠ..ㅠ OpenAI에 물어보니 Add Option에서 Add Option Manually나 Expression Editor에 들어가서 q {{ $json.chatInput }} 입력하고 Execute Step을 다시 눌러보면 된다고 하는데... Add Option에 해당 메뉴가 아예 없습니다. ^^+ Q&A를 찾아보니 해당 게시글이 몇 개 있는데... 당췌 무슨 말인지 잘 모르겠어요. ㅠ..ㅠ step by step으로 화면 캡쳐해서 해결 방법을 좀 보여주시면 안될까요? 이제4강인데... 벌써 포기할 수는 없어요. 부탁드려요~
n8n 인공지능(ai) rag ai-활용-(ax) ai-agent 카카오공채-개발 카카오공채-서비스
이강택
2025-11-04T13:38:29.565Z
댓글 5
좋아요 3
조회수 220
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
1번 문제 코드를 짜보았는데 결과 값이 조금 다른 것 같아서 질문 드립니다 import pandas as pd df = pd.read_csv("https://raw.githubusercontent.com/lovedlim/inf/refs/heads/main/p1/members.csv") df.nlargest(10, 'views') m=df.loc[21,'views'] df.iloc[:10,-1]=m cond=df['age']>=80 df[cond]['views'].mean()
python 머신러닝 빅데이터 pandas 빅데이터분석기사
99ethan
2025-11-04T13:37:02.186Z
댓글 2
좋아요 0
조회수 48
해결됨
1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)
영상처럼 curl -X POST로 시작하는 명령어가 아닌, 다른 명령어가 나오는 거 같습니다. 어떤 점이 문제일까요? 포트는 3001으로 수정된 상태입니다.
react typescript tailwindcss nextjs chatgpt
forever1542
2025-11-04T12:00:58.768Z
댓글 3
좋아요 0
조회수 152
미해결
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
제목과 같이, 로지스틱 회귀 내용에 대한 코드는 없나요? 삭제된것일지 궁금합니다. 필수적으로 들어야하나요?
python 머신러닝 빅데이터 pandas 빅데이터분석기사
personal_92
2025-11-04T11:04:07.035Z
댓글 3
좋아요 0
조회수 105
미해결
1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)
안녕하세요 클론 코딩 인강을 듣고 있는 대학생입니다. 다름이 아니라, 제목처럼 localhost 사이트에 접속하는 것이 제한되어 이렇게 문의드립니다. 위와 같이 연결할 수 없다는 에러가 발생하여 이에 대한 해결방법이 궁금합니다! 우선 현재 사용중인 랩탑의 프록시 설정 및 방화벽은 별도로 활성화하고 있지 않습니다.
react typescript tailwindcss nextjs chatgpt
forever1542
2025-11-04T10:45:34.117Z
댓글 1
좋아요 0
조회수 576
해결됨
코딩테스트 [ ALL IN ONE ]
어제 노션 공유를 부탁드렸는데 아직 안와서 다시 공유 요청 드렸습니다 노션 공유 부탁드려요! 혹시 제가 잘못 요청해서 못 받은거라면 알려주세요
2 하품2
2025-11-04T08:55:25.910Z
댓글 2
좋아요 1
조회수 131
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
prev->next = curr->next 해석이 curr->next 값을 prev->next에 넣으라는 뜻이 아닌가용??? 4->3 = 3->2 2와 3위치를 바꾸는게 아닌가요...? 원래 뒤에거를 앞에 덮어쓰는게 아닌가요..? 너무 헷갈리네요 ㅠㅠ
조찬희
2025-11-04T08:50:37.038Z
댓글 2
좋아요 0
조회수 39
미해결
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
이런식으로 코드를 진행 했는데 결과가 문자로 안나오고 숫자로 나오는데 혹시 원핫인코딩을 하지 않고 레이블 인코딩을 진행해서 그런건가요??
python 머신러닝 빅데이터 pandas 빅데이터분석기사
이윤성
2025-11-04T07:12:30.702Z
댓글 2
좋아요 0
조회수 57
미해결
Spring AI 실전 가이드: RAG 챗봇 만들기
https://platform.openai.com/docs/guides/error-codes/api-errors 여기서 할당량 초과 에러 코드라는데, ChatGpt plus 구독중인데 따로 결제를 해야되는건가요?
spring spring-boot llm rag spring-ai
ewgregerg c
2025-11-04T06:21:39.369Z
댓글 1
좋아요 0
조회수 136
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
시간대 8:09에서 정적메서드 static에 의해 Type을 명시한다고 했는데 자식에만 Static이 있을 수 있나요? 아니면 부모에만 Static이 있을 시 그래도 값이 같은 지 궁금합니다.
jkkim406
2025-11-04T03:34:37.137Z
댓글 2
좋아요 0
조회수 56
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
react react-native 하이브리드-앱 typescript expo
이영훈
2025-11-04T03:09:04.626Z
댓글 2
좋아요 0
조회수 131
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
맥 사용자는 Homebrew, MacPorts, Binary Installer 중에 어떤걸 설치해야하나요? Gemini 왈 Binary 라는데 확인부탁드립니다 .
n8n 인공지능(ai) rag ai-활용-(ax) ai-agent 카카오공채-개발 카카오공채-서비스
김서연 Seoyeon Kim
2025-11-04T02:48:16.038Z
댓글 2
좋아요 0
조회수 118
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
부모 기본 생성자 출력 관련하여 질문. 예를 들어, B 테슬라 = new B //자식 호출 위와 같이 메인 구문에서 있을 때 부모 기본 생성자 X, 자식 기본 생성자 O 부모 기본 생성자 O, 자식 기본 생성자 X 1번과 2번에 대한 출력이 어떻게 되는지 궁금합니다.
dhkdxo12
2025-11-04T00:49:54.274Z
댓글 2
좋아요 0
조회수 64
해결됨
RAG를 활용한 LLM Application 개발 (feat. LangChain)
안녕하십니까! 강병진 강사님! 강의를 수강하고 인터뷰도 보면서 많은 에너지와 영향을 받았습니다. 정말 감사드립니다! 강병진님의 langchain강의 커리큘럼에서 n8n을 제외하고 모두 수강하였습니다. 덕분에 RAG를 어떻게 구성하고 어떤식으로 정확도를 향상시킬 수 있는지도 배웠습니다. 다름이 아니라 저는 현재 대학교 3학년으로써 프로젝트를 진행하고 싶은데 강병진님 같은 훌륭하신 선배 개발자님께서 좋게 보실 만한 프로젝트가 어떤 프로젝트인지 조언을 구하고 싶습니다. 단순 챗봇을 구현해보기에는 기업에서 이러한 것이 많이 중요할까? 라는 걱정도 있습니다. 기업에서는 어떤식으로 RAG를 사용하고 원하는 경험이 무엇일까 궁금합니다. 저는 실무에서 RAG를 어떤식으로 사용하는지도 잘 모르고 선배님들께서 이러한 기술로 어떤 업무들을 하시는지도 잘 모릅니다. 그래서 어떤 방향성으로 준비해야 할지 잘 모르겠습니다. 만약 강병진님께서 같이 일할 주니어를 뽑으신다면 어떤 프로젝트 경험이 있는 주니어를 뽑으실 지 가능하신다면 조언 한번만 부탁드리고 싶습니다! 현재 사용할 수 있는 기술은 알려주신 langchain관련 기술과 fastapi로 백엔드 구현이 가능합니다. 도메인마다 원하는 방향성이 다르겠지만 프로젝트 기획하는 단계로써 좋은 출발을 하고 싶어서 질문드립니다! 계신 시간대로 저녁일거라 예상되는데 좋은 저녁 보내시길 바랍니다ㅎㅎ 감사합니다!
vector-database llm langchain rag openai-api 카카오공채-개발
Jh P
2025-11-04T00:28:33.439Z
댓글 1
좋아요 0
조회수 85
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
public string name = "Parent"; public string name = "Child"; 이렇게 되어있는데 static이 들어가 있어야 하지 않나요? 또한, 인스턴스 변수일 때 메서드가 아닌 변수도 오버라이딩이 되나요?
dbndus0024
2025-11-03T19:13:55.420Z
댓글 2
좋아요 0
조회수 72
