<step71>'react_shoppingmall홈페이지 구현

노력이 좋아서

<step71>'react_shoppingmall홈페이지 구현_step3'

zoaseo 2022. 7. 1. 09:32

clone 하기

Main

MainProduct.js

import React from 'react';
import { Link } from 'react-router-dom';

const MainProduct = ({product}) => {
    return (
        <div className='product-card' key={product.id}>
            <Link to={`/product/${product.id}`}>
            <div className='product-img'>
                <img src={product.imgsrc} alt="" />
            </div>
            <div className='product-contents'>
                <span className='product-name'>{product.name}</span>
                <span className='product-price'>{product.price}</span>
                <div className='product-seller'>
                    <img src="images/icons/avatar.png" alt="" />{product.seller}
                </div>
            </div>
            </Link>
        </div>
    );
};

export default MainProduct;

index.js

import React, { useEffect, useState, useReducer } from 'react';
import './index.scss';
import axios from 'axios';
import MainProduct from './MainProduct';

const MainPage = () => {
    const [ products, setProducts ] = useState([]);
    useEffect(()=>{
        axios.get("http://localhost:3000/products")
        .then((result)=>{
            const products = result.data.products;
            setProducts(products);
        }).catch((e)=>{
            console.log(e);
        })
    },[]);
    if(products === []) return <div>로딩중입니다.</div>
    return (
        <div>
            <div id="main">
                <div id="banner">
                    <img src="images/banners/banner1.png" alt=""/>
                </div>
                <div id="product-list" className="inner">
                    <h2>그린조명 최신상품</h2>
                    <div id="product-items">
                        {products.map(product=> <MainProduct key={product.id} product={product}/>)}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MainPage;

product

index.js

import React, { useState, useEffect } from 'react';
import "./product.scss";
import axios from 'axios';
import { useParams } from 'react-router-dom';

const ProductPage = () => {
    const [ product, setProduct ] = useState(null);
    // useParams() 실행되면 파라미터 값을 가지고 있는 객체를 반환
    // product/1
    const { id } = useParams();
    useEffect(function(){
        axios.get(`http://localhost:3000/product/${id}`)
        .then(result=>{
            const data = result.data;
            setProduct(data);
        })
        .catch(e=>{
            console.log(e);
        })
    },[])
    if(!product) return <div>로딩중입니다....</div>
    return (
        <div className='inner'>
            <div id="image-box">
                <img src="/images/products/product1.jpg" alt="" />
            </div>
            <div id="profile-box">
                <ul>
                    <li>
                        <div>
                            <img src="/images/icons/avatar.png" alt="" />
                            <span>{product.seller}</span>
                        </div>
                    </li>
                    <li>
                        {product.name}
                    </li>
                    <li>
                        {product.price}원
                    </li>
                    <li>등록일 2022년 6월 2일</li>
                    <li>상세설명 </li>
                </ul>
            </div>
        </div>
    );
};

export default ProductPage;

App.js

import './App.css';
import Footer from './include/Footer';
import Header from './include/Header';
import MainPage from './main';
import ProductPage from './product';
import { Routes, Route } from 'react-router-dom';
import UploadPage from './upload';

function App() {
  return (
    <div className="App">
      <Header/>
        <Routes>
          <Route path="/" element={<MainPage/>}/>
          <Route path="/product/:id" element={<ProductPage/>}/>
          <Route path="/upload" element={<UploadPage/>}/>
        </Routes>
      <Footer/>
    </div>
  );
}

export default App;

server.js

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;

// json 형식의 데이터를 처리할 수 있게 설정
app.use(express.json());
// 브라우저 cors이슈를 막기위해 사용(모든 브라우저의 요청을 일정하게 받겠다)
app.use(cors());

// 요청처리
// app.메소드(url, 함수)

app.get('/products', async(req,res)=>{
    const result = {
        products: [
            {
                id: 1,
                name: "거실조명",
                price: 50000,
                imgsrc: "images/products/product1.jpg",
                seller: "green",
            },
            {
                id: 2,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product2.jpg",
                seller: "green",
            },
            {
                id: 3,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product3.jpg",
                seller: "green",
            },
            {
                id: 4,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product1.jpg",
                seller: "green",
            },
            {
                id: 5,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product2.jpg",
                seller: "green",
            },
            {
                id: 6,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product3.jpg",
                seller: "green",
            },
            {
                id: 7,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product1.jpg",
                seller: "green",
            },
            {
                id: 8,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product2.jpg",
                seller: "green",
            },
        ]
    }
    res.send(result);
});
// method get이고 url은 /product/2로 요청이 온 경우 
app.get('/product/:id', async (req,res)=>{
    const params = req.params;
    const { id } = params;
    const product ={
            id: id,
            name: "아동조명",
            price: 50000,
            imgsrc: "images/products/product2.jpg",
            seller: "green",
    }
    res.send(product);
});
app.post('/green',async (req,res)=>{
    console.log(req);
    res.send('그린 게시판에 게시글이 등록되었습니다.');
});
// 실행
app.listen(port, ()=>{
    console.log('쇼핑몰 서버가 동작중입니다.');
});

Server에 설치

Sqlite와 Sequelize 사용하기

1. sqlite와 sequelize 설치하기

npm install sequelize sqlite3

2. sequelize 기본환경 설치

npm install -g sequelize-cli

npx sequelize init

3. config.json 수정하기

server.js

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;
const models = require('./models');

// json 형식의 데이터를 처리할 수 있게 설정
app.use(express.json());
// 브라우저 cors이슈를 막기위해 사용(모든 브라우저의 요청을 일정하게 받겠다)
app.use(cors());

// 요청처리
// app.메소드(url, 함수)

app.get('/products', async(req,res)=>{
    const result = {
        products: [
            {
                id: 1,
                name: "거실조명",
                price: 50000,
                imgsrc: "images/products/product1.jpg",
                seller: "green",
            },
            {
                id: 2,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product2.jpg",
                seller: "green",
            },
            {
                id: 3,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product3.jpg",
                seller: "green",
            },
            {
                id: 4,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product1.jpg",
                seller: "green",
            },
            {
                id: 5,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product2.jpg",
                seller: "green",
            },
            {
                id: 6,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product3.jpg",
                seller: "green",
            },
            {
                id: 7,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product1.jpg",
                seller: "green",
            },
            {
                id: 8,
                name: "아동조명",
                price: 50000,
                imgsrc: "images/products/product2.jpg",
                seller: "green",
            },
        ]
    }
    res.send(result);
});
// method get이고 url은 /product/2로 요청이 온 경우 
app.get('/product/:id', async (req,res)=>{
    const params = req.params;
    const { id } = params;
    const product ={
            id: id,
            name: "아동조명",
            price: 50000,
            imgsrc: "images/products/product2.jpg",
            seller: "green",
    }
    res.send(product);
});
app.post('/green',async (req,res)=>{
    console.log(req);
    res.send('그린 게시판에 게시글이 등록되었습니다.');
});
// 실행
app.listen(port, ()=>{
    console.log('쇼핑몰 서버가 동작중입니다.');
    // sequelize와 데이터베이스 연결 작업
    // 데이터베이스 동기화
    models.sequelize
    .sync()
    .then(()=>{
        console.log('DB연결 성공');
    })
    .catch(()=>{
        console.error(e);
        console.log('DB연결 에러');
        // 서버실행이 안되면 프로세스를 종료
        process.exit();
    })
});

models

products.js

// Common.js 구문 내보내기
// module.exports
// 테이블을 모델링하는 파일
module.exports = function(sequelize, DataTypes){
    // 컬럼 name, price, imageUrl, seller
    // 제약조건 allowNull : 컬럼의 값이 없어도 되는지 여부 (default:true)
    const product = sequelize.define('Product',{
        name: {
            type: DataTypes.STRING(20),
            allowNull: false,
        },
        price: {
            type: DataTypes.INTEGER(20),
            allowNull: false,
        },
        imageUrl: {
            type: DataTypes.STRING(500),
        },
        seller: {
            type: DataTypes.STRING(200),
            allowNull: false,
        }
    });
    return product;
}

DB Browser for SQLite 설치

Sqlite 데이터베이스를 GUI환경에서 보여주는 도구

https://sqlitebrowser.org/dl/

Downloads - DB Browser for SQLite

(Please consider sponsoring us on Patreon 😄) Windows Our latest release (3.12.2) for Windows: Windows PortableApp Note - If for any reason the standard Windows release does not work (e.g. gives an error), try a nightly build (below). Nightly builds ofte

sqlitebrowser.org

* sqlite 데이터 조회하기

불러오기

const models = require('./models');

여러 개 데이터 조회하기

models.Product.findAll()

.then(products=>{

res.send({products})

})

하나만 조회하기

models.Product.findOne({

where: {

id: 1,

}

})

테이블에 데이터를 넣기 (insert)

models.Product.create

models.Product.create({

name: "abc",

price: 50000,

seller: "a",

imgUrl: "images/product5.jpg",

})

.then(result=>{

console.log("상품생성결과", result);

})

.catch(e=>{

console.error(e);

})

main

index.js

import React, { useEffect, useState, useReducer } from 'react';
import './index.scss';
import axios from 'axios';
import MainProduct from './MainProduct';

const MainPage = () => {
    const [ products, setProducts ] = useState([]);
    useEffect(()=>{
        axios.get("http://localhost:3000/products")
        .then((result)=>{
            const products = result.data;
            setProducts(products);
        }).catch((e)=>{
            console.log(e);
        })
    },[]);
    if(products === []) return <div>로딩중입니다.</div>
    return (
        <div>
            <div id="main">
                <div id="banner">
                    <img src="images/banners/banner1.png" alt=""/>
                </div>
                <div id="product-list" className="inner">
                    <h2>그린조명 최신상품</h2>
                    <div id="product-items">
                        {products.map(product=> <MainProduct key={product.id} product={product}/>)}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default MainPage;

MainProduct.js

import React from 'react';
import { Link } from 'react-router-dom';

const MainProduct = ({product}) => {
    return (
        <div className='product-card' key={product.id}>
            <Link to={`/product/${product.id}`}>
            <div className='product-img'>
                <img src={product.imageUrl} alt="" />
            </div>
            <div className='product-contents'>
                <span className='product-name'>{product.name}</span>
                <span className='product-price'>{product.price}</span>
                <div className='product-seller'>
                    <img src="images/icons/avatar.png" alt="" />{product.seller}
                </div>
            </div>
            </Link>
        </div>
    );
};

export default MainProduct;

server.js

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;
const models = require('./models');

// json 형식의 데이터를 처리할 수 있게 설정
app.use(express.json());
// 브라우저 cors이슈를 막기위해 사용(모든 브라우저의 요청을 일정하게 받겠다)
app.use(cors());

// 요청처리
// app.메소드(url, 함수)

app.get('/products', async(req,res)=>{
    // 데이터 베이스 조회하기
    models.Product.findAll()
    .then(result=>{
        console.log("제품전체조회", result);
        res.send(result);
    })
    .catch(e=>{
        console.error(e);
        res.send("파일 조회에 문제가 있습니다.");
    })
});
// method get이고 url은 /product/2로 요청이 온 경우 
app.get('/product/:id', async (req,res)=>{
    const params = req.params;
    // const { id } = params;
    // 하나만 조회할 때는 findOne -> select문
    models.Product.findOne({
        // 조건절
        where: {
            id: params.id,
        }
    })
    .then(result=>{
        res.send(result);
    })
    .catch(e=>{
        console.error(e);
        res.send("상품 조회에 문제가 생겼습니다.");
    })
});
app.post('/green',async (req,res)=>{
    console.log(req);
    res.send('그린 게시판에 게시글이 등록되었습니다.');
});
// 실행
app.listen(port, ()=>{
    console.log('쇼핑몰 서버가 동작중입니다.');
    // sequelize와 데이터베이스 연결 작업
    // 데이터베이스 동기화
    models.sequelize
    .sync()
    .then(()=>{
        console.log('DB연결 성공');
    })
    .catch(()=>{
        console.error(e);
        console.log('DB연결 에러');
        // 서버실행이 안되면 프로세스를 종료
        process.exit();
    })
});