inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

claude에 hook 적용안되는 문제

해결됨

The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Claude에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 1-7강에서 hook을 배우고 있는데 window 환경에서 cursor를 이용해서 선생님 수업 따라가는 중에 전달자료대로 세팅을 해도 claude가 setting.json을 일고 실행한 뒤에 실행 되는 게 아니고 그냥 hook 자체가 적용이 안되는데 이 문제에 대한 해결 방법을 알려주시면 감사드리겠습니다

  • spring-boot
  • next.js
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
terry8987 댓글 3 좋아요 0 조회수 214

15버전 이후의 (searchParams,Params) Promise타입 명시후 리액트 서스펜스 실습 질문

해결됨

한 입 크기로 잘라먹는 Next.js

6.3강의 3분29초~ 쯤의 서스펜스 실습을 위한 async키워드를 제거하는 과정에서 입니다. 이전부터 강의를 좀 따라오다가 버전이 많이 업그레이드 되어 5챕터? 쯤이였을까요 params를 이용해 데이터패칭을 해오던때였던거 같습니다만 타입오류가 나서 챗지피티, Q&A등 을 보며 Promise타입을 붙여주고 수정하여 첫번째 사진과 같이 사용하고 있었습니다. 6.3강의부터 비동기작업을 수행하지않도록 async 키워드를 제거하기 위해 분리작업도중 일어난 고민입니다. 두번째 사진처럼 수정을 하였습니다만 여기서 Page컴퍼넌트의 async 키워드를 를 뗄수있는가? 에 대해 고민을 좀했는데 챗지피티에게선 async 키워드가 있어도 서스펜스 실습엔 문제가 없다고해서 그냥 두번째 사진과 같이 작성한후에 서스펜스 실습을 따라가면 될지가 의문스러워 질문남깁니다. 추가로 버전업이 많이되어 영상과 다른점을 수정하면서 하고있는데 제가 올바른 방향으로 실습하고 있는지도 조금 궁금합니다!

  • react
  • typescript
  • next.js
  • 카카오공채-개발
상상 댓글 3 좋아요 2 조회수 200

스미더리와 피그마 페이지에 들어가보면 cursor-talk-to 피그마가 나오지 않아요.

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

업데이트가 되었는지 스미더리와 피그마 페이지에 들어가보면 cursor-talk-to 피그마가 나오지 않습니다. 피그마 연결 업데이트 부분부터 진행을 못하고 있습니다..ㅠㅜ

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
jyno1.lee 댓글 2 좋아요 0 조회수 137

22강 SSG 실습할 때에 build를 하려고하니 img 태그때문인지 에러가 납니다

해결됨

한 입 크기로 잘라먹는 Next.js

사용되지 않은 props나 img태그로인해 에러문구가 뜨면서 빌드가 되지 않는데 코드를 봐도 정환님 강의에서도 img 태그를 그대로 쓰고계신데 왜 저는 에러가 나는걸까요? 추가적으로 eslint 경고가 있으면 빌드가 안되는 것으로 알고있는데 어떻게 빌드해야하나요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
귀한 불도새 댓글 2 좋아요 0 조회수 97

깃에 소스코드를 찾을 수 없습니다.

미해결

Next + React Query로 SNS 서비스 만들기

36강을 보고 소스코드를 가져오려고 하는데 깃에 src/app/(beforeLogin)/@modal/(.)i/flow/signup/page.tsx 파일을 업데이트하려고하는데 깃에는 강의와 다른 코드가 올라와있습니다. 3-1 코드에도 그렇고 완성 코드도 <난 가로채기지롱> 이 코드만 나와있는데 어디서 찾을 수 있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김영제 댓글 2 좋아요 0 조회수 147

커서룰을 종종 찾지 못하는 경우

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

안녕하세요. 강사님. 다름이 아니라 1)커서룰을 종종 커서가 찾지 못하는 경우가 발생해서 매번 커맨드 창에 직접 @으로 명시를 해주는 상황이 발생됩니다. 프롬프트 문장에 조건 커서룰) @01-common.mdc 명시된 이 부분을 찾지 못하더라구요. 2)추가로 프롬프트 파일 화면 우클릭 후 new Chat 하면 해당 파일을 참조로 물고가면 좋겠는데 강의와는 다르게 참조가 누락되어 이것도 매번 드래그해서 참조를 걸어줍니다. 그에 대한 강사님만에 팁이 있을까요?

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
이동규 댓글 2 좋아요 0 조회수 120

프롬프트를 실행 시키면 md 파일로 만들어지는데

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

안녕하세요. 다름이 아니라 프롬프트를 실행 할 경우 매번 md 파일로 만들어져서 루트 디렉토리에 쌓이게 되더라구요. 이게 많아지면서 뭔가 자꾸 컨텍스트를 들고 가는지 요구사항을 제대로 못지키는 현상이 발생되는 것 같아 md-files를 만들고 옮겨두었더니 이젠 거기에 md 파일을 생성합니다. 이럴 경우 컨텍스트가 늘어나 원하는 프롬프트 요구사항을 제대로 이행하지 못하는게 맞을까요? 강사님이라면 해당 md 파일 생성은 하지말라는 프롬프트를 추가하셨을까요?

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
이동규 댓글 2 좋아요 0 조회수 249

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

미해결

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
변재정 댓글 1 좋아요 0 조회수 121

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

미해결

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, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.

  • react
  • typescript
  • next.js
