묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
22강 SSG 실습할 때에 build를 하려고하니 img 태그때문인지 에러가 납니다
사용되지 않은 props나 img태그로인해 에러문구가 뜨면서 빌드가 되지 않는데코드를 봐도 정환님 강의에서도 img 태그를 그대로 쓰고계신데 왜 저는 에러가 나는걸까요? 추가적으로 eslint 경고가 있으면 빌드가 안되는 것으로 알고있는데 어떻게 빌드해야하나요?
-
미해결Next + React Query로 SNS 서비스 만들기
깃에 소스코드를 찾을 수 없습니다.
36강을 보고 소스코드를 가져오려고 하는데 깃에 src/app/(beforeLogin)/@modal/(.)i/flow/signup/page.tsx파일을 업데이트하려고하는데 깃에는 강의와 다른 코드가 올라와있습니다.3-1 코드에도 그렇고 완성 코드도 <난 가로채기지롱> 이 코드만 나와있는데 어디서 찾을 수 있나요?
-
해결됨[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
커서룰을 종종 찾지 못하는 경우
안녕하세요. 강사님. 다름이 아니라 1)커서룰을 종종 커서가 찾지 못하는 경우가 발생해서 매번 커맨드 창에 직접 @으로 명시를 해주는 상황이 발생됩니다. 프롬프트 문장에 조건 커서룰) @01-common.mdc 명시된 이 부분을 찾지 못하더라구요.2)추가로 프롬프트 파일 화면 우클릭 후 new Chat 하면 해당 파일을 참조로 물고가면 좋겠는데 강의와는 다르게 참조가 누락되어 이것도 매번 드래그해서 참조를 걸어줍니다. 그에 대한 강사님만에 팁이 있을까요?
-
해결됨[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
프롬프트를 실행 시키면 md 파일로 만들어지는데
안녕하세요. 다름이 아니라 프롬프트를 실행 할 경우매번 md 파일로 만들어져서 루트 디렉토리에 쌓이게 되더라구요. 이게 많아지면서 뭔가 자꾸 컨텍스트를 들고 가는지 요구사항을 제대로 못지키는 현상이 발생되는 것 같아 md-files를 만들고 옮겨두었더니 이젠 거기에 md 파일을 생성합니다. 이럴 경우 컨텍스트가 늘어나 원하는 프롬프트 요구사항을 제대로 이행하지 못하는게 맞을까요? 강사님이라면 해당 md 파일 생성은 하지말라는 프롬프트를 추가하셨을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
리액트 쿼리의 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, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.
-
미해결Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
리액트 쿼리의 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, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.
-
미해결AI와 함께 배우는 Next.js
퀴즈 질문에 불필요한 문자들이 있어요
퀴즈에 1., 2. 이런 문자들이 있어서 보기가 조금 불편합니당 ..! 그래도 이해는 가능합니다 ..ㅎㅎ
-
해결됨[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
Rules와 Commands의 차이가 뭘까요?
Cursor를 업데이트하고 기능을 확인하던 중에 Rules 말고도 Commands 라는 기능을 있는걸 봤어요. 설명을 읽어보고, 몇 번 실행해 보긴 했는데 Rules 를 배우고 적용해보는게 이번이 처음이라서 그런지 두 개가 비슷해보이고 차이점을 잘 모르겠네요. 제가 이해할 수 있는건 Rules는 코드를 바꿀 수 있고, Commands 바꿀 수 없다 정도인 것 같아요. Commands를 잘 쓰면 팀에서 쓰기도 좋을 것 같은데, 혹시 현재 쓰고 계신다면 라이브 강의에서 간단하게 라도 설명해주실 수 있나요? 아래는 Commands 관련 공식 링크 입니다:https://cursor.com/ko/docs/agent/chat/commands
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Next.js 마치며.. 강의 피드백 폼 링크 연결 문제가 있습니다.
안녕하세요. 좋은 강의로 Next.JS 수강을 마쳤습니다.그런데 수업노트에 있는 강의 피드백 폼 링크가 엉뚱한 곳으로 연결 됩니다. https://forms.gle/MhvAagJvttQCtS1f6 링크 주소를 치고 들어가면 제대로 들어 접근하는데..링크를 클릭하면 다른 곳으로 연결됩니다. 수정이 필요합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
revalidateTag 에서 매개 변수가 하나 더 늘어서 질문합니다.
안녕하세요. next.js 16 버전으로 해당 강의를 보며 달리고 있는데요.revalidateTag 설정에서 파라미터 값이 하나 더 늘어나 있습니다.revalidateTag(tag: string, profile: string | { expire?: number }): void; tag 파라미터 뒤에 profile 파라미터를 넣어야 하네요.기본적으로는 'max' 값을 넣었고, expire로 사용자 지정 만료 동작을 위한 값을 지정하게 되어 있습니다.이것이 구체적으로 어떤 매개변수인지 궁금합니다.그리고 이전의 tag 파라미터만 있을 경우 와 같은 조건의 매개변수 값은 어떻게 되는지 알고 싶습니다.
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
Lovabe - supabese 연동이 노베이스 비개발자에겐 너무 어렵습니다.
💬 좋은 질문 예시[진도] 1주차 5강 웹사이트 만들기[질문] Lovable 에 자체 클라우드가 생기면서 supabase를 연동하기 힘들어 졌습니다.Lovable유료결제 까지 하면서 원인을 찾아보려고 했는데 일주일 동안 찾지 못 했습니다.전에 같은 질문을 하신분의 답변에 다른 분의 영상을 봤는데도, 그것으로는 해결이 되지 않는 상황입니다.아예 베이스가 없기 때문에 supabase가 뭔지도 모르는 상황이고 이 둘을 어떻게 연결해야 할지도 모르는 상황입니다. 현재 바뀐 상황을 들여다 본 후 답변 주셨으면 좋겠습니다.혹은, supabase 연동 없이 Lovable 자체 클라우드를 활용해서 강의를 진행해도 괜찮을지 알려주시면 supabese 없이 Lovable 클라우드로 진행해 보겠습니다.제가 변화에 대처하질 못하는 상황이지만, 항상 질 높은 강의 감사드립니다.
-
미해결Next + React Query로 SNS 서비스 만들기
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
안녕하세요. 에러가 발생해서 질문드립니다.경로는 아무리 봐도 맞게 쓴거 같은데 찾지를 못 합니다.Build ErrorModule 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
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
수강생 디스코드 커뮤니티 관련 질문
개인적으로 오픈 채팅방이나 카페는 별로 선호하지 않아서 혹시 안내된 디스코드 같은 경우에는 링크가 없을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
page 컴포넌트명을 동일하게 Page 로 짓는 이유가 있나요?
안녕하세요. layout 컴포넌트는 레이아웃 용도에 맞게 컴포넌트 함수명을 짓는데..page 컴포넌트는 일관되게 Page 로 컴포넌트 명을 사용하는 이유가 있나요?page 컴포넌트도 IndexPage, SearchPage, BookDetailPage 식으로 의미를 부여했으면 합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
별도의 CSS 파일을 styles 폴더에 작성하면 안되나요?
Next.js 에서 스타일 파일을 작성할 때 기존에 styles 폴더 안에 작성하지 않는 이유가 있나요? 처음 프로젝트 생성할 때 보면 styles 폴더에 module.css 파일이 존재하던데.. styles 폴더가 존재하는 이유는 globals.css 하나 땜인가요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
페이지 라우터 프로젝트 생성을 버전 15로 하여도 되나요?
안녕하세요!한 입 크기로 잘라 먹는 Next.js 책을 구매하고 나서 해당 강의를 듣기 시작한 강생입니다.책의 내용과 수강 내용을 병행하며 강의를 듣고 있습니다.책 내용에서는 Next.js 15로 페이지 라우터 프로젝트를 생성하고 있어서... 이젠 15로 페이지 라우터 생성해도 되겠지요아래는 책에서 지정한 명령어npx create-next-app@15.2.3 onebite-books-page-router 강의에서 추천한 프로젝트 생성 명령어npx create-next-app@14 section02
-
미해결AI와 함께 배우는 Next.js
8강 수업자료 url 없음
안녕하세요 !수업자료 url이 연결되어있지 않은 것 같습니다 ~추천 플러그인 궁금하네요 ..!! 👀👀
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
고농축 백엔드와 완벽한 프론트 강의 차이?
고농축 백엔드 코스의 첫 부분과 완벽한 프론트엔드 첫 부분이 겹치는 부분이 많은거 같은데, 둘 중 하나만 들어두될까요? 아니면 다른 부분이 있으니 들어야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
example 서버 플레이그라운드, API 접속 모두 안됩니다.
2025.10.27. 16:44분 기준 example 서버의 플레이그라운드 접속과 API 접근 모두 안됩니다. 확인 부탁드립니다.
-
해결됨웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
강의자료는 어디에 있나요?
강의자료는 어디에 있나요?[02-05] 헤더 옵션 심화 하는데 이미지 첨부하는 자료또는 강의에서 진행하는 소스코드를 어디서 받을 수 있는지 알려주세요.