SingleProductPage.jsx import { useState } from "react"; import "./SingleProductPage.css"; const product = { id: 1, title: "상품 타이틀", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquid rerum a? Fugiat soluta facilis deleniti voluptatibus ab architecto dolores a, vero, beatae veniam error doloribus quia laudantium? Error fuga consequuntur quia accusantium? Conseq..

ProductsPage.jsx import "./ProductsPage.css"; const ProductsPage = () => { return ( {/* 왼쪽 카테고리 */} {/* 상품목록 */} ); }; export default ProductsPage; ProductsPage.css .products_page { display: grid; grid-template-columns: 1fr 4fr; padding: 20px; } grid-template-columns: 1:4 상품페이지의 공간을 분리해준다. App.jsx에 홈페이지 말고 ProductsPage 보이게 한다. import "./App.css"; import HomePage from "./components/Home/HomePage"..

히어로 섹션 사이에 주요 제품들을 보여줄 FeaturedProducts 컴포넌트를 생성한다. FeaturedProducts.jsx import "./FeaturedProducts.css"; const FeaturedProducts = () => { return ( 주요제품 상품 ); }; export default FeaturedProducts; FeaturedProducts.css .featured_products { margin: 65px; } .featured_products > h2 { font-size: 48px; text-align: center; margin-bottom: 65px; } .featured_products_list { justify-content: space-evenly; ma..

import React from "react"; const HomePage = () => { return ( {/* 상품들 */} {/* 히어로 섹션 */} ); }; export default HomePage; HeroSection.jsx , css생성 HeroSection.jsx import "./HeroSection.css"; import iphone from "../../assets/iphone-14-pro.webp"; const HeroSection = () => { return ( 아이폰 14 구매하세요 Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, quibusdam. 바로구매 ); }; export default Her..

components 폴더 생성 후 Navbar 폴더 안에 Navbar 컴포넌트 및 css파일을 생성한다. Navbar.jsx import "./Navbar.css"; const Navbar = () => { return ( myCart 검색하기 ); }; export default Navbar; Navbar.css .navbar { justify-content: space-between; padding: 0 40px; background-color: #fff; } .navbar_heading { margin-right: 20px; font-size: 32px; } .navbar_form { width: 450px; height: 40px; border: 1px solid #cdcdcd; border-ra..

해당 프로젝트는 백엔드는 스프링 부트로 할거라서 파이어베이스는 사용하지 않는다. $ npm create vite mycart 프로젝트 생성 react -> javascript 선택 cd mycart npm i code . npm run dev App.jsx import "./App.css"; function App() { return ( Navbar 라우팅 ); } export default App; App.css .app { display: grid; grid-template-rows: 80px auto; } rows 위 아래로 나눈다. .app에서 제일 처음 오는 nav가 80px이고 main는 auto를 준다. index.css @font-face { font-family: "GmarketSansM..

https://app.diagrams.net/ Flowchart Maker & Online Diagram Software Flowchart Maker and Online Diagram Software draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit d app.diagrams.net UseCase PPT https://www.canva.com/design/DAFzWvk1G_k/pNs..

터미널을 켜서 아래와 같이 입력한다. preview를 통해서 배포 후 작동 모습을 확인 할 수 있다. 그리고 넷트리파이에서 배포를 진행하고 있는데 위와 같은 오류가 떴다. 그래서 오류난 지점을 확인해보니 이런식으로 뜨는데, 실제 코드를 보니 대소문자가 바껴있어서 작동하는 오류임 넷리파이는 대소문자도 구분하여 보기때문에 정확하게 작성해야한다. 그래서 수정하니 잘 배포가 됐으나.. 이번에는 콘솔창에 아래와 같은 오류가 생김.. 서치한 결과 https://velog.io/@ooyk1204/Mixed-content-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0netlify-%EB%B0%B0%ED%8F%AC-%EC%98%A4%EB%A5%98-%EC%83%9D%..

여기 작업할 때 db를 수정이 좀 많이 들어감 처음에 설계한 DB는 장바구니에 있는 모든 항목들을 결제하기 페이지에서 다 가져왔었음. 근데 그렇게 하다보니 장바구니에 넣지않고 바로 결제하기를 클릭할 경우에는 장바구니에 있는 상품 + 결제하기 클릭한 상품이 결제하기 페이지로 넘어가게 됨. 그래서 이 단계를 구분하기 위해서 DB의 수정을 하기로 함 주문 준비를 나타내는 orderReady의 필드를 추가해서 1) 검색 결과에서 장바구니로 추가될 경우에는 orderReady를 false를 주고 2) 장바구니에서 를 클릭할 경우 orderReady 를 true로 업데이트한다. 그래서 결제하기 페이지에서 cart를 불러올 때 쿼리문에서 orderReady가 true인 상품들만 가져온다 3) 검색 결과에서 를 클릭할..

https://github.com/kmsbernard/react-daum-postcode GitHub - kmsbernard/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Contribute to kmsbernard/react-daum-postcode development by creating an account on GitHub. github.com npm i react-daum-postcode 라이브러리 설치 후 import { useDaumPostcodePopup } from "react-daum-postcode"; import하여 사용하면 된당 const [userFullAddress,..