변재정 댓글 1 좋아요 0 조회수 81

퀴즈 질문에 불필요한 문자들이 있어요

미해결

AI와 함께 배우는 Next.js

퀴즈에 1., 2. 이런 문자들이 있어서 보기가 조금 불편합니당 ..! 그래도 이해는 가능합니다 ..ㅎㅎ

  • javascript
  • react
  • next.js
  • cursor
  • 인공지능(ai)
Seoin 댓글 1 좋아요 0 조회수 87

Rules와 Commands의 차이가 뭘까요?

해결됨

[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
  • 프롬프트엔지니어링
  • 바이브코딩
날래날래 댓글 2 좋아요 0 조회수 138

Next.js 마치며.. 강의 피드백 폼 링크 연결 문제가 있습니다.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 좋은 강의로 Next.JS 수강을 마쳤습니다. 그런데 수업노트에 있는 강의 피드백 폼 링크가 엉뚱한 곳으로 연결 됩니다. https://forms.gle/MhvAagJvttQCtS1f6 링크 주소를 치고 들어가면 제대로 들어 접근하는데.. 링크를 클릭하면 다른 곳으로 연결됩니다. 수정이 필요합니다.

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Codingbear 댓글 2 좋아요 0 조회수 67

revalidateTag 에서 매개 변수가 하나 더 늘어서 질문합니다.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. next.js 16 버전으로 해당 강의를 보며 달리고 있는데요. revalidateTag 설정에서 파라미터 값이 하나 더 늘어나 있습니다. revalidateTag(tag: string, profile: string | { expire?: number }): void; tag 파라미터 뒤에 profile 파라미터를 넣어야 하네요. 기본적으로는 'max' 값을 넣었고, expire로 사용자 지정 만료 동작을 위한 값을 지정하게 되어 있습니다. 이것이 구체적으로 어떤 매개변수인지 궁금합니다. 그리고 이전의 tag 파라미터만 있을 경우 와 같은 조건의 매개변수 값은 어떻게 되는지 알고 싶습니다.

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Codingbear 댓글 1 좋아요 0 조회수 109

Lovabe - supabese 연동이 노베이스 비개발자에겐 너무 어렵습니다.

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

💬 좋은 질문 예시 [진도] 1주차 5강 웹사이트 만들기 [질문] Lovable 에 자체 클라우드가 생기면서 supabase를 연동하기 힘들어 졌습니다. Lovable유료결제 까지 하면서 원인을 찾아보려고 했는데 일주일 동안 찾지 못 했습니다. 전에 같은 질문을 하신분의 답변에 다른 분의 영상을 봤는데도, 그것으로는 해결이 되지 않는 상황입니다. 아예 베이스가 없기 때문에 supabase가 뭔지도 모르는 상황이고 이 둘을 어떻게 연결해야 할지도 모르는 상황입니다. 현재 바뀐 상황을 들여다 본 후 답변 주셨으면 좋겠습니다. 혹은, supabase 연동 없이 Lovable 자체 클라우드를 활용해서 강의를 진행해도 괜찮을지 알려주시면 supabese 없이 Lovable 클라우드로 진행해 보겠습니다. 제가 변화에 대처하질 못하는 상황이지만, 항상 질 높은 강의 감사드립니다.

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
멘토폴메이커 댓글 3 좋아요 0 조회수 279

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

미해결

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
김영제 댓글 2 좋아요 0 조회수 144

수강생 디스코드 커뮤니티 관련 질문

미해결

한 입 크기로 잘라먹는 Next.js

개인적으로 오픈 채팅방이나 카페는 별로 선호하지 않아서 혹시 안내된 디스코드 같은 경우에는 링크가 없을까요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
yeong 댓글 1 좋아요 0 조회수 46

page 컴포넌트명을 동일하게 Page 로 짓는 이유가 있나요?

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. layout 컴포넌트는 레이아웃 용도에 맞게 컴포넌트 함수명을 짓는데.. page 컴포넌트는 일관되게 Page 로 컴포넌트 명을 사용하는 이유가 있나요? page 컴포넌트도 IndexPage, SearchPage, BookDetailPage 식으로 의미를 부여했으면 합니다.

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Codingbear 댓글 2 좋아요 1 조회수 101

별도의 CSS 파일을 styles 폴더에 작성하면 안되나요?

해결됨

한 입 크기로 잘라먹는 Next.js

Next.js 에서 스타일 파일을 작성할 때 기존에 styles 폴더 안에 작성하지 않는 이유가 있나요? 처음 프로젝트 생성할 때 보면 styles 폴더에 module.css 파일이 존재하던데.. styles 폴더가 존재하는 이유는 globals.css 하나 땜인가요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Codingbear 댓글 2 좋아요 0 조회수 86

페이지 라우터 프로젝트 생성을 버전 15로 하여도 되나요?

해결됨

한 입 크기로 잘라먹는 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 댓글 2 좋아요 0 조회수 107

8강 수업자료 url 없음

미해결

AI와 함께 배우는 Next.js

안녕하세요 ! 수업자료 url이 연결되어있지 않은 것 같습니다 ~ 추천 플러그인 궁금하네요 ..!! 👀 👀

  • javascript
  • react
  • next.js
  • cursor
  • 인공지능(ai)
Seoin 댓글 1 좋아요 0 조회수 79

인기 태그

인프런 TOP Writers

주간 인기글