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

먼저 배송페이지 상단에 배송진행과정을 표시하는 component를 만들 것이다. components>CheckoutSteps.js파일을 생성한다. 진행상황에 따라서 다르게 active되도록 설정할 것이다. import React from 'react' function CheckoutSteps(props) { return ( Sign - In Shipping Payment Place Order ) } export default CheckoutSteps index.css에서 스타일을 줘보자. /* Checkout Steps */ .checkout-steps >div{ border-top: 0.3rem #c0c0c0 solid; color: #c0c0c0; flex: 1; padding: 1rem; font-..

먼저 api를 생성한다. userRouter.js userRouter.post('/register', expressAsyncHandler(async(req, res)=>{ const user = new User({ name: req.body.name, email:req.body.email, password: bcrypt.hashSync(req.body.password, 8) }) const createdUser = await user.save(); res.send({ _id:createdUser.id, name:createdUser.name, email:createdUser.email, isAdmin:user.isAdmin, token:generateToken(createdUser) }); })) reg..

screens>SigninScreen.js파일을 만들고 전체적 형식을 만든다. import React,{useState} from 'react' import {Link} from 'react-router-dom' function SigninScreen() { const [email, setemail] = useState("") const [password, setpassword] = useState("") const submitHandler = (e) =>{ e.preventDefault(); } return ( Sign In Email setemail(e.target.value)} /> Password setpassword(e.target.value)} /> Sign In New customer? {'..

우선 user router를 작성한다. 여기서 generateToken은 나중에 jsonwebtoken을 이용해서 authentification할 것이다. import express from 'express'; import data from '../data.js'; import User from '../models/userModel.js' import bcrypt from 'bcryptjs'; import expressAsyncHandler from 'express-async-handler' const userRouter = express.Router(); userRouter.post('/signin', expressAsyncHandler(async (req, res)=>{ const user = awa..

먼저 서버에 mongoose설치하자. 제일 상위 디렉토리에서 npm install mongoose한다. 이제 백엔드에 usermodel을 만들어 줄것이다. 여기서 네가지 정보는 모두 필수적이다. import mongoose from 'mongoose'; const userSchema = new mongoose.Schema({ name:{ type:String, required:true }, email:{ type:String, required:true, unique:true }, password:{ type:String, required:true }, isAdmin:{ type:Boolean, default:false, required:true } }, {timestamps:true}) const Use..

카트정보를 리덕스에서 useSelector를 이용해서 가져오고, 이를 이용해서 카트아이템들의 정보를 화면에 띄우도록 할 것이다. 만약 카트가 비어있으면 cart is Empty메세지를 나타내게 하고, 쇼핑하러 랜딩페이지로 이동하는 링크를 걸어준다. 만약 비어있지 않다면 아이탬들의 이미지를 나타내고, 아이템 정보로 가는 링크를 걸어주고, 아이템 qty정보와 가격정보, 목록에서 제거 버튼을 화면에 보이도록 설정한다. import { Link } from 'react-router-dom' import React, { useEffect } from 'react' import {useDispatch, useSelector} from 'react-redux' import { addToCart } from '../a..

먼저 재고가 0개 이상이라면 상품의 선택란을 표기하는 부분이 생기도록 해보자. productscreen.js를 다음과 같이 설정해준다. import React,{useEffect, useState} from 'react' const [qty, setQty] = useState(1); {product.countInStock > 0 && ( Qty setQty(e.target.value)}> {[...Array(product.countInStock).keys()].map( (x)=>({x+1} ) )} Add to Cart )} addToCarthandler함수도 설정해주자. const addToCartHandler = () =>{ props.history.push(`/cart/${productId}?qty..

프론트엔드로 가서 npm install redux react-redux를 해준다. 가장 기본적인 리덕스를 이용해보자. initialState와 reduer를 만들어주고, 둘을 이용해서 리덕스 스토어를 생성한다. 이 리덕스 스토어는 단순히 product 데이터만 돌려보내줄 것이다. src>store.js import data from "./data"; import{createStore} from 'redux'; const initialState = {}; const reducer = (state, action)=>{ return {products:data.products}; } const store = createStore(reducer, initialState); export default store; ..