학습 안내에는 아래와 같이 되어 있는데, 이제 강의를 몇 개 안들어서 못찾는것 같기도합니다. 강의 파일 어디에서 받을 수 있는지 알려주세요. 😃 수강 전 확인해주세요! 📢 이 강의는 Code with Antonio 유튜브 채널에도 공개되어 있지만, 실제로 클론코딩을 완성하려면 유료 학습자료가 꼭 필요합니다. (전체 코드베이스, 설정 파일, 구조화된 컴포넌트 포함) 💬 오직, 인프런 강의에서만 제공됩니다! 13시간의 긴 영상을 체계적인 커리큘럼으로 나누었습니다. 원하는 부분을 빠르게 찾아 학습하고 언제든 편하게 복습할 수 있어요. 영어가 낯설어도 걱정 마세요! 한국어 더빙이 제공돼서 편하게 들을 수 있어요. 배운 내용, 그냥 넘기지 마세요 🙂 중간중간 AI 퀴즈로 재미있게 복습해볼 수 있어요!
강의안을 따라서 진행했는데 오류가 발생합니다. 이미지는 아래에 첨부했습니다. 제가 생각하는 문제는 제가 활성화하는 서버의 위치가 synology-nas안에 있는게 문제인것 같아요. 일단 저의 블로그는 blog.synology-nas.me 이런식으로 접속을 하는데 반해서 구글 애드센스의 사이트 등록은 blog.synoloy-nas.me라고하면 최상위 사이트가 아니라고 오류가 떠서 synoloy-nas.me를 통해서 사이트를 연결했습니다. 문제는 synology-nas.me는 synology에서 제공하는 web환경의 페이지에 접속하다보니까 아래와 같은 오류가 발생하는거 같아요 어떻게 진행해야 할까요
여기에 질문드리면 되는걸까요? 아니면 다른 곳에 따로 질문드리는걸까요? 질문 1. 꼭 하나의 폴더를 먼저 만들어서 열어준 다음 'npx create-next-app@14 프로젝트 이름' 이렇게 폴더 내에 폴더를 만들어서 새로 만든 폴더를 열어서 작업해야 하나요? 아니면 그냥 vs code켜서 'npx create-next-app@14 프로젝트 이름' 바로 쳐서 그 프로젝트에서 바로 시작하면 되나요? 질문 2. 꼭 const router, const {q}로 해야 하나요?, 그 이유도 궁금합니다. 방금 let으로 {q} 선언하니까 오류가 발생했어서 질문드립니다. 질문 3. [[...id]].tsx 에러를 방지하기 위해 기본적으로 대괄호 두번 쓰는게 일반적인가요? 질문 4. search안에 index.tsx라고 파일명을 지었는데, 일반적으로 pages 폴더 하위 폴더를 만들면 그 안에는 무조건 index.tsx라고 파일명을 설정하나요? 그리고 쿼리 파라미터를 받는 동적 url인 경우에만 해당 쿼리 파라미터 이름을 대괄호 안에 적는건가요? 그리고 다중으로 쿼리 파라미터 설정을 할 것을 대비해서 일반적으로 ... 설정을 하는지도 궁금합니다. 질문 5. 404페이지는 보통 이미지로 많이 설정하는데 그럼 export default하고 그 안에 이미지 url을 불러오는건가요? 이미지는 어느 폴더에 보관하는건지 궁금합니다. 질문 6. export default function Page() {}에서 Page는 Pages 안에 들어있는 Page니까 관용적으로 Page를 사용하는건가요? 질문 7. 보통 export default 이렇게 다 작성하는지 아님 자동완성 템플릿을 설정해놓고 사용하는지도 궁금합니다.
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
전체적으로 프롬프트로 나온 결과값이 너무 달라서 그냥 우선 강의를 듣고 잇긴한데 cursor 버젼때문인지.. Sonnet버젼 4로 시도했는데 실행이 안되서 auto로 그냥 자동 AI툴 돌려서 했더니 강사님이랑 결과값이 너무 품질이 떨어지는 결과가 나오고. pro로 업그레이드 해야 할지.. 이게 씽크가 어느정도 맞아야 진도를 맞출거 같은데 말이죠. 어떻게 해야 하나요??
강의 감사합니다. 강의자님의 포트폴리오를 보면서 얼마나 많이 노력하셨는지가 보입니다 -- 공유해주신 포트폴리오를 제 상황에 맞게 하려고 하는데요 ! 질문이 있습니다. 저는 대회를 나간 경력이없고 신입이라 그런지 공유해주신 포폴에 무엇을 쓰면 좋을지 조언듣고 싶습니다. 음 제 지금 상황은 비전공자이고,, react.js 블로그 포폴 하나 혼자 강의 보면서 만들었는데 어떻게 어필하면 좋을까요 .. 자기소개서는 포트폴리오에 올리지 않는게 좋을까요 ? 방향잡기가 쉽지가 않네요
24강 강의 관련, 몇가지 추가 문의드립니다. 윈도우에서 Cursor 에디터 실행후, Ctrl+ESC 했을때, 강의화면과 같이 우측에 Clause Code 가 열리지 않네요. 단축키를 설정해야 할까요? (24강 4분 15초 강의화면) Cursor 에디터 실행후, Terminal 창을 열고, claude 실행한 이후 콘솔 입력은 정상적으로 동작합니다. 그런데, Cursor 에디터 오른쪽 메뉴를 통해 "Claude Code:Open" 을 실행했을때는 챗 화면만 보이고, 강사님 강의 화면처럼 Claude 콘솔 입력 화면은 안나오네요. (24강 4분 21초 강의화면) 아래 화면에서 Anthropic Consol 선택후 로그인 시도시, $5불 추가 팝업이 뜨는데, 이 비용을 지불하면 강사님 화면처럼 볼수 있는 걸까요?
Vercel에 서버 배포 후 api를 호출하면, 404에러가 뜹니다 ㅠㅠ 코드는 바뀐게 없어서, 로컬에서 api 호출은 잘되는데, 배포만 하면 안되네요... swagger도 배포사이트에서는 안되는게 맞을까요? 로컬에 있는 코드랑 바꾼거없이 그대로 배포했는데 로컬에서는 swagger도 접속 잘됩니다. 혹시 .env에 있는걸 setting에서 직접 입력해줘야 하나요? 확인해보니 배포된 서버 네트워크에서 스웨거로 접속하면 다음과 같이 번들파일과 css를 불러올 때 404에러가 발생합니다... 아래는 배포된 서버 url입니다. https://onebite-books-server-three-tau.vercel.app/
25강 "프로필 웹사이트" 앱을 구현하는 중에 "Limit reached" 코멘트와 함께 더이상 강의를 진행하지 못했네요. claude 실행후 plan 모드에서 "프로필 웹사이트" 앱 만들기를 처음 시도시, '배포' 단계(무려 7단계) 까지 언급되길래, 단계를 줄였습니다. 이후, 개발 환경 (npm 인스톨, 로컬 서버 실행...) 단계가 언급되고, SNS 코드 포함하여, 앱을 만드는 과정 등에서 html 코드를 무려 800줄 가까이 만들고, 파일을 분리하고 html 을 python 과 연계하는 코드까지 만들더니 limit 에 도달해서, "프로필 웹사이트" 앱을 완성하지 못했습니다. ㅠㅜ claude pro 구독해서 사용중입니다. 강의 과정의 앱 만들기는 사실 개념 이해 및 실습이 중요할거 같은데, "프로필 웹사이트 만들어줘:" 보다는 좀 더 구체적으로 프롬프트 입력을 통해 간단한 앱을 만들수 있도록 유도되면 좋겠습니다 ㅠㅜ
todoPagingCP.tsx에서 Link로 페이지 동적으로 만들었는데 페이지 클릭때마다 const res = await fetch( `http://localhost:8080/api/todos/list?page=${page}` ); todo/list/page에 있는 이코드가 실행이 되는건가요?
pro 요금제, sonnet4.5를 사용해서 강의를 따라가다 보니 금방 session의 토큰 사용량이 가득 차는 부분이 불편해서 모델 비교 설명을 확인해봤습니다. 일상적인 개발에서는 sonnet4.5가 토큰 사용량이나 성능 측면에서 뛰어난 것 같더라구요. 아마 실무 개발에서 claude를 활용하게 된다면 sonnet을 사용할 것 같은데, haiku4.5가 sonnet보다 3배 저렴하고 속도도 빠르다고 하는 내용을 보니 pro 요금제로 강의를 들을 때는 haiku 모델이 더 적합하겠다는 생각이 들었습니다. 이것 저것 모두 써보려고 하는데, 강사님의 의견이 궁금합니다! (실무에서 모델별 성능이 체감될 만큼 차이가 큰지도 궁금합니다.)
안녕하세요. 수업을 듣다가 알려주신 거랑 다르게 동작하는 것 같아 질문드립니다. 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 이라고 해서 질문이 생겼습니다. 어떤 블로그에서는 또 브라우저마다 다르게 동작한다고 해서 헷갈립니다..! 답변 주시면 감사드리겠습니다.
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버전인가요?
2-3강 듣는 중에 교재 위치 2-3 9) 이거 저만 안보이는 것일까요? 흑흑,, 윈도우 사용중인데 이게 어디있는지 모르겠습니다. 지피티한테 물어봐도 모르겠어서 질문드려요 현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 📚 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 🎯 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 📸 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 🔍 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 💪 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 🤖 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 📞 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 💡 💬 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?
