묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
구지 react를 사용하는 이유가 그럼 있는가?
안녕하세요 수코딩님 갑자기 의문이 든 생각인데 next js 는 보면 프레임워크라서 여러 기능을 제공하고 편리하게 사용할수있는것같습니다 seo문제도 해결해주고 무엇보다 use client를 사용하면 클라이언트 컴포넌트로서 작동도 되고요 근데 그럼 의문이 드는게 둘다 가능하고 선택가능한 next를 쓰는게 무조건 이득이 아닌가 라는 생각이 들엇습니다. 그냥 서버사이드쪽만 서버사이드 좀하고 리액트가 필요한쪽은 클라이언트 사이드 렌더링으로 하면 되는 이야기인것같아서요
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
클로드 코드 붙여넣기 설정
윈도우11 환경에서 cursor내 터미널에서 git-bash로 claude 실행하면3줄 이상 복사 후 붙여넣기를 할때 이미지처럼 표시되는데 이 설정 해제하는방법은 무엇인가요?클로드코드한테 물어봐서"pastePreview": false, "pastePreviewExpanded": true "display": { "pastePreviewLines": 10 }setting.json파일에 위 코드를 추가해도 적용이안됩니다.
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
worktree
클로드의 워크트리 강좌도 있으면 좋겠어요~~!!!!
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
강의 따라갈때 커서가 필수일까요?
현재 커서 AI 설치 과정 진행중인데.. 커서 AI가 꼭 필요할까요?참고로 전 개발자는 아닙니다.현재 교육을 위해 제가 만든 환경은 Azure에 리눅스 VM을 구성해서 Claude code를 이용중입니다. 해당 VM에 터미널 접근을 구글에 안티그래비티를 이용해 접근합니다. 여튼 궁금한 부분은 반듯이 커서 AI 가 있어야 교육을 따라갈 수 있을까요?
-
미해결클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
think, megathink, ultrathink
이 부분이 계속 업데이트가 되었다보니 정리가 잘 안되네요.즉, 현재는 think, megathink, ultrathink를 별도로 입력해도 작동하지 않는다.왜냐하면, 클로드 코드가 항상 해당 명령어를 입력하는 것만큼 깊이 생각하는게 기본이 되었기 때문이라는거죠?단, 'ultrathink 키워드 변경 안내' 추가자료에 올려주신 것 처럼 사고 토큰 설정을 바꾸는 것이 가능하다고 이해하면 될까요?
-
미해결클로드 코드 완벽 마스터: 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 개발 워크플로우 기초부터 실전까지
잘 한건가요?
잘 한건가요?
-
미해결클로드 코드 완벽 마스터: 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를 만들어야 한다는데 현재 이부분에서 더이상 진도가 나가지 못하고 있습니다.
-
해결됨클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
[해결방법] 노션 db 조회 안될 시
분명히 노션 세팅 잘 했고 연결까지 했는데 데이터베이스 조회 안 되는 분들은 참고해주세요. 강의 영상 촬영 날짜가 아마도 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에 넣으시면 됩니다.
-
해결됨한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
프로필 수정 후 post item 의 글들에서 수정된 프로필 업데이트 반영
프로필 수정후 프로필 디테일 화면의 포스트 아이템들에서는 수정된 프로필 내용이 반영이 안되는 것이 확인됩니다. 시나리오대로라면 프로필 수정 후 포스트아이템의 프로필 ui 도 업데이트 해주는게 자연스러운듯 하여 위와 같이 아래 코드를 추가해 주었습니다. 맞을까요?queryClient.resetQueries({ queryKey: QUERY_KEYS.post.userList(updatedProfile.id), });