합니다, 개발공부📝 합니다, 개발공부📝

먼저 페이지사이즈를 정하고 정해진 수만큼 보여지도록 설정한다. 기능을 추가하기 위해서 백엔드와 프론트엔드 모두 다음과 같은 내용을 추가해준다. 먼저 backend(productRouter.js) productRouter.get('/' ,expressAsyncHandler(async(req, res)=>{ const pageSize = 3; const page = Number(req.query.pageNumber)||1; const seller = req.query.seller || '' const name = req.query.name || '' const category = req.query.category || '' const min = req.query.min && Number(req.query.m..

먼저 console.cloud.google.com에가서 프로젝트를 생성한다. 새로운 credential을 생성한다. 키를 복사해서 enable을 클릭하고 manage로 들어간다. 아까 복사한 api key를 최상위 폴더의 .env파일에 저장한다. JWT_SECRET = somethingsecret PAYPAL_CLIENT_ID = AeYAR3plI8AMo9Tmu-NUmDnNzEk5K1Pmhu1csipoH_Y7RGnOi5s6fcJywoGgahvu4ENE9ran7hBCAqoq GOOGLE_API_KEY = AIzaSyD_nYNcNYSFLZiSqDN29mnbdKUTPb93Neg 다음과 같이 googleAPI를 입력한다. server.js(paypal처럼) app.get('/api/config/google', ..

상품 디테일 페이지 아랫부분에 해당 상품에 대한 리뷰를 작성하는 란을 만든다. product screen에 리뷰남기기 란을 만든다. (row-top이 끝나는 부분에) const userSignin = useSelector(state => state.userSignin) const {userInfo} = userSignin const [rating, setRating] = useState(0) const [comment, setComment] = useState('') const submitHandler = (e) =>{ e.preventDefault(); if(comment && rating){ dispatch(createComment(productId, {rating, comment, name:user..

우선 serchbox component를 만들자. components>SearchBox.js import React, { useState } from 'react' function SearchBox(props) { const [name, setName] = useState('') const submitHandler=(e)=>{ e.preventDefault(); props.history.push(`/search/name/${name}`) } return ( setName(e.target.value)} /> ) } export default SearchBox app.js에 추가하는데 route의 render를 이용해서 history기능도 사용할 수 있도록 한다. amazona ( )}> style추가 /*..

홈스크린에 topseller들을 보여주는 carousel을 추가할 것이다. frontent 에 react carousel을 추가하자 npm install react-responsive-carousel 홈스크린에 carousel을 넣어주자. import {Carousel} from 'react-responsive-carousel'; import 'react-responsive-carousel/lib/styles/carousel.min.css' useRouter로 가서 탑셀러들을 보여주는 라우트를 생성한다. 내림차순으로 정렬하고 그중에서 탑3만 가지고 온다. userRouter.get('/top-sellers', expressAsyncHandler(async(req, res)=>{ const topSelle..

우선 셀러의 정보를 나타내는 페이지를 만들어보자. SellerPage.js import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import { listProducts } from '../actions/productActions' import { detailsUser } from '../actions/userActions' import LoadingBox from '../components/LoadingBox'; import MessageBox from '../components/MessageBox'; import Rating from '../components/Rating'; funct..

셀러들이 관리하는 페이지를 만들어보자. 셀러로 등록된 사람들은 상품과 들어온 주문들을 관리할 수 있다. 먼저 app.js에서 셀러 메뉴를 만들어보자. { userInfo && userInfo.isSeller && ( Seller {' '} Products Orders ) } {userInfo && userInfo.isAdmin && ( AdminRoute처럼 셀러들만 들어갈 수 있는 SellerRoute를 만들어주자. components>SellerRoute.js import React from 'react' import { useSelector } from 'react-redux' import { Redirect, Route } from 'react-router-dom' function SellerRo..

모든 유저의 정보를 가지고 오는 userRouter를 만들어보자. userRouter.get('/', isAuth,isAdmin, expressAsyncHandler(async(req, res)=>{ const users = await User.find({}) res.send(users); })) UserListScreen.js import React, { useEffect } from 'react' import { useDispatch } from 'react-redux' import LoadingBox from '../components/LoadingBox' import MessageBox from '../components/MessageBox' function UserListScreen() { co..