inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

장바구니 테스트 코드 작성에 대한 질문입니다.

미해결

실전 프론트엔드 테스트 시작하기

강의를 들으며 장바구니 페이지에 대해 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를 연결해서 테스트 해야할 때가 있나요? 한번에 질문이 다소 많아서 죄송합니다 ㅠㅠ 완강하고 며칠동안 혼자서 공부해보다가 제대로 제가 하고 있는 건지 모르겠어서 여쭤봅니다 ㅠㅠ 긴 글 읽어주셔서 감사합니다!!

  • javascript
  • react
  • next.js
  • 소프트웨어-테스트
  • Cypress
  • e2e
꽃갈피 댓글 1 좋아요 0 조회수 81

노션 DB 설정 관련

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

노션을 처음 사용해봅니다. DB 연결에서 노션이 나오는데 영상과 실제 노션 앱과 화면이 다르게 나오고 화면대로 하려니 다른거 같습니다. 예) invoice-web 페이지를 생성하고 invoice DB 전체 item DB 이렇게 두개를 생성 하는데 연결에 가니 invoice-web이 화면과 달리 보이지 않습니다. 다른 LLM 툴에 물어보니 웹페이지를 만들어서 연결하는게 아니라 DB를 만들고 그 아래에 invoice DB와 item DB를 만들어야 한다는데 현재 이부분에서 더이상 진도가 나가지 못하고 있습니다.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
토니 댓글 2 좋아요 0 조회수 153

혹시 강사님은 lovable, replit모두 유료 쓰시는가요?

미해결

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

현재 1-5 듣고 있었습니다. lovable, replit이 심할정도로 무료 credit을 많이 잡아먹네요.. 그러니까 지금 가이드라인 주신 질문 한번하면 약 70%정도의 코인이 소모되고, 추가 질문시 upgrade하라고 끊겨버립니다. 실제 강의는 좋지만.. 무료로 한번 시도해보기가 쉽지않아 보입니다.

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
  • 선물하기-좋은
패시브 댓글 2 좋아요 0 조회수 300

[해결방법] 노션 db 조회 안될 시

해결됨

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

분명히 노션 세팅 잘 했고 연결까지 했는데 데이터베이스 조회 안 되는 분들은 참고해주세요. 강의 영상 촬영 날짜가 아마도 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
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
For Citizen 댓글 2 좋아요 1 조회수 519

강의 목적이?

미해결

14 days with Claude Code

강좌를 신청해서 보고 있습니다만, 튜토리얼이라고는 하지만, 무엇을 설명하고자 하는 것인지 전혀 알 수가 없습니다. 우선, 개발환경에 대한 설명이 공유해주시고, 최초 시작 최종 마무리 에 대한 설명을 해주세요.

  • react
  • python
  • java
  • 인공지능(ai)
  • chatgpt
대전 이득재 댓글 1 좋아요 0 조회수 101

Git 폴더 생성(Windows)

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

안녕하세요. Git 이름과 메일 입력해서 결과뜨는것까지 확인했고, Git 리포지토리 초기화까지 했는데, 터미널에서 ls를 들어가보면 .git이 없어요.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
선데 댓글 2 좋아요 0 조회수 156

파일 간략하게 정리하기?

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

38강의 4:40초 쯤에, clear 또는 compact, 아님 이미 생성된 파일들을 간략하고 명확하게 정리할 수 있다고 하셨는데, 이 영상에서 알려주신 clear나 compact는 파일을 간략하게 정리하는 명령어는 아니지 않나요? 그냥 클로드 코드와 대화한 내용을 간략하게 정리하는 거 아닌가요? 파일은 어떻게 간략하게 할 수 있다는건지 알려주세요!

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
조성진 댓글 2 좋아요 0 조회수 106

setVlaue질문

미해결

김영한의 실전 자바 - 중급 1편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 2분33초에 memberB.getAddress()setValue("부산") 부분을 실행할때 setValue()부분에서 오류가 나는데 바로 직전 강의에서 setValue를 삭제하였는데 다시 만든후 실행한건가요? 만들었다면 불변이아닌거아닌가요?

  • java
  • 객체지향
