[React] Lamp 쇼핑몰 구현하기 6 (삭제기능 / carousel 구현)

LAMP-SHOPPING-CLIENT

1. product/index.js

삭제버튼 만들고,

<div>
                <span onClick={productDel}>삭제하기</span>
</div>

삭제 기능 구현

const productDel = () => {
    axios.delete(`http://localhost:3000/product/${id}`)
    .then(result=>{
        console.log("삭제되었습니다.");
    })
    .catch(e=> {
        console.log(e);
    })
}

 

LAMP-SHOPPING-SERVER

2. server.js

삭제 기능 구현

// delete 삭제하기
app.delete('/product/:id', async (req, res)=>{
    const params = req.params;
    models.Product.destroy({ where: {id: params.id} })
    .then( res.send("상품이 삭제되었습니다."))
})

+) 리다이랙션 걸어주기

 

LAMP-SHOPPING-CLIENT

3. config/contansts.js 파일 생성

export const API_URL = "http://localhost:3000";

http://localhost:3000 부분 다 ${API_URL}로 바꿔주기

JSX에서 ` 쓰려면 {}로 감싸주기 !

 

LAMP-SHOPPING-SERVER

4. npm install -g nodemon 설치

계속 서버 안돌려줘도 됨, 변경사항 알아서 캐치

앞으로 npx nodemon server.js

 

LAMP-SHOPPING-CLIENT

5. main/index.js

ANTD carousel 붙이기

import React from 'react';
import './index.scss';
import axios from 'axios';
// import useAsync from './useAsync';
import useAsync from '../customHook/useAsync';
import MainProduct from './MainProduct';
import { API_URL } from '../config/contansts'
import { Carousel } from 'antd';

// 비동기
async function getProducts() {
    const response = await axios.get(`${API_URL}/products`);
    return response.data;
}
// carousel
const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    position: 'absolute',
    bottom: '50px'
};
const MainPage = (props) => {
    // * 쌤 (비동기)
    const [state ] = useAsync(getProducts, [])
    const { loading, data:products, error} = state;
    if(loading) return <div>로딩중 ......</div>
    if(error) return <div>에러가 발생했습니다.</div>
    if(!products) return <div>로딩중입니다.</div>

    // * 김효진 (비동기)
    // const [ state ] = useAsync(getProducts);
    // const { loading, data:products, error } = state;
    // if(loading) return <div>로딩중...</div>
    // if(error) return <div>에러가 발생했습니다.</div>
    // if(!products) return <div>상품이 없습니다.</div>;
        
    // 원래 받아오던 방법 (비동기 x)
    // const [ products, setProducts ] = useState([]);
    // useEffect(()=>{
    //     axios.get("${API_URL}/products")
    //     .then((result)=>{
    //         const products = result.data;
    //         setProducts(products);
    //     }).catch((e)=>{
    //         console.log(e);
    //     })
    // }, [])
    // if(products === [] ) return <div>로딩중입니다.</div>
    
    // carousel
    const onChange = (currentSlide) => {
        console.log(currentSlide);
      };
    return (
        <div>
            <div id="main">
                    <div id="banner">
                    <Carousel afterChange={onChange} autoplay>
                    <div>
                        <img src="images/banners/banner1.png" alt="" />
                        <h3 style={contentStyle}>1</h3>
                    </div>
                    <div>
                        <img src="images/banners/banner1.png" alt="" />
                        <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                        <img src="images/banners/banner1.png" alt="" />
                        <h3 style={contentStyle}>3</h3>
                    </div>
                    </Carousel>
                </div>
                <div id="product-list" className='inner'>
                    <h2>그린조명 최신상품</h2>
                    <div id="product-items">
                        {/* 나중에 map 이용해서 밑에꺼 8개 뿌려줄거임 */}
                        {products.map(product => <MainProduct key = {product.id} product={product} />)}   
                    </div>
                </div>
            </div>
        </div>
    );
};
export default MainPage;