Introduction - React Three FiberReact-three-fiber is a React renderer for three.js.r3f.docs.pmnd.rs 1. React-three-fiberReact-three-fiber는 React 기반으로 Three.js를 사용할 수 있게 해주는 라이브러리입니다. Three.js는 3D 그래픽 렌더링에 있어 가장 널리 사용되는 JavaScript 라이브러리이지만, DOM과는 별개의 렌더링 환경을 필요로 합니다. React-three-fiber는 이를 React의 상태 관리 및 컴포넌트 구조와 통합하여 다음과 같은 장점을 제공합니다.https://r3f.docs.pmnd.rs/getting-started/introduction Introduct..

개발 라이브러리 1. DOM -> React   2. SVG -> D3.js (Data visualizing)https://d3js.org/ D3 by Observable | The JavaScript library for bespoke data visualizationD3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibilityd3js.org  3. Canvas ->Three.js 2D -> p5.js , pixi.js (게임업계에서 많이 사용함)   3D -> Three.js , babylon.js https://threejs.org/ Thre..

나는 이때까지 map을 사용해서 리스트를 랜더링 할 때 보통 데이터에 이미 고유한 ID가 있다면 그 ID를 사용하지만 없는 경우에는 index를 넣는 경우가 있었는데이는 권장하지 않는 방법이라고 한다.   key에 index 값을 넣지 않는 것이 권장되는 이유는 리스트 항목의 순서나 내용이 변경될 때 예상치 못한 렌더링 문제를 일으킬 수 있기 때문이다.1. 항목 순서 변경 시 문제리스트 항목의 순서가 바뀌면, index 값은 그대로 유지되기 때문에 리액트는 항목 자체가 변경되었음을 인식하지 못한다. 이는 결과적으로 불필요하거나 잘못된 렌더링을 유발할 수 있다. 예를 들어, 항목이 삽입되거나 삭제될 때, 각 항목의 key가 여전히 같은 index 값을 가지면 리액트는 항목이 그대로 있다고 잘못 판단할 수 ..

홈페이지 검색창에 검색어를 입력 후 검색 버튼을 클릭할 경우 ProductList페이지로 이동하여 검색 결과를 출력하도록 함 Navbar.jsx useState 로 search를 추가한다. 검색창(input)의 내용이 변경될 때마다 setSearch로 검색어를 저장한다. 그리고 onSubmit 이벤트로 검색 버튼을 클릭할 경우 handleSubmit을 실행하여 검색어가 공백이 아닐 경우에만 navigate를 사용해 products로 이동한다. 파라미터로는 search= 검색어에 공백을 제거해서 보낸다. const Navbar = ({ user, cartCount }) => { const [search, setSearch] = useState(""); //검색어 const navigate = useNavi..

대표 상품을 가져오기 위한 주소는 아래와 같다. [GET] 대표 상품 가져오기 - http://localhost:5000/api/products/featured 그리고 주요 제품은 3개가 들어있다. 현재는 위와 같이 주요 제품들이 표시 되는데 useData를 사용해서 백엔드에서 주요 제품을 받아온 다음에 ProductCard로 넘겨주면 되겠다. import useData from "../../Hook/useData"; import ProductCard from "../Products/ProductCard"; import ProductCardSkeleton from "../Products/ProductCardSkeleton"; import "./FeaturedProducts.css"; const Featu..

이미 로그인 되어있는 유저의 경우 login 및 signup페이지 이동 시 홈페이지로 이동한다. import React, { useContext } from "react"; import { Navigate, Route, Routes } from "react-router-dom"; import HomePage from "../Home/HomePage"; import ProductsPage from "../Products/ProductsPage"; import SingleProductPage from "../SingleProduct/SingleProductPage"; import SignupPage from "../Authentication/SignupPage"; import LoginPage from "...

orderService.js를 생성한다. 그리고 App.jsx에서 cart 프로바이더에 setCart를 추가한다. setCart는 장바구니에 담는 함수 CartPage.jsx에서 setCart를 가져온다. const CartPage = () => { const [subTotal, setSubTotal] = useState(0); //배송비 제외 합계 const user = useContext(UserContext); const { cart, removeFromCart, updateCart, setCart } = useContext(CartContext); 그리고 결제하기를 클릭하면 실행될 checkout함수를 추가한다. //주문하기 const checkout = () => { const oldCart =..

ProductCard.jsx에 useContext를 사용해서 userContext를 가져온다. userContext에는 현재 로그인 중인 유저의 정보가 담겨있고 const ProductCard = ({ product }) => { const { addToCart } = useContext(CartContext); const user = useContext(UserContext); 장바구니 버튼에 조건을 추가하여 유저가 있을 경우에만 노출하게 한다. {/* 재고가 있을 경우 및 유저가 있을 경우에만 장바구니 담기 표시 */} {product?.stock > 0 && user && ( addToCart(product, 1)} > )} 1. 유저 없을 경우 2. 유저 있을 경우 마찬가지로 SingleProdu..

ProductsList.jsx를 {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} 아래와 같이 수정한다. {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} ProductCard.jsx에서는 const ProductCard = ({ product }) => { 로 수정하고 아래의 출력할 데이터들의 앞에 . product?.를 붙여서 수정한다. import "./ProductCard.css"; import star from "../../assets/white-star.png"; import bas..

App.jsx에 장바구니 개수 증감 할 함수를 추가한다 // 장바구니 상품 개수 증감( type : 감소,증가 ) const updateCart = (type, id) => { const updatedCart = [...cart]; const productIndex = updatedCart.findIndex( //findIndex:update 할 제품의 id의 idnex를 찾는다. (item) => item.product._id === id ); //만약 타입이 increase 이면 기존의 수량에서 증가한다. if (type === "increase") { updatedCart[productIndex].quantity += 1; setCart(updatedCart); } //만약 타입이 decrease ..