173만명의 커뮤니티!! 함께 토론해봐요.
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
지금 현재기준 터보백은 혹시 자동적용인가요? 뭔가 선택지에 안뜨는데 제가 이상한지 아님 따로 이유가 잇는지 궁금합니다
미해결
클린업 JavaScript: 점프업!
안녕하세요 영보님 영보님의 빅팬 수강생 한명입니다 영보님 강의 믿고보는 강의기에, 제가 이렇게나 많이 수강중에 있습니다. 텐서플로우 강의는 안샀습니다. 텐서플로우가 뭐지? 라는 의문이 있긴했지만, 웹 개발자에게 텐서플로우가 필요한 강의인가? 자바스크립트로 텐서플로우를 설명해주는 강의인 것은 좋은것 같습니다. 제가 텐서플로우를 현업에서 다루지 않더라도, 강의를 들으면 어떤 이점이 있을지 매우 궁금합니다. 솔직히 이야기해서 영보님이 해주시는 이야기가 궁금해서 듣고싶은 마음이 크고요. 두번째로는 웹개발자가 텐서플로우를 들으면 얻게되는 것이 어떤것이 있는지 궁금합니다.
미해결
실전 프론트엔드 테스트 시작하기
강의를 들으며 장바구니 페이지에 대해 Cypress로 테스트 코드를 작성하다가 궁금한 점이 몇가지 있어서 질문을 작성합니다 :) 장바구니 페이지에서 '장바구니의 상품을 삭제한 후 장바구니에 담겨있는 총 수량과 가격이 변경된다.'라고 테스트 시나리오를 작성했는데 이런 걸 e2e로 테스트 하는 게 맞는지 잘 모르겠습니다. 이런 부분은 unit 테스트로 넘겨야 하는 부분일까요? e2e테스트는 어떤 걸 중심으로 하면 좋을지 잘 모르겠습니다. 그냥 제가 필요하다고 생각되는 게 있으면 진행을 하면 되는 걸까요? 저도 모르게 저 대신 클릭 등을 수행하고 값을 확인하는 용도로 다루게 되는 것 같습니다. 그래도 일단 1번 질문에서 작성한 테스트 시나리오에 대한 코드를 직접 작성해봤습니다. 이 때, 장바구니 페이지에서 장바구니 아이템 데이터가 getServerSideProps를 통해 주입되고 있더라구요. 이 상황에서 API 모킹을 어떻게 해야할지 몰라서 Claude Sonnet 4.6이랑 구글링을 통해 몇가지 코드를 작성해봤습니다. 단순하게 테스트 코드가 작성되지 않고 다소 복잡하게 작성이 되는 것 같아서 뭔가 이 방향이 맞지 않는 것 같다는 생각이 들었습니다. 그래서 테스트 시나리오 자체를 제가 잘못 생각한 것 같다는 생각이 들기도 했습니다. SSR 환경에서 어떤 코드로 작성을 하는 게 맞는 방식인지 알 수가 없어서 한 번 확인해봐주시면 감사하겠습니다 :) a. nock + intercept 사용 - SSR은 서버 프로세스에서 진행되기 때문에 intercept 할 수 없다고 하여 nock을 사용했습니다. 코드는 해당 링크 를 참고 했습니다. - 그리고 router.replace를 통해 데이터를 refetch 될 때도 백엔드 api를 intercept를 할 수 없다고 해서 '/_next/data/**/*.json'를 intercept 했습니다. - 개인적으로 아래 코드는 'nock'과 'intercept'를 혼용해서 쓰다보니 장기적으로 봤을 때 유지보수성 측면에서 좋지 않은 코드라고 느꼈습니다. it.only('장바구니의 상품을 삭제한 후 총 수량과 가격이 변경된다', () => { // 1) 초기 로드용 nock (SSR - 서버사이드 fetch) cy.task('nock', { hostname: Cypress.env('API_URL'), method: 'GET', path: '/carts', statusCode: 200, body: FIVE_CART_ITEMS, }); // 2) router.replace 후 재조회용 intercept (클라이언트사이드 fetch) cy.intercept('GET', '/_next/data/**/cart.json', { body: { pageProps: { carts: FOUR_CART_ITEMS_AFTER_DELETE }, __N_SSP: true, }, }).as('refetch'); // 삭제 API mock cy.intercept('POST', '/api/cart', { statusCode: 200, body: { data: { name: '4' } }, }).as('deleteCart'); cy.visit('/cart'); // action cy.getByCy('cart-item-delete-button').first().click(); cy.wait('@deleteCart'); cy.wait('@refetch'); // 페이지 갱신 대기 // assertion cy.contains('Unbranded Rubber Chair').should('not.exist'); cy.getByCy('cart-item').should('have.length', 4); cy.getByCy('cart-item-total-amount').should('have.text', '4'); cy.getByCy('cart-item-total-price').should('have.text', '836.00'); }); b. intercept 사용 그래서 초기 로드에도 intercept를 사용했습니다. it.only('장바구니의 상품을 삭제한 후 총 수량과 가격이 변경된다', () => { // 1) 초기 로드용 (SSR - 서버사이드 fetch) cy.intercept('GET', '/_next/data/**/*.json', { body: { pageProps: { carts: FIVE_CART_ITEMS }, __N_SSP: true, }, }); // 2) router.replace 후 재조회용 intercept (클라이언트사이드 fetch) cy.intercept('GET', '/_next/data/**/*.json', { body: { pageProps: { carts: FOUR_CART_ITEMS_AFTER_DELETE }, __N_SSP: true, }, }).as('refetch'); // 삭제 API mock cy.intercept('POST', '/api/cart', { statusCode: 200, body: { data: { name: '4' } }, }).as('deleteCart'); cy.visit('/cart'); // action cy.getByCy('cart-item-delete-button').first().click(); cy.wait('@deleteCart'); cy.wait('@refetch'); // 페이지 갱신 대기 // assertion cy.contains('Unbranded Rubber Chair').should('not.exist'); cy.getByCy('cart-item').should('have.length', 4); cy.getByCy('cart-item-total-amount').should('have.text', '4'); cy.getByCy('cart-item-total-price').should('have.text', '836.00'); }); c. API 모킹을 사용하지 않기 - ssr 환경에서 delete 테스트를 위해 api 모킹을 사용하는 게 오히려 복잡하게 느껴져서 API 모킹을 사용하지 않고 코드를 작성하는 방식을 생각했습니다. - 대신에 테스트 할 때마다 수량과 가격이 변경될 거라고 생각해서 수량과 가격을 캡쳐하는 코드를 추가했습니다. it.only('장바구니의 상품을 추가한 뒤 삭제하면 해당 상품이 사라진다', () => { const cartItem = { "id": "24", "name": "Practical Frozen Pants", "price": "607.00", "imageUrl": "https://cdn.pixabay.com/user/2023/05/21/19-38-51-804_250x250.jpg" } // prepare: API로 상품 직접 추가 cy.request('POST', `${Cypress.env('API_URL')}/carts`, cartItem).then(({ body }) => { cy.visit('/cart'); // 삭제 전 수량과 가격 캡처 cy.getByCy('cart-item-total-amount').invoke('text').then((beforeAmount) => { cy.getByCy('cart-item-total-price').invoke('text').then((beforePrice) => { // action: 방금 추가한 항목 삭제 cy.contains('Practical Frozen Pants') .closest('[data-cy="cart-item"]') .find('[data-cy="cart-item-delete-button"]') .click(); // assertion cy.contains('Practical Frozen Pants').should('not.exist'); cy.getByCy('cart-item-total-amount').should('have.text', String(Number(beforeAmount) - 1)); cy.getByCy('cart-item-total-price').should('have.text', (Number(beforePrice) - cartItem.price).toFixed(2)); }); }); }); }); 일반적으로 delete에 대해 테스트할 때 어떤 식으로 하는지 궁금합니다. 삭제 성공 여부 / 해당 데이터가 보이지 않는지 체크 정도만 하고 삭제가 진행됨으로써 총 아이템 개수 수량이 변경되는 것에 대해서는 테스트 코드로 굳이 짚고 넘어가지 않나요? 실무에서 테스트 데이터는 보통 어떻게 관리하나요? 전부 api 모킹으로 테스트 해야하는 건지, 아니면 테스트용 DB를 따로 생성해서 거기서 테스트를 진행해야하는 건지 궁금합니다. 아니면 상황에 따라서 api 모킹을 해야할 때가 있고, DB를 연결해서 테스트 해야할 때가 있나요? 한번에 질문이 다소 많아서 죄송합니다 ㅠㅠ 완강하고 며칠동안 혼자서 공부해보다가 제대로 제가 하고 있는 건지 모르겠어서 여쭤봅니다 ㅠㅠ 긴 글 읽어주셔서 감사합니다!!
미해결
빌더 조쉬의 클로드 코드와 멀티 에이전트로 내 일상을 모두 자동화하기
안녕하세요. 강의 잘 보았습니다! 랜딩페이지 프롬프트에 사용한 pdf파일을 보고 싶은데 이도 공개가 가능할까요??
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
https://winterlood.notion.site/a873435b477f433ea04a359f89380cc5?v=1bfd06a98a594ce6a4c158f4aafbe0b2 감정일기장 파트를 공부하려 하는데 챕터11 소스코드가 필요한데 https://winterlood.notion.site/a873435b477f433ea04a359f89380cc5?v=1bfd06a98a594ce6a4c158f4aafbe0b2 해당페이지 접속이 안됩니다 어떻게 해야할까요?
미해결
빌더 조쉬의 클로드 코드와 멀티 에이전트로 내 일상을 모두 자동화하기
16:50 부근, 마지막에 “이미지를 하나씩 생성을 해서~ 파이썬프로그램 한번에 쫙 붙였다” 라는 표현이 어떤것인지 궁금합니다. 상세페이지 agent만들기 프로젝트는 결국 파이썬 기반으로 만들었다라는 것을 말씀하신걸까요? 현재 1회성으로 만들어진것인데, 추후 다른 제품이나 다른 컨셉으로 제품을 만들기 위함을 대비해서 파이썬 기반의 프로그램을 붙인 것을 함축하는 의미인지, 궁금합니다. agent를 만드는것이랑 바이브코딩의 프로그래밍 하는것이랑 모호한 차이점도 궁금합니다.
미해결
AI Agent 개발을 위한 모든 지식 [얼리버드]
다음 강의는 언제 올라오나요? 공지한 기간이 넘었는데 안 올라 오네요 늦게 올라오면 공지라도 해주세요.
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
클로드 설치 및 노드 설치를 완료하고 클로드에서 설정 → 개발자 → 로컬 MCP 서버에서 구성편집 시 이미지와 같은 오류가 발생합니다. 해당 경로에 클로드 폴더는 없는데 설치할때 특별하게 경로 설정도 없어보였습니다.. 어디서 설정해야 되는 걸까요?
해결됨
AI Agent 영어 과외 선생님과 함께하는 요즘시대 영어 학습법! (2026년 7월 업데이트!!)
안녕하세요. 4강 사용방법 참고하여 가입을하려하는데, 확인이메일은 받았어요. 이메일에있는 링크를 통해 가입하면된다고 하는데.. 저는 최종 가입이안되네요. 어떻게해야하나요?
미해결
빌더 조쉬의 클로드 코드와 멀티 에이전트로 내 일상을 모두 자동화하기
상당히 최신으로 만드신것 같은데, 대략적인 일자가 궁금합니다.
미해결
Obsidian Mastery: Build a Powerful Second Brain for Productivity & Knowledge Management
Korean Book Info 설치하였는데 데이타가 강의처럼 나오지 않고 하나도 없습니다. 진행이 어렵네여. 도움부탁드립니다.
해결됨
AI Agent 영어 과외 선생님과 함께하는 요즘시대 영어 학습법! (2026년 7월 업데이트!!)
영어 독해 연습과 북클럽에서 단어를 선택해 저장하면 단어장에 저장됐다는 알림은 받지만 실제로 단어장에는 저장이 되지 않는 것 같습니다! 확인해 주시면 학습에 많은 도움이 될 것 같습니다 🙏 감사합니다!
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
현재 워크플로우가 활성화되어 있지 않아 검색을 실행할 수 없습니다. 나중에 다시 시도해주세요. 에러가 나옵니다.
미해결
모두를 위한 대규모 언어 모델 LLM Part 5 - LangGraph로 나만의 AI 에이전트 만들기
안녕하세요 강사님, 강의 잘 듣고있습니다. https://docs.langchain.com/oss/python/integrations/tools 를 확인해보면 LangChain에서 제공해주는 미리 구현된 툴 구현체를 확인할 수 있는데, 이것들과 langchain-mcp-adapters를 사용하여 외부 서비스의 MCP를 LLM과 직접 연동하는 것이 어떤 차이가 있는지 궁금합니다. 강의를 촬영할 당시에는 MCP가 나오기 전이라 강의 내용처럼 tool로만 연동이 가능했었던 것일까요?
해결됨
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
탄스택쿼리 파트를 먼저 수강중에 중복되는 자료가 있어 말씀드려요. 63,65강의 자료가 동일합니다. 추가적으로, 65강 처음에 나오는 코드는 useEffect가 아닌 useQuery를 통한 분기처리인데, 이 경우 race condition위험이 없지 않나요?
해결됨
AI Agent 영어 과외 선생님과 함께하는 요즘시대 영어 학습법! (2026년 7월 업데이트!!)
강의구매했는데 어떻게 이용해야 하는지 안내가 어디에 있나요? 구체적인 이용시작 안내좀부탁해요
미해결
바이브 코딩 With Claude Code로 웹 서비스 만들기
안녕하세요! PPT를 Kimi.com에서 제작하신 것 같은데, Kimi AI로 PPT 만드셨을 때 장점이 있나요? PPT 스타일이 너무 좋아서 여쭤봅니다 ㅎㅎ 감사합니다!
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
build 명령어로 설치하려니 공식 저장소에서 runners 라는 이미지를 저장소를 찾지 못하는 것 같은데 내부 docker에서도 runners라는 이미지가 없고. 뭔가 잘못된 것 같습니다.
해결됨
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
프로젝트 생성 시 위와 같이 선택 하시면 됩니다. (Create TypeScript project 체크 박스 꼭 선택 하세요.) Create 버튼 클릭 하시면 화면 하단 터미널에 설치 옵션을 물어보는 화면이 보이게 됩니다. 그런데, 강의 와는 다르게 터보팩 사용 여부는 물어보지 않아요. Next.js 13 이상 버전에는 터보팩이 이미 내장되어 있습니다. 이 부분은 무시하고 진행 하시면 됩니다. 설치 완료 후, package.json 파일에 아래와 같이 개발 스크립트 부분을 수정 하세요. --turbo 추가 하시면 됩니다. "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "eslint" }, 실행은 상단 우측 보시면 아래와 같은게 보이실 겁니다. client-side 와 server-side 가 있는데 server-side 선택 하셔서 실행 하시면 됩니다. (안보이면 웹스톰 재시작 하세요. 지금 단계 에서 client-side 는 선택 하지 마세요. 이 강의를 계속 들어 보시면 저 두가지가 무슨 의미 인지 알게 됩니다.) 터보팩 적용 하여 올바르게 실행 되면 아래와 같이 보일 겁니다.
해결됨
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
2. 소스 코드 다운로드 및 활용법 강의 에서 소스 코드 다운로드를 할 수 있는 버튼 이나 링크가 존재 하지 않습니다. 3. 커스텀 스니펫 등록하기 강의는 다운로드 버튼이 잘 보입니다.
