안녕하세요. 현재 섹션 13, "Playwright MCP 란?" 까지 수업을 수강한 학생입니다. 가르쳐주신대로 성실하게 스타터킷을 클로드 코드와 공식 문서를 이용하여 만들었습니다. 다만 제가 궁금한것은 본 스타터킷을 어떻게 활용하는지 입니다. 배포한 웹페이지를 통해 사람들이 코드를 퍼가서 이용하는 방식인건지, 아니면 제가 만든 소스코드의 산출물일 뿐인지 궁금합니다. 강의에서는 어느 용도로 쓰인다고는 나와있지만, 어떻게 활용할 수 있는지는 안나옵니다. (예를들어 코드를 복사하여 그대로 CLI 등에 붙인다는지 등이요..) 제가 만든 스타터 킷의 기술 스택 란은 아래와 같이 돼있는데 이런경우 딱히 복사를 한다고도 보기 어렵습니다. 어떤식으로 본 스타터킷을 사용할 수 있는지 가이드 부탁드립니다! 만약 추후 인강에 있는 내용이라면 인강 회차 이름 말씀부탁드립니다! 감사합니다 아래는 제가 만든 페이지 입니다. https://starterkit-test.vercel.app/examples Next.js 기반이라 그런지 아니면 정적인 페이지가 아니라 그런지 github로 배포가 안되어 vercel을 통해 올렸습니다
(AI 퀀트) 코드 한 줄 안 쓰고 주식 자동 분석 시스템 만들기 feat. Claude CLI
파이썬은 설치 위치를 체크하면 그나마 위치가 정리되는데 기타 tool 들을 두서없이 따라 하다 보면 어느 순간 위치를 못 찾아서 헤매게 되는 경우가 있는 것 같습니다. 본 강의의 경우 유저 밑의 폴더에 까는 것 같은데 유저명이 한글일 경우에도 나중에 헤매는 것 같습니다. 유저 폴더 밑이 아니라 지정한 위치에 모아서 설치 가능한지요? 가능하다면 본 강의는 어디에 설치하면 따라하기 좋을지요? 초보라 많이헷갈려서 문의 드립니다. ex) .\\\\hello_world> claude Claude 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
섹션6 - 33 강의를 듣고 있는데요. 처음에 claude cli 를 사용 하라고 해서 그렇게 하고 있는데. 강의 영상은 cli 가 아니네요. 그래서 이미지 붙여 넣는것도 cli 에서는 안되고 다른곳에 저장해서 경로를 설정해야 하구요. cli 가 아닌 다른것 사용해도 되나요? 기능을 전부 지원하지 않는다 해서 않하고 있는데.. 좀 헷갈리네요.
안녕하세요, 짐코딩님 하나하나 따라가고 있는데 윈도우 환경에서 D 드라이브에 실습 환경 만들어서 실행 중입니다. 커서에서 live server 확장 프로그램 다운로드 했고, open with live server 누르면 화면이 자꾸 안 나와서 일단 클로드 코드한테 물어봐서 http://localhost:8000/ 으로 실행시키긴 했는데 앞으로 수업에 지장이 있을까봐 여쭤봅니다. 무엇이 문제일까요 ..?
notion-db-expert 서브에이전트를 만들어서, 실행한 뒤에 prd-generator 서브에이전트로 그 결과값을 넘겨서 prd를 생성하는 방법을 설명해주신 것인지, 아니면 자연스럽게 과정 중에 있는 것인지가 약간 햇갈립니다. notion-db-expert 서브에이전트의 결과를 기다렸다가 그 결과를 prd 서브에이전트에 반영해라 라는 식의 프롬프트는 필요가 없는 것일까요? 강의의 5:44 정도에 나오는 것 같은데 관련된 설명이 없는 것 같아서 여쭙습니다! 감사합니다.
notion-db-expert 서브에이전트를 만들어서, 실행한 뒤에 prd-generator 서브에이전트로 그 결과값을 넘겨서 prd를 생성하는 방법을 설명해주신 것인지, 아니면 자연스럽게 과정 중에 있는 것인지가 약간 햇갈립니다. notion-db-expert 서브에이전트의 결과를 기다렸다가 그 결과를 prd 서브에이전트에 반영해라 라는 식의 프롬프트는 필요가 없는 것일까요? 강의의 5:44 정도에 나오는 것 같은데 관련된 설명이 없는 것 같아서 여쭙습니다! 감사합니다.
FormEvent는 deprecated 되고 SubmitEvent를 사용하는 것으로 권장된다고 합니다. 그런데 (e: SubmitEvent<HTMLFormElement>) 방식은 FormEvent가 제네릭을 지원하지 않아서 안 된다고 하고 (e: SubmitEventHandler<HTMLFormElement>) 처럼 시도해도 빨간줄이 자꾸 뜹니다. 여기저기 알아보고 const handleSubmit: SubmitEventHandler<HTMLFormElement> = (e) => { ... } 로 하면 된다는데 이들의 차이점과 FormEvent를 사용할 때 처럼 사용하면 안 되는 이유가 궁금합니다.
강의를 들으며 장바구니 페이지에 대해 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를 연결해서 테스트 해야할 때가 있나요? 한번에 질문이 다소 많아서 죄송합니다 ㅠㅠ 완강하고 며칠동안 혼자서 공부해보다가 제대로 제가 하고 있는 건지 모르겠어서 여쭤봅니다 ㅠㅠ 긴 글 읽어주셔서 감사합니다!!
노션을 처음 사용해봅니다. DB 연결에서 노션이 나오는데 영상과 실제 노션 앱과 화면이 다르게 나오고 화면대로 하려니 다른거 같습니다. 예) invoice-web 페이지를 생성하고 invoice DB 전체 item DB 이렇게 두개를 생성 하는데 연결에 가니 invoice-web이 화면과 달리 보이지 않습니다. 다른 LLM 툴에 물어보니 웹페이지를 만들어서 연결하는게 아니라 DB를 만들고 그 아래에 invoice DB와 item DB를 만들어야 한다는데 현재 이부분에서 더이상 진도가 나가지 못하고 있습니다.
현재 1-5 듣고 있었습니다. lovable, replit이 심할정도로 무료 credit을 많이 잡아먹네요.. 그러니까 지금 가이드라인 주신 질문 한번하면 약 70%정도의 코인이 소모되고, 추가 질문시 upgrade하라고 끊겨버립니다. 실제 강의는 좋지만.. 무료로 한번 시도해보기가 쉽지않아 보입니다.
분명히 노션 세팅 잘 했고 연결까지 했는데 데이터베이스 조회 안 되는 분들은 참고해주세요. 강의 영상 촬영 날짜가 아마도 2025년 09월 이전으로 생각 됩니다. 그 이후에 노션 API 버전이 바뀌면서 데이터베이스 조회가 안 되는게 원인입니다. [ 노션 API 업그레이드 가이드 ] https://developers.notion.com/guides/get-started/upgrade-guide-2025-09-03 해결 방법은 2가지인데 API를 구버전을 쓰도록 프롬프트를 유도하거나, 신규 API 버전에 맞춰서 해야 하는데 신규 버전은 "데이터베이스 ID"가 아닌 "데이터베이스 소스 ID"를 필요로 합니다. [ 구버전 프롬프트 ] 노션 api를 "2022-06-28" 버전으로 사용하고 관련 코드 전부 수정해줘. [ 최신 버전 해결 방법 ] 데이터베이스를 열면 위 사진처럼 보일텐데 새로 만들기 왼쪽에 설정 누르면 밑에서 3번째에 데이터 소스 관리 있습니다. 소스 관리에서 위 사진처럼 데이터 소스 ID 복사하시고 그 값을 env에 넣으시면 됩니다.
프로필 수정후 프로필 디테일 화면의 포스트 아이템들에서는 수정된 프로필 내용이 반영이 안되는 것이 확인됩니다. 시나리오대로라면 프로필 수정 후 포스트아이템의 프로필 ui 도 업데이트 해주는게 자연스러운듯 하여 위와 같이 아래 코드를 추가해 주었습니다. 맞을까요? queryClient.resetQueries({ queryKey: QUERY_KEYS.post.userList(updatedProfile.id), });
