아마존 E-commerce 클론 -6) Node.js server 만들기

 

 

 

먼저 서버의 주소와 프론트엔드의 주소가 다르기 때문에 프록시를 이용해서 이를 연결시켜주자. 

프론트엔드에 프록시를 설정한다. 

frontend>package.json파일에 다음과 같이 추가해준다. 

{
  "name": "frontend",
  "proxy":"http://127.0.0.1:5000",

다음은 axios를 설치하자. 

 

frontend> npm install axios해준다. 

 

이제 프론트엔드의 data에서 정보를 가져왔던 것들을 모두 백엔드에서 가져오도록 바꿔주자. 

이는 axios를 이용할것인데, useEffect를통해서 axios를 보내고, useState를 이용해서 정보를 바꿔주는 것을 이용할 것이다. 

 

먼저 HomeScreen.js로 가서 해보자. 

import React , {useEffect, useState} from 'react'
import axios from 'axios';
import data from '../data';
import Product from '../components/Product'

function HomeScreen() {
    const [products, setproducts] = useState([])

    useEffect(() => {
        const fetchData = async ()=>{
            const {data} = await axios.get('/api/products');
            setproducts(data);
        };

        fetchData();
    }, [])

    return (
        <div>
            <div className="row center">
                {products.map(product=>(
                    <Product key={product._id}  product = {product}/> 
                  ))}
              </div>
        </div>
    )
}

export default HomeScreen

 

 

 

 

이제 파일이 아직 로딩중이라면 로딩페이지가 뜨고 파일이 로드되면 데이터가 나타나도록 설정해보자. 

useState를 이용해서 loading중이라면 loadingBox가 뜰것이고 만약 에러가 났다면 MessageBox를 이용해서 Error메세지가 작동하도록 설정했다. 

 

먼저 messagebox, loadingbox를 component폴더에 만들어준다. 

loadingbox.js

import React from 'react'

function LoadingBox() {
    return (
        <div>
            <i className="fa fa-spinner fa-spin"></i> Loading...
        </div>
    )
}

export default LoadingBox

import React from 'react'

function MessageBox(props) {
    return (
        <div className={`alert alert-${props.variant || 'info'}`}>
            {props.children}
        </div>
    )
}

export default MessageBox

message박스 안에서 props.children은 <MessageBox>{}<MessageBox/> 여기서 {}안의 내용이 나오도록 하는 것이다. 

 

 

 

HomeScree.js

import React , {useEffect, useState} from 'react'
import axios from 'axios';
import data from '../data';
import Product from '../components/Product'
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';

function HomeScreen() {
    const [products, setproducts] = useState([])
    const [loading, setloading] = useState(false)
    const [error, seterror] = useState(false)

    useEffect(() => {
        const fetchData = async ()=>{
            try{
                setloading(true);
                const {data} = await axios.get('/api/products');
                setproducts(data);
                setloading(false);
            }catch(err){
                seterror(err.message);
                setloading(false);
            }
        };
    
        fetchData();
    }, [])

    return (
        <div>
            {loading ?(
            <LoadingBox></LoadingBox>
            ): error?(
            <MessageBox variant="danger">{error}</MessageBox>
            ): (
            <div className="row center">
                {products.map(product=>(
                    <Product key={product._id}  product = {product}/> 
                  ))}
              </div>
            )}
        </div>
    )
}

export default HomeScreen

 

스타일을 주자. 

 

index.css

/* Alert */
.success{
  color:#20a020;
}
.error{
  color:#202020;
}

.alert{
  padding:1rem;
  border: 0.1rem solid transparent;
  border:0.5rem;
}

.alert-info{
  color:#2020a0;
  background-color: #e0e0ff;
}
.alert-danger{
  color:#a02020;
  background-color: #ffe0e0e0;
}

 

 

 

 

 

 

error라고 설정했던 부분을 모두 danger로 바꿔주자 .

index.css

/* Alert */
.success{
  color:#20a020;
}
.danger{
  color:#202020;
}

.alert{
  padding:1rem;
  border: 0.1rem solid transparent;
  border:0.5rem;
}

productScreen.js

                                <div className="row">
                                    <div>Status</div>
                                    <div className="status">{product.countInStock>0?( <span className="success">In Stock</span>) : (<span className="danger">Unavailable</span>) }</div>
                                </div>
                            </li>