여비 댓글 3 좋아요 0 조회수 132

설치과정에서 오류가 생겼습니다.

해결됨

(AI 퀀트) 코드 한 줄 안 쓰고 주식 자동 분석 시스템 만들기 feat. Claude CLI

💡 수강생 안내 사항 (커뮤니티 가이드) 학습 관련 질문 : 구체적으로 적을수록 정확한 답변을 받을 수 있습니다. 작성 팁 : 마크다운과 단축키를 활용하면 글을 더 편리하게 작성할 수 있습니다. 사전 검색 : 질문을 남기기 전, 커뮤니티 질문 & 답변에 비슷한 내용이 있었는지 먼저 검색해 보세요. 커뮤니티 매너 : 서로 예의를 지키며 존중하는 분위기를 함께 만들어가요. 서비스 문의 : 인프런 서비스 관련 문의는 1:1 문의하기 를 이용해 주세요. 어떻게 해결해야할까요

  • python
  • flask
  • next.js
  • 인공지능(ai)
  • ai-활용-(ax)
Moon 댓글 2 좋아요 0 조회수 126

[해결방법] 윈도우 WSL 환경에서 shrimp-task-manager 사용 시 참고사항

해결됨

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

WSL 환경에서 수강하시는 분들, tasks.json 파일에 내용이 기록이 안 되면 아래 문제로 보여집니다 https://github.com/cjo4m06/mcp-shrimp-task-manager/issues/61#issuecomment-3240079086 해결법은 딱히 없고 그냥 클로드한테 수동으로 내용 채워달라고 하는게 현재로서는 쓸만해보입니다.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
For Citizen 댓글 1 좋아요 0 조회수 151

banbu.kr 사이트 접속이 안됩니다.

해결됨

