알라딘 API를 사용해서 프로젝트를 진행하는데 CORS 에러가 생겼다. 개발 할 당시에는 CORS 확장 프로그램을 사용하여서 문제가 안생겼는데 배포를 하려니 상당히 거슬려서 어떻게하면 해결할 수 있는지 찾아봤음. 직접 API를 호출하면 제약이 발생하고, EXPRESS 서버를 도입하여 백엔드 서버를 거친 후 요청/응답이 이루어지도록 했다.(CORS 미들웨어) 일단 테스트로 만든 곳에서 동작하는것은 확인했다. 이제BookMarket에 적용하면되는데, 서버를 express 폴더에 npm init-y 로 package.json 생성 후 라이브러리들을 설치한다. 설치 완료되면 server.js 를 만들어서 안에 api를 불러올 수 있도록 코드를 짠다. // backend/server.js const express..

MyOrderPage.jsx import Table from "../Common/Table"; import "./MyOrderPage.css"; const MyOrderPage = () => { return ( 1 iPhone, Power Bank 1,205,000 원 배송중 ); }; export default MyOrderPage; 테이블의 Head부분은 컴포넌트 재사용한다. MyOrderPage.css .myorder_page { justify-content: center; width: 50%; margin: 0 auto; padding: 32px 48px; } App.jsx MyOrderPage 컴포넌트로 교체 {/* */} {/* */} {/* */} {/* */}

Cart 폴더 생성 후 CartPage.jsx 와 css 파일을 생성한다. import "./CartPage.css"; import remove from "../../assets/remove.png"; import user from "../../assets/user.webp"; import Table from "../Common/Table"; import QuantityInput from "../SingleProduct/QuantityInput"; const CartPage = () => { return ( Dooly dooly@naver.com iPhone 14 1,200,000 원 1,200,000 원 ); }; export default CartPage; CartPage.css .cart_page ..

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..