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

socket io는 자바스크립 라이브러리이고 리얼타임 인터랙션을 만들어내는 라이브러리다. 최상위 폴더에 npm install socket.io server.js에 다음과 같이 입력해준다. import http from 'http' import {Server} from 'socket.io' const httpServer = http.Server(app); const io = new Server(httpServer,{cors:{origin:'*'}})//오류방지 const users = []; io.on('connection', (socket)=>{//연결끊기 socket.on('disconnect',()=>{ const user = users.find(x=>x.socketId===socket.id); if..

orderRouter로 가보자. get/다음에 작성해주자. mongoDB의 aggregate기능을 사용할 것이다. 각각의 주문들에 대해서 sum, 판매량 구하고, 각각의 사용자에 대해서 사용자 수를 구해서 사용한다. orderRouter.get( '/summary', isAuth, isAdmin, expressAsyncHandler(async (req, res) => { const orders = await Order.aggregate([ { $group: { _id: null, numOrders: { $sum: 1 }, totalSales: { $sum: '$totalPrice' }, }, }, ]); const users = await User.aggregate([ { $group: { _id: nu..

우선 mailgun.com에 들어가서가입을 해준다. 여기서 도메인을 생성하고 도메인을 클릭하면 여기서 apikey를 복사한다. .env에 추가해준다. 여기서 도메인은 api base url의 sandbox~이다. MALIGUN_API_KEY = ca4ad22c9e03a4a558b1bb875d3896f6-fa6e84b7-ea6a79b1 MALIGUN_DOMAIN = sandbox024144b1dd7844b5a7ccd9c1ceff518d.mailgun.org 최상위 폴더에서 npm install mailgun-js를 해준다. 백엔드의 utils.jsdp 다음을 추가해준다. import mg from 'mailgun-js' export const mailgun =() => mg({ apiKey: process..

먼저 페이지사이즈를 정하고 정해진 수만큼 보여지도록 설정한다. 기능을 추가하기 위해서 백엔드와 프론트엔드 모두 다음과 같은 내용을 추가해준다. 먼저 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..