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

이제 관리자가 들어온 주문을 볼 수 있는 페이지를 만들어보자. 먼저 모든주문을 조회하는 api를 만들자. orderrouter.js 여기서 populate는 모든주문정보중에서 특정정보만을 가지고 오도록 지정하는것이다. orderRouter.get('/', isAuth, isAdmin, expressAsyncHandler(async(req, res)=>{ const orders = await Order.find({}).populate('user', 'name'); res.send(orders); })) 이제 프론트엔드로와서 페이지를 만들어놓자. OrderListScreen.js import React, { useEffect } from 'react' import { useDispatch } from 're..

먼저 상품관리페이지를 만들자 . 프로덕스 리스트 스크린을 만든다. ProductListScreen.js import React, { useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { listProducts } from '../actions/productActions'; import LoadingBox from '../components/LoadingBox'; import MessageBox from '../components/MessageBox'; function ProductListScreen(props) { const productList = useSelector(state=>state.pro..

우선 유저디테일을 돌려주는 API를 작성하자. userRouter.get('/:id', expressAsyncHandler(async(req,res)=>{ const user = await User.findById(req.params.id); if(user){ res.send(user); }else{ res.status(404).send({message:'User Not Found'}); } })) ProfileScreen.js를 만들어준다. useSelector를 이용해서 리덕스에 저장된 유저 정보를 가져오고(아이디) usedispatch를 이용해서 리덕스에 정보를 저장한다. import React, { useEffect } from 'react' import {useDispatch} from 'rea..

우선 screens>orderhistoryScreen.js를 만들어준다. import React from 'react' function OrderHistoryScreen() { return ( Order History ) } export default OrderHistoryScreen 리덕스에서 오더 정보를 가져와서 보여주도록 하자. orderConstants.js export const ORDER_MINE_LIST_REWUEST = 'ORDER_MINE_LIST_REWUEST' export const ORDER_MINE_LIST_SUCCESS= 'ORDER_MINE_LIST_SUCCESS' export const ORDER_MINE_LIST_FAIL = 'ORDER_MINE_LIST_FAIL' orde..

먼저 샌드박스 계정을 만들고 sandbox로 앱을 create해준다. .env파일에 안전하게 보관한다. JWT_SECRET = somethingsecret PAYPAL_CLIENT_ID=AQ5wLOPTCxFTcWOJV43zenkyYO4C8E-e6U0E0znOHJuiysC7n4NB8QjkKJVgVC8ztpOfXupCKnISYBbc server.js에 클라이언트키에 접근하는 API를 만들어준다. app.get('/api/config/paypal', (req, res)=>{ res.send(process.env.PAYPAL_CLIENT_ID || 'sb') }) 만약 라이브로 하고싶다면 live로 앱을 생성해서 클라이언트 아이디 넣어주면 된다. 이제 orderscreen.js로 가보자. 다음고 같이 추가하고 ..

먼저 주문하면 주문아이디에 따라서 상세정보페이지로 가는 라우터를 만들것이다. orderRouter.js 오직 로그인된 사람만 자기 정보를 볼 수 있게 하기위해서 isAuth미들웨어를 추가한다. orderRouter.get('/:id', isAuth, expressAsyncHandler(async(req, res)=>{ const order = await Order.findById(req.params.id) if(order){ res.send(order); }else{ res.status(404).send({message:'Order Not Found'}) } })) 이제 프론트엔드로 가서 이 API를 사용하도록 하자. 이제 OrderScreen.js를 만들 것인데 디테일 페이지의 정보는 PlaceOrde..

우선 screen안에 PlaceOrderScreen.js를 만든다. import React from 'react' import { useSelector } from 'react-redux' import CheckoutSteps from '../components/CheckoutSteps' function PlaceOrderScreen(props) { const cart = useSelector(state=>state.cart); if(!cart.paymentMethod){ props.history.push('/payment'); } return ( Shipping Name:{cart.shippingAddress.fullName} Address:{cart.shippingAddress.address},{ca..

먼저 PaymentMethodScreen을 만든다. import React, {useState} from 'react' import CheckoutSteps from '../components/CheckoutSteps' import {useDispatch} from 'react-redux' function PaymentMethodScreen(props) { const [paymentMethod, setPaymentMethod] = useState("PayPal") const dispatch = useDispatch(); const submitHandler = (e) =>{ e.preventDefault(); dispatch(savePaymentMethod(paymentMethod)); props.hist..