고딩 ai scientist

저번에 이어서 요번에는 카트 안에 있는 상품 총 금액 계산을 해보려고하는데요. 계산을 어떤 방식으로 해줄거냐면 item price x quantity 형태로 해줄 것입니다. 위에 순서대로 각 상품들 개수만큼 곱해서 더해주시면 되겠죠. 그리고 그전에 저희가 처리해줘야하는게 있는데요. 위 사진처럼 바꿔주셔야합니다. 아니면 오류가 뜨게 됩니다. 결과:

저번에는 뿌려준 데이터들을 가져오기만 하였는데요. 그래서 요번에는 상품 카트 페이지에 해당하는 UI를 보이게하고 거기에 데이터들을 뿌려주는 작업을 해주도록하겠습니다. 순서를 말하자면, 1. CartPage를 위한 UI 만들기 -> UserCardBlock Component 2. 데이터베이스에서 가져온 데이터를 브라우저에서 보여주기 3. 카트 안에 있는 상품 총 금액 계산 -> item price x quantity 4. 카트에서 제거하는 기능 만들기 일단 첫번째 단계인 UI에서 카트에 들어간 상품 정보들을 보이게하는 부분은 컴포넌트를 만들어서 보이게 해줄텐데요. 컴포넌트 이름은 UserCardBlock Component로 해주겠습니다. UserCardBlock.js 결과:

1. 폴더 이름 mkdir 사용함으로써 만들어주기 2. cd를 통해서 폴더 위치로 이동 3. npm install -g create-react-app을 통해서 react project 만들기 4. React app 만들기 5. management라는 폴더가 만들어진 것을 볼 수 있습니다. 6. react app 구동 결과:

저번에 이어서 카트 페이지에 상품들을 가져와보도록하겠습니다. 가져올 때 상품 카트에 넣은 개수를 확인해야하는데 데이터베이스를 보면 products 컬랙션에 quantity에 대한 정보가 없는 것을 알 수 있습니다. 그래서 ursers안에 있는 quantity 정보를 가져와서 products 컬랙션에 합해줘서 카트 페이지에 뿌려줘야합니다. 그 작업을 지금 해주도록하겠습니다. user_reducer.js types.js CartPage.js product.js 이렇게 productId를 이용해서 DB에서 productId와 같은 상품의 정보를 가져올 수 있습니다. 그래서 이렇게 가져온 다음에 user_actions에서 위처럼 처리해주는 것을 다음에 해주도록하겠습니다.

저번에 Add to Cart를 누름으로써 해당 상품을 카트에다가 넣는 기능을 만들었잖아요. 거기서 한가지 작업을 더 해주도록 하겠습니다. users.js에서 카트에 관한 작업 처리를 해주겠습니다. 그리고 history에 관해서 설명하자면 결제 내역에 관한 것입니다. 이렇게 Add to Cart 버튼을 통해서 user안에 카트필드랑 history 필드 넣는 것을 성공하였는데요. 이제는 카트 페이지 만드는 것을 해주도록하겠습니다. 일단 쇼핑 카트 페이지 만드는 순서를 말하자면, 1. 빈 쇼핑 카트 페이지 만들기 2. 카트 페이지 Route 만들기 3. Cart 페이지를 위한 탭을 만들기 4. 카트 안에 들어가 있는 상품들을 데이터베이스에서 가져오기 views 폴더 안에 CartPage라는 폴더를 만들고 그 ..

저번에 Add to Cart 버튼을 만들어줬는데요. 그래서 그 버튼을 클릭했을 경우에 그 해당하는 상품이 쇼핑 카트에 담기는 기능을 만들어주도록 하겠습니다. 그런데 생각을 해보면 상품이 카트에 들어간거에 대한 정보를 저희가 데이터베이스에 또 저장을 해야겠죠. 그래서 저희가 user model에다가 cart와 history 필드를 만들어주도록하겠습니다. 이 다음에는 Add to Cart 버튼을 눌렀을 때, 필요한 정보들을 Cart 필드로 넣어주는 작업을 해주도록 하겠습니다. 필요한 정보들에 대해서 말해주자면 상품에 대한 id가 필요하고 개수가 필요하고 그리고 그 상품을 카트에 언제 넣었는지에 대한 정보를 나타내는 date(날짜 정보)가 필요합니다. 그리고 요 작업은 그냥 전에 했던 것처럼 axios를 사용..

저번에는 ProductImage 부분을 처리해줬는데 요번에는 ProductInfo 부분을 처리해줄 것입니다. ProductInfo 부분을 antdesign에서 descriptions라는 것을 이용하여 ui 부분을 해결해주겠습니다. https://ant.design/components/descriptions/ Descriptions - Ant Design The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both style and labelStyle(or contentStyle) configured, both of them will work. And next one will overwri..

상품 상세 페이지를 이어서 만들텐데요. 상품 상세 페이지는 두가지 컴포넌트로 나뉘어져있는데요. productInfo 컴포넌트와 productImage 컴포넌트로 나뉘어져있습니다. 상품 상세페이지에서 이미지 부분을 슬라이드 형식으로 나타내고 전체화면으로 나타낼 수 있게 할텐데요. 그러기 위해서는 react-image-gallery라는 라이브러리를 사용해야합니다. 상품에 해당하는 이름을 정상적으로 불러오는 것을 확인하실 수 있습니다. ProductImage랑 ProductInfo 두가지 컴포넌트를 생성하여 화면에 사진과 사진에 대한 설명을 뜨기 위해 위치를 잡아주는 코드 짰습니다. 일단 ProductImage 컴포넌트부터 처리해줄텐데요. 이미지 부분을 image-gallery라는 모듈을 통해서 처리를 해주려..

상품 상세 페이지를 만들기 위한 순서를 말하자면 1. 빈 상품 상세 페이지 만들기 2. Product detail page를 위한 Route 만들기 3. product 정보를 DB에서 가져오기 4. Product detail 페이지 UI만들기(productInfo Component, productImage Component) 이제 상품을 클릭했을 때 그 상품에 해당하는 URL로 이동하게해줬습니다. 이제 그 상품 path에 해당하는 컴포넌트를 생성해줘야합니다. views/DetailProductPage/DetailProductPage.js App.js 아무나 들어갈 수 있으니 null로 입력 정상적으로 라우팅하는 부분을 만드는 것에 성공한 것을 볼 수 있습니다. 이제 스탭 3번인 product 정보를 DB..

저번에 이어서 검색 기능을 만들어줄텐데요. 작업 순서에 대해서 말하자면 1. 검색 값을 이용하여 getProductFunction을 작동시키기 2. Search 기능을 위해서 getProduct Route 수정하기 3. Search 기능을 가능하게 하기 위해서 Product Model 무엇을 추가 해주기 getProductFunction 작동시키기 부분 다음으로는 Search 기능을 위해서 getProductRoute를 수정해줘야하는데요. 이제 마지막으로 한가지 더 해줘야할 것이 있습니다. 그것은 ProductModel에 무엇을 추가해줘야하는데요. Product model에 들어가주면 이렇게 있습니다. 이렇게 있는 필드들중에서 검색했을 경우 무슨 필드에 중점적으로 처리해야할지에 관해서 지금 작업을 해줘야..