카테고리를 클릭하면 카테고리에 해당되는 상품만 상품목록에 출력하게 만들거임 카테고리 link 는 아래와 같다. link={`/products?category=${category.name}`} category name이 쿼리스트링으로 전달된다. ProductsList.jsx에서 쿼리스트링을 받는다. //sidebar에서 카테고리 쿼리스트링을 받아온다. const [search, setSearch] = useSearchParams(); const category = search.get("category"); //모든 쿼리스트링 중 카테고리 const ProductsList = () => { //sidebar에서 카테고리 쿼리스트링을 받아온다. const [search, setSearch] = useSearc..

https://www.npmjs.com/package/react-loading-skeleton react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app.. Latest version: 3.3.1, last published: 7 months ago. Start using react-loading-skeleton in your project by running `npm i react-loading-skeleton`. There are 499 other project www.npmjs.com npm install react-loading-skeleton import Skeleton ..

반복되는 useState와 useEffect 등의 패턴을 커스텀 Hook을 만들어 사용한다. Hook 폴더 내에 useData.js를 생성한다. 순수 js의 경우에는 jsx으로 안해도됨 import { useEffect, useState } from 'react'; import apiClient from '../utils/api-client'; const useData = (url) => { const [data, setData] = useState([]); const [error, setError] = useState(''); useEffect(() => { apiClient .get(url) .then((res) => setData(res.data)) .catch((err) => setError(er..

$ npm i react-router-dom main.jsx에서 라우터 적용한다. BrowserRouter가 감싸고 있어야 라우팅을 사용 할 수 있다. import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( ); 만들어놓은 모든 페이지를 라우팅한다. import React from "react"; import { Route, Routes } from "r..

https://www.mongodb.com/try/download/community Try MongoDB Community Edition Try MongoDB Community Edition on premise non-relational database including the Community Server and Community Kubernetes Operator for your next big project! www.mongodb.com 몽고DB 다운로드 다운로드 파일 실행한다. Next-> Next-> complete -> Next-> Next-> Install-> 다운로드 되는 동안 mongoDB Shell도 다운로드 압축 풀기 mongosh.exe파일을 MongoDB가 설치된 폴더의 bin에 ..

복잡한 유효성 검사를 위해zod 라이브러리를 설치한다. SignupPage.jsx ,css 를 생성한다. import { useForm } from "react-hook-form"; import "./SignupPage.css"; import user from "../../assets/user.webp"; const SignupPage = () => { // const [profilePic, setProfilePic] = useState(null); const { register, handleSubmit, formState: { errors }, watch, } = useForm(); const submitData = (formData) => console.log(formData); //console.l..

LoginPage.jsx import "./LoginPage.css"; const LoginPage = () => { return ( 로그인 폼 Email Password Submit ); }; export default LoginPage; LoginPage.css .form_page { justify-content: center; } .authentication_form { width: 30%; padding: 32px 48px; margin-top: 32px; background-color: #fff; } .authentication_form h2 { font-size: 40px; margin-bottom: 30px; text-align: center; } .form_inputs div { displ..

알라딘 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 ..