묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
구지 react를 사용하는 이유가 그럼 있는가?
안녕하세요 수코딩님 갑자기 의문이 든 생각인데 next js 는 보면 프레임워크라서 여러 기능을 제공하고 편리하게 사용할수있는것같습니다 seo문제도 해결해주고 무엇보다 use client를 사용하면 클라이언트 컴포넌트로서 작동도 되고요 근데 그럼 의문이 드는게 둘다 가능하고 선택가능한 next를 쓰는게 무조건 이득이 아닌가 라는 생각이 들엇습니다. 그냥 서버사이드쪽만 서버사이드 좀하고 리액트가 필요한쪽은 클라이언트 사이드 렌더링으로 하면 되는 이야기인것같아서요
-
해결됨코드 한 줄 안 쓰고 주식 자동 분석 시스템 만들기 feat. Claude CLI
함수에 대한 노션 정의
강의 동영상은 바꿀 수 없으시겠지만 노션을 활용하시더라도 프롬프트 상의 용어들에 대한 간단한 설명이 있었으면 합니다.초보입장에서는 프롬프트를 복붙하기만 해서는 성장이 어려울 듯 합니다.디스코드에서 공유해 주신 md 파일들을 활용할때 보다는 조금 더 배움이 있었으면 하는 욕심이니 이해 바랍니다.예로 프롬프트에requests와 BeautifulSoup을 사용해줘. 라는 부분이 있는데 이게 함수인지 호두님이 만든 용어인지 궁금합니다. 느낌은 함수 일 듯한데 초보입장이라 ㅜㅜ;;;기존에 다른 곳에서 보면 필요한 여러 모듈들을 설치하고 조건을 타 컴에서 맞출 때 requests.txt 등으로 정리해서 가져 가는 것으로 이해 했는데 여기에서의 requests 의미를 이해 못하고 있습니다.get_top_gainers(market) 함수를 만들어줘.이 부분도 별도로 정의하면 임의로 함수를 만들어 정의 가능한 건지 이미 있기에 정의 만 한 것인지 궁금합니다.수 많은 프롬프트를 전부 정의 해 주시기는 어렵겠지만 함수 부분 만의라도 (색상등으로) 분리 해 주시면 네이버등에서 찾아서 공부하고 차후 활용할 때 좋을 것 같아서 의견 드립니다.아울러 강의 시점과 현재의 주식시장 조건이 달라 결과치도 다르고 AI가 대응하는 부분도 달라 생성되는 파일도 파일명도 다른 듯 합니다.이 부분도 프롬프트에 반영하여 폴더에 생성되는 생성 파일명과 갯수 만이라도 같은 결과치가 되었으면 합니다.
-
해결됨코드 한 줄 안 쓰고 주식 자동 분석 시스템 만들기 feat. Claude CLI
Claude CLI 설치 문의
Antrigravity에서 Claude CLI 설치가 진행이 안됩니다.영상에 나온대로 노션에 적혀있는 네이티브 인스톨러 부분을 Drag해서 붙여넣고설치를 진행해줘라고 똑같이 적었는데Loading / Generating / Working..만 뜨고 아무것도 진행되지 않네요해결방법 문의드립니다 ㅜ
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
스타터킷 사용방법
안녕하세요.현재 섹션 13, "Playwright MCP 란?" 까지 수업을 수강한 학생입니다.가르쳐주신대로 성실하게 스타터킷을 클로드 코드와 공식 문서를 이용하여 만들었습니다. 다만 제가 궁금한것은 본 스타터킷을 어떻게 활용하는지 입니다. 배포한 웹페이지를 통해 사람들이 코드를 퍼가서 이용하는 방식인건지, 아니면 제가 만든 소스코드의 산출물일 뿐인지 궁금합니다.강의에서는 어느 용도로 쓰인다고는 나와있지만, 어떻게 활용할 수 있는지는 안나옵니다. (예를들어 코드를 복사하여 그대로 CLI 등에 붙인다는지 등이요..) 제가 만든 스타터 킷의 기술 스택 란은 아래와 같이 돼있는데 이런경우 딱히 복사를 한다고도 보기 어렵습니다. 어떤식으로 본 스타터킷을 사용할 수 있는지 가이드 부탁드립니다!만약 추후 인강에 있는 내용이라면 인강 회차 이름 말씀부탁드립니다!감사합니다 아래는 제가 만든 페이지 입니다.https://starterkit-test.vercel.app/examples Next.js 기반이라 그런지 아니면 정적인 페이지가 아니라 그런지 github로 배포가 안되어 vercel을 통해 올렸습니다
-
해결됨코드 한 줄 안 쓰고 주식 자동 분석 시스템 만들기 feat. Claude CLI
claude 등 파일 설치 위치에 대한 문의
파이썬은 설치 위치를 체크하면 그나마 위치가 정리되는데 기타 tool 들을 두서없이 따라 하다 보면 어느 순간 위치를 못 찾아서 헤매게 되는 경우가 있는 것 같습니다.본 강의의 경우 유저 밑의 폴더에 까는 것 같은데 유저명이 한글일 경우에도 나중에 헤매는 것 같습니다.유저 폴더 밑이 아니라 지정한 위치에 모아서 설치 가능한지요? 가능하다면 본 강의는 어디에 설치하면 따라하기 좋을지요? 초보라 많이헷갈려서 문의 드립니다. ex) .\\\\hello_world> claudeClaude Code on Windows requires git-bash (https://git-scm.com/downloads/win). If installed but not in PATH, set environment variable pointing to your bash.exe, similar to: CLAUDE_CODE_GIT_BASH_PATH=C:\Program Files\Git\bin\bash.exe
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
Claude Extension 을 사용해야 하나요?
섹션6 - 33 강의를 듣고 있는데요.처음에 claude cli 를 사용 하라고 해서 그렇게 하고 있는데.강의 영상은 cli 가 아니네요.그래서 이미지 붙여 넣는것도 cli 에서는 안되고 다른곳에 저장해서 경로를 설정해야 하구요.cli 가 아닌 다른것 사용해도 되나요? 기능을 전부 지원하지 않는다 해서 않하고 있는데..좀 헷갈리네요.
-
해결됨클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
live server 오류
안녕하세요, 짐코딩님하나하나 따라가고 있는데윈도우 환경에서 D 드라이브에 실습 환경 만들어서 실행 중입니다. 커서에서 live server 확장 프로그램 다운로드 했고, open with live server 누르면 화면이 자꾸 안 나와서 일단 클로드 코드한테 물어봐서 http://localhost:8000/ 으로 실행시키긴 했는데 앞으로 수업에 지장이 있을까봐 여쭤봅니다.무엇이 문제일까요 ..?
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
서브에이전트의 결과를 다른 서브에이전트로 넘기는 방법(notion -> prd)
notion-db-expert 서브에이전트를 만들어서, 실행한 뒤에 prd-generator 서브에이전트로 그 결과값을 넘겨서 prd를 생성하는 방법을 설명해주신 것인지, 아니면 자연스럽게 과정 중에 있는 것인지가 약간 햇갈립니다.notion-db-expert 서브에이전트의 결과를 기다렸다가 그 결과를 prd 서브에이전트에 반영해라 라는 식의 프롬프트는 필요가 없는 것일까요?강의의 5:44 정도에 나오는 것 같은데 관련된 설명이 없는 것 같아서 여쭙습니다! 감사합니다.
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
서브에이전트의 결과를 다른 서브에이전트로 넘기는 방법(notion -> prd)
notion-db-expert 서브에이전트를 만들어서, 실행한 뒤에 prd-generator 서브에이전트로 그 결과값을 넘겨서 prd를 생성하는 방법을 설명해주신 것인지, 아니면 자연스럽게 과정 중에 있는 것인지가 약간 햇갈립니다.notion-db-expert 서브에이전트의 결과를 기다렸다가 그 결과를 prd 서브에이전트에 반영해라 라는 식의 프롬프트는 필요가 없는 것일까요?강의의 5:44 정도에 나오는 것 같은데 관련된 설명이 없는 것 같아서 여쭙습니다! 감사합니다.
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
FormEvent가 deprecated 되었다고 합니다.
FormEvent는 deprecated 되고 SubmitEvent를 사용하는 것으로 권장된다고 합니다.그런데 (e: SubmitEvent<HTMLFormElement>) 방식은 FormEvent가 제네릭을 지원하지 않아서 안 된다고 하고 (e: SubmitEventHandler<HTMLFormElement>) 처럼 시도해도 빨간줄이 자꾸 뜹니다.여기저기 알아보고 const handleSubmit: SubmitEventHandler<HTMLFormElement> = (e) => { ... } 로 하면 된다는데 이들의 차이점과 FormEvent를 사용할 때 처럼 사용하면 안 되는 이유가 궁금합니다.
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
터보백이 안보입니다
지금 현재기준 터보백은 혹시 자동적용인가요? 뭔가 선택지에 안뜨는데 제가 이상한지 아님 따로 이유가 잇는지 궁금합니다
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
나만의스타일 관련 문의
나만의출력스타일 미션을 진행하는데 저는 D:드라이브에서실습하고있습니다.아래경로에 세팅해도 /output-style 할때 내가만든 출력리스트가 안나오는데 방법이 있을까요?경로 : D:\workspace\output-style-test\.claude\output-style\beginner.mdD:\workspace\output-style-test\.claude\beginner.md
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
[git설치]
윈도우 git 설치 후 이름과 이메일 설정 어디서 어떻게 하는 것인지 문의 드립니다
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
git 브렌치?
git 브렌치가 뭔가요? git init 명령어는 처음 들어보는 것 같은데, 어디서 변경할 수 있는건가요?
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
잘 한건가요?
잘 한건가요?
-
해결됨코드 한 줄 안 쓰고 주식 자동 분석 시스템 만들기 feat. Claude CLI
노션 링크 확인 요청드려요.
노션을 사용 안 해봐서 제가 어떻게 신청해야 하는지, 노션 주소가 어떻게 되는지 모르겠네요. 도움 요청드립니다.
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
User Memory 파일 생성 폴더
~/.claude/CLAUDE.md 에서 생성이 안되고 하위 폴더에서 생성이되네요
-
미해결실전 프론트엔드 테스트 시작하기
장바구니 테스트 코드 작성에 대한 질문입니다.
강의를 들으며 장바구니 페이지에 대해 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를 연결해서 테스트 해야할 때가 있나요?한번에 질문이 다소 많아서 죄송합니다 ㅠㅠ 완강하고 며칠동안 혼자서 공부해보다가 제대로 제가 하고 있는 건지 모르겠어서 여쭤봅니다 ㅠㅠ 긴 글 읽어주셔서 감사합니다!!
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
노션 DB 설정 관련
노션을 처음 사용해봅니다. DB 연결에서 노션이 나오는데 영상과 실제 노션 앱과 화면이 다르게 나오고 화면대로 하려니 다른거 같습니다. 예) invoice-web 페이지를 생성하고 invoice DB 전체item DB 이렇게 두개를 생성 하는데 연결에 가니 invoice-web이 화면과 달리 보이지 않습니다. 다른 LLM 툴에 물어보니 웹페이지를 만들어서 연결하는게 아니라 DB를 만들고 그 아래에 invoice DB와 item DB를 만들어야 한다는데 현재 이부분에서 더이상 진도가 나가지 못하고 있습니다.
-
미해결비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
혹시 강사님은 lovable, replit모두 유료 쓰시는가요?
현재 1-5 듣고 있었습니다.lovable, replit이 심할정도로 무료 credit을 많이 잡아먹네요.. 그러니까 지금 가이드라인 주신 질문 한번하면 약 70%정도의 코인이 소모되고, 추가 질문시 upgrade하라고 끊겨버립니다. 실제 강의는 좋지만.. 무료로 한번 시도해보기가 쉽지않아 보입니다.