[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법

제곧내

  • HTML/CSS
  • java
  • mysql
  • php
  • ai-활용-(ax)
김상진 댓글 2 좋아요 0 조회수 102

0.91버전이 최신버전 맞나요?

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

2025-07-10 0.91 버전 되어있는데, 이게 최신 맞을까요? 혹시 제가 잘못했나 싶어서, 이론은 이것만 외우면 되는거 맞을까요?

  • python
  • java
  • c
  • 정보처리기사
jin 댓글 2 좋아요 0 조회수 98

Unused property.....

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 네 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 네 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 네 [질문 내용] 여기에 질문 내용을 남겨주세요 왜 자꾸 Unused property 가 뜰까요?.... Gradle 업로드 해도 계속이러네요ㅠㅠ 제미나이와 몇시간을 여러방법을 썼는데 실패해서 처음 질문드려요.... .

  • java
  • spring
  • mvc
  • spring-boot
댓글 2 좋아요 0 조회수 142

클로드 편집기 폴더 변경 방법?

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

클로드 편집기에서 my-profile-site 를 띄우고 싶은데, 사진 보면 claude-code-mastery 로 되어있거든요? 이거 어떻게 바꿀수있나요?ㅠ 무조건 커맨트+O 로 해야할까요?

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
날고있는 거북이 댓글 2 좋아요 0 조회수 893

agent @ 제안 기능?

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

클로드 코드에서 @ 하면 현재 경로의 파일만 보이는데 강의에서는 agent 명도 제안을 해주네요? 기본 기능인가요?

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
cco 댓글 3 좋아요 0 조회수 102

정렬, 필터, 검색 등의 조건이 붙을 경우 최적화할 수 있는 방법이 무엇이 있을까요?

해결됨

스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판

안녕하세요. 게시판 관련 강의를 듣는 도중 궁금한 점이 있어 질문을 남깁니다. 강의에서는 Snowflake 기반 단순 정렬을 기준으로 커버링 인덱스를 설명해주셨는데요, 실무에서는 여러 정렬 조건과 필터, 검색 조건이 함께 붙는 경우가 많습니다. ✅ 이런 복합적인 조회 패턴에서도 커버링 인덱스를 중심으로 설계하는 것이 적절한지, 아니면 다른 전략을 어떻게 사용해야 하는지 궁금합니다.(설명이 길어질 경우 간단한 힌트라도 부탁드립니다.) 💥 걱정하는 부분 정렬되는 컬럼 전부에 대해 인덱스를 걸면 더 문제가 발생할 것 같아요. 검색 %검색어% 의 경우에는 결국엔 full_scan 이어서 성능 최적화가 불가능하다.

  • java
  • mysql
  • spring-boot
  • kafka
  • redis
dltkdcksqkqh 댓글 2 좋아요 0 조회수 138

공부방법

미해결

김영한의 실전 자바 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 메모리 구조, 동작 순서, 코드는 이해가 가는데 막상 문제와 풀이 부분에서 어떻게 해야할지 모르겠어요. 뭔가 이렇게 해야 될 것 같다 까진 생각이 나는데 막상 코드를 치려고 하면 막막해지는 느낌.. 이런 문제는 어떻게 해결 해 나가야 될까요? 경험 부족일까요?

  • java
  • 객체지향
집가고싶다 댓글 2 좋아요 0 조회수 118

static이 있는걸 참조하게 되면

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

A obj= new C(); 업캐스팅 상태인거같은데 근데 그 클래스가 static이 붙어서 4라는 출력을 못하고 계속 static이 안붙으면 계속 참조를 하게 되는데 오버라이딩은 참조가 안되고 보니까 static g가 2개인데 c.g는 참조지만 static이기때문에 오버라이딩불가고 a.g는 static이 붙었지만 obj.g가 static메소드이기 때문에 a.g로 된다라는 정수뽑는 문제인데 이건 업케스팅영상도 보고 다른 영상도 다시 봐야 하나보군요 문제집을 보고 질문올립니다 아직도 뭐가 뭔지 햇갈리는데 정리도 하고 기출문제도 풀어봐야하나 보내요 ㅎ;;;

  • java
  • 정보처리기사
조민우 댓글 2 좋아요 0 조회수 59

안녕하세요 오늘 짜던 코드에서 질문이 있습니다

해결됨

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

어제부터 shrimp task manager를 활용해서 진행 중인데 갑자기 저렇게 중국어 문구가 나올 때가 있네요 신경 안써도 되는걸까요? 알려주신 깃허브 통해서 쉬림프 mcp를 받았습니다

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
  • 지금-베스트
Jiho Jang 댓글 2 좋아요 0 조회수 133

안녕하세요~ 회수라는 의미에 대해서 질문합니다.

해결됨

기초 탄탄! 독하게 시작하는 Java - Part 2 : OOP와 JVM

안녕하세요~~ 강의 너무 잘 듣고 있습니다. 강의 듣다가 한가지 의문이 생겨서 질문 남깁니다. GC가 회수한다 라고 말씀을 해주셨는데 여기서 회수는 정확히 어떤 의미일까여? reachable 가능성을 따져서 도달 가능한 인스턴스를 제외한 나머지 공간을 OS에 반납(실제 OS에 반납은 아닐거 같지만 JVM에 반납한다? 라는 의미로 얘기합니다..)한다는 의미일까여 아님 그냥 JVM이 사용가능한 공간으로 만들어 주는것 (free와 같은 개념)으로 만들어 주는걸 의미하는 걸까여? 간략하게 여기서 회수란 메모리 재사용 가능 상태(실제 값이 0으로 초기화 되거나 그런게 아니라 연결을 끊음으로써 언제든 그 공간을 새롭게 할당 가능한 상태)로 돌림으로 이해하면 될까여 아님 실제로 반납을 해주는걸까여....? 진짜 어렵네여 ㅠㅠ 일하면서도 단한번 제대로 잡고간적 없는듯 해서 맨날 헷갈리는 개념입니다 ㅠㅠ

  • java
  • 객체지향
  • jvm
  • data-structure
매운세데스 댓글 1 좋아요 0 조회수 103

인기 태그

인프런 TOP Writers

주간 인기글