inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache

해결됨

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

안녕하세요. 수업을 듣다가 알려주신 거랑 다르게 동작하는 것 같아 질문드립니다. 5.2 풀라우트 캐시2 스크립트 기준 10:09 "자, 이런 Fetch 메서드는 자동으로 No Store 옵션을 갖는다고 말씀을 드렸죠?" -> 그래서 예상한 결과값은 dynamic page를 예상했는데 static page로 나오는 것 같습니다 npm run build를 했을 때 cache 옵션을 안 준 경우 const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`) Route (app) Size First Load JS ┌ ○ / 288 B 106 kB 이렇게 static page로 나오고 cache 옵션 no-store로 준 경우 Route (app) Size First Load JS ┌ ƒ / 288 B 106 kB 이렇게 dynamic page로 나와서 next 공식 문서를 찾아보니 https://nextjs.org/docs/15/app/api-reference/functions/fetch auto no cache (default): Next.js fetches the resource from the remote server on every request in development, but will fetch once during next build because the route will be statically prerendered. If Dynamic APIs are detected on the route, Next.js will fetch the resource on every request. 이렇게 build 때는 static 이라고 해서 질문이 생겼습니다. 어떤 블로그에서는 또 브라우저마다 다르게 동작한다고 해서 헷갈립니다..! 답변 주시면 감사드리겠습니다.

  • react
  • typescript
  • next.js
박주연 댓글 2 좋아요 1 조회수 125

21강 이미지 출력이 안됩니다.

미해결

Next.js with Spring Boot

http://localhost:8080/s_uuid_filename.webp으로 브라우저에서는 이미지가 잘 출력되는데, 개발환경에서 next.js 서버 실행하고 http://localhost:3000/product/catalog/1 로 접속하면 이미지가 안 보입니다. F12로 Network탭에서 이미지가 상태코드 400이 뜹니다. next.config.mjs 파일에 remotePatterns 설정 되었어요. next.jsx 터미널창에 로그는 아래와 같습니다. GET /product/catalog/1 200 in 1251ms (compile: 1206ms, render: 45ms) ⨯ upstream image http://localhost:8080/s_ uuid_filename9 .webp resolved to private ip ["::1","127.0.0.1"] ⨯ upstream image http://localhost:8080/s_ uuid_filename8 .webp resolved to private ip ["::1","127.0.0.1"] ⨯ upstream image http://localhost:8080/s_ uuid_filename 7.webp resolved to private ip ["::1","127.0.0.1"] ⨯ upstream image http://localhost:8080/s_ uuid_filename 6.webp resolved to private ip ["::1","127.0.0.1"] GPT에게 물어보니 /** @type {import('next').NextConfig} */ const nextConfig = { images: { unoptimized: true, // ← Next.js 이미지 최적화 끔 }, }; export default nextConfig; 최적화를 끄라고하는데, 이미지 최적화를 끄면 이미지는 나오지만 이미지 최적화 하면서 이미지가 나오게 할 수 있는 방법 있을까요? 현재 설치된 next.js 버전은 16.0.8입니다. 수업은 next.js 15버전인가요?

  • next.js
red0808 댓글 1 좋아요 0 조회수 135

download as zip 윈도우에서 어디있나요?

해결됨

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

2-3강 듣는 중에 교재 위치 2-3 9) 이거 저만 안보이는 것일까요? 흑흑,, 윈도우 사용중인데 이게 어디있는지 모르겠습니다. 지피티한테 물어봐도 모르겠어서 질문드려요 현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 📚 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 🎯 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 📸 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 🔍 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 💪 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 🤖 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 📞 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 💡 💬 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
하이조만장자 댓글 2 좋아요 0 조회수 50

한 섹션 내 token 사용량에 대한 질문

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

클로드 pro price 사용중입니다. 이번 과제를 진행하면서 초기화없이 한 섹션?(이 단위를 부르는 명칭을 잘 모르겠네요)에서 진행을 했는데, 약 5~6번의 수정을 거치니 토큰 사용량(current session)이 한도에 도달해버리네요. 미션 템플릿에 따라 처음 plan 요청 후에는, accept edit 모드로 간단하다고 생각되는 수정 사항을 요청했습니다. 수정 내용으로는 1. 블랙+옐로우의 어두운 컬러감 말고 main, secondary 컬러 다시 정해서 밝은 테마, 다채로운 컬러 사용해서 수정해줘 2. 경력 섹션에 카드 형식말고 아코디언 형식의 타임라인 형태로 수정해줘 이런 식으로 두가지 정도씩해서 4~5번 수정사항을 요청했습니다. 매 수정 때마다 거의 10분을 잡아먹드라구요 중간에 clear가 없었던 탓일까요? 토큰 사용 속도가 너무 빠른데. 만약 그렇다면 clear를 중간 중간에 해주면 사용량이 줄어들까요?

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
깅우 댓글 1 좋아요 0 조회수 304

1-7 hooks 강의에서 질문 있습니다.

해결됨

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

환경 OS: Window 10.0.19045.6466 - WLS 2.6.2.0 - Ubuntu 24.04 Ide: Cursor node : v25.2.1 claude code : v2.0.62 안녕하세요. 1-7 강의 중 질문 사항이 있어서 글 작성 하였습니다. 첫번째 질문은 사소한 것인데 강의에서는 claude --debug 사용 시 claude chat과 동일한 terminal 창에서 debug log가 나타납니다. 근데 제가 위 명령어를 통해 claude를 실행 한 경우에는 별도의 txt 파일을 생성하여 해당 파일에서 로그를 별도로 확인 해야 됩니다. 제가 실습하는 환경에서는 강의 처럼 디버깅 로그를 확인하는 것이 가능할까요? 관련 내용을 gpt나 antropic 공식자료 등을 확인해 보았으나 따로 공식적인 문서는 없는 것 같습니다. 두번째 질문은 dispatcher 훅 패턴 질문입니다. 현상을 먼저 말하자면 SessionStart hook을 명시 할 때는 PreToolUse hook 도 실행 되는데 SessionStart hook을 명시하지 않으면 PreToolUse hook도 실행 되지 않습니다. 강의자료에는 다른 hook 없이 PreToolUse hook만 settings.json에 입력 하도록 되어있었는데 실제로 .env파일을 읽어와서 로깅을 보았을 때 PreToolUse로 찾기를 했을 때 존재하지 않았고 SessionStart hook을 명시할 때는 PreToolUse로 찾기를 했을 때 존재하였습니다. { "hooks": { "SessionStart": [ { "hooks": [ { "type": "command", "command": "echo '✅ 의존성 설치 완료'", "timeout": 300 } ] } ], "PreToolUse": [ { "matcher": "*", "hooks": [ { "type": "command", "command": "node .claude/hooks/dispatcher.js" } ] } ] } } PreToolUse 가 작동함 { "hooks": { "PreToolUse": [ { "matcher": "*", "hooks": [ { "type": "command", "command": "node .claude/hooks/dispatcher.js" } ] } ] } } PreToolUse 가 작동하지 않음 질문글 길이가 제한이 있어서 디버깅 로그는 gpt에서 차이를 대조한 결과 사진으로 첨부합니다. 문제해결은 되었으나 왜 SessionStart를 명시하지 않으면 PreToolUse hook을 찾지 못하는 원인이 무엇인지 의문이 들어서 질문 드립니다.

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

진도표 질문

해결됨

한입 챌린지 7기 - Next.js

안녕하세요. 기입된 진도표에 따라 강의를 들으려고 하는데, 실제 Next.js 커리큘럼과 진도표에 표기된 해당 강의랑 맞지 않아 헷갈립니다 ..! 섹션 몇으로 적어둔 것은 무시하고 해당되는 내용 찾아서 들으면 되는건가요 ?

  • next.js
yanna 댓글 1 좋아요 0 조회수 83

백엔드 prisma 연결

미해결

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

백엔드서버 세팅할때 prisma db push 무한로딩걸립니다. 경로 패스워드 제대로 입력했는데, 오류가 뜨지도않고 성공을 하지도 않고 무한정 대기하고있습니다..

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

API 주소

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

하이브리드앱 api는 어디서 볼 수 있나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
최수빈 댓글 1 좋아요 0 조회수 111

/clear 한 뒤에 클로드 코드에게 다음 작업을 이어가게 할 때는 보통 어떻게 요청하시나요?

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

/clear 를 한 뒤에 클로드 코드에게 다음 작업을 이어가게 할 때는 보통 어떻게 요청하시나요? 예를 들어, “ CLAUDE.md 파일을 참고해서 다음 단계(결제 기능)을 만들어줘”라고 요청하시는 편인지 궁금합니다!

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
soPP 댓글 1 좋아요 0 조회수 434

"[UPDATED] 클로드 코드 초기 설정" 문의

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

클로드 코드 계정 연결하기 시도시, 클로드 코드 웹사이트에서 아래와 같은 문구가 뜨네요. 클로드 코드에 계정을 연결하려면 최소 claude pro 유료 구독을 해야 할까요? Claude Code에 연결하려면 Claude Max 또는 Pro가 필요합니다

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
댓글 2 좋아요 0 조회수 392

Window 환경에서의 Hooks 적용 에러문제

해결됨

4주 완성! 10x AI 네이티브 개발자 챌린지

안녕하세요 현재 PreToolUse, PostToolUse 사용 시 제대로 적용이 안되는 문제가 발생하여 질문드립니다. node -v : v22.16.0 claude --version : 2.0.61 (Claude Code) Window 운영체제 로 진행중입니다. 강의와 교재에 나온대로 '디스패처(Dispatcher)' 훅 패턴 적용 시 settings.json과 dispatcher.js를 적용하고 .env와 src/db/migrations/001_create_users.sql 까지 모두 만든 상황에서 테스트를 진행하면 막혀야 하는데 적용되지 않고 그대로 읽어주는거나 수정을 합니다. Claude에게 물어보면 등의 답변을 해주는데.. 환경설정의 문제인지 Window 와 Mac 운영체제의 차이인지 잘 모르겠습니다. (* 심화과정(디스패쳐 훅 패턴) 전부터 이상이 있었습니다.) 또한 강의를 보면 [DEBUG] MCP server "ide": Calling MCP tool: cloaseAllDiffTabs [DEBUG] MCP server "ide": Tool 'closeAllDiffTabs' completed successfully in 32ms 이러한 것이 나오는데 저는 똑같이 cladue --debug로 들어가도 그러한게 안찍히네요.. ㅜㅜ claude 버전문제인지 다른 세팅하는것이 있는지 궁금합니다.

  • spring-boot
  • next.js
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
Jin K 댓글 2 좋아요 0 조회수 100

common 룰

미해결

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

common 룰은 항상 적용으로 해야하나요? 프롬프트 실행후 빌드 작업을 안하는 것 같아서 문의드립니다.

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
초보 댓글 1 좋아요 0 조회수 85

SSR과 CSR fetch 섞어서 써도 되나요?

미해결

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

초기 렌더에 필요한 데이터는 getServerSideProps로 갖고오고 유저 행동에 따라 데이터 동적으로 필요할 때 렌더링 되고 나서 fetch해서 데이터 가져와도 되나요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
이동훈 댓글 2 좋아요 0 조회수 105

2.8 NextPage 타입을 확장한 이유

해결됨

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

type NextPageWithLayout 타입 선언할 때 NextPage를 확장하신 이유가 무엇인가요? ReactNode로만 하면 안되나요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
이동훈 댓글 2 좋아요 0 조회수 94

useRouter 두개의 차이가 뭔가요?

해결됨

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

next/navigation의 useRouter는 앱라우팅 때 사용한다고 하셨는데 앱라우팅이 뭔가요?? 무슨차이가 있는지 궁금합니다.

  • react
  • typescript
  • next.js
  • 카카오공채-개발
이동훈 댓글 2 좋아요 0 조회수 133

저 플러터 앱 만들준비 된건가요?

해결됨

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

저는 지금 진도 4-1입니다 이렇게 나와요. visual studio에 !표시 있습니다. 추가로 준비해야 하나요? 강사님의 macOS와 다른 windows를 쓰고 있어서 다르게 나오는지 모르겠습니다 현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 📚 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 🎯 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 📸 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 🔍 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 💪 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 🤖 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 📞 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 💡 💬 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
맛있는 밤 댓글 2 좋아요 0 조회수 83

피그마 연결 오류

미해결

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

mcp.json에 피그마사이트의 json을 그대로 복사해서 붙여넣었는데 오류가 납니다

  • react
  • next.js
  • cursor
  • 바이브코딩
  • 오류
SM AHN 댓글 1 좋아요 0 조회수 182

Replit 문의

해결됨

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

Replit에서 강의대로 명령어 했는데 명령어 두번만에 agent usuage 사용되었다고 하네요 다른 계정으로 똑같이 시도 했는데 agent usuage 몇번 시도하니깐 바로 또 업그레이드 하라고 하던데 업데이트 되면서 달라진거 같습니다

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
이시욱 댓글 2 좋아요 0 조회수 90

강의 소스 코드 압축 풀기 오류

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

강의 소스 코드를 다운로드 받아 압축 풀기를 하는데 99% 끝부분에서 특정 파일이 에러가 발생해 넘어가지지를 않습니다. 건너띄기로 100% 완료하기는 했지만 찜찜해서 문의 드립니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
가넷스타 댓글 1 좋아요 0 조회수 100

Lovable cloud

해결됨

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

안녕하세요 supabase가 없어 찾아보니 lovable cloud가 자체로 생겼더군요 이 관련 강의는 추후에 업데이트 해주시는건가요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
이시욱 댓글 2 좋아요 0 조회수 105

인기 태그

인프런 TOP Writers

주간 인기글