[React] Spring Boot와 연동하여 shop 만들기 (2023.06.09)

 

Spring Boot와 연동하여 shop 만들기

[Spring Boot] Spring Boot 사용하기 (2023.06.07)

 

 

CORS 오류 (Cross Origin Resource Sysytem)
교차 출처 리소스 공유

proxy 서버(미들웨어)로 해결을 하자

setupProxy.js 검색

프록시 서버란 클라이언트와 서버 사이에서 데이터 요청과 응답을 대신 받아주는 역할을 해줌
보안상의 문제로 직접 통신을 주고 받을 수 없는 경우 프록시 서버가 중계를 진행해줌

만들때 src 하위에 해당 파일을 만들어야 함!

< 참고할 문서 >
https://velog.io/@yunsungyang-omc/React-React-App%EC%97%90%EC%84%9C-CORS-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

 

axios로 spring boot 데이터 가져오기

 

  useEffect(() => {

    axios.get("http://172.30.1.42:8090/shop/").then((res) => {

      console.log("결과", res.data);

      setList(res.data);

    });

  }, []);

 

주소를 가져올 때 local 호스트로 가져올 수 없음!

IP주소로 가져오기

 

useSearchParams 사용하여 필터 기능 추가

 

ProductList.jsx

import React, { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom';

const ProductList = ({list}) => {
    console.log('props', list);
    // type filter 작업을 거치고 사용할 list

    /**만약, '원피스' 페이지를 클릭하면 type이 dress인것만
     * '전체' 페이지를 클릭하면 전체 띄어주기
     * useSearchParams 활용
     */

    const[typeParams, setTypeParams] = useSearchParams()
    let type = typeParams.get('type');

    //type filter 작업을 거치고 사용할 list
    let newList = type != null && list.filter(item => item.product.ptype == 'dress')

    const nav = useNavigate()

  return (
    <div>
        {/* Q.
        상품명 - 가격을 10개 상품 모두 띄워줄 것
         */}

         {type == null 
            ? list.map((item)=>(
            <div key={item.product.pcode} onClick={()=>{nav(`/product/${item.product.pcode}`)}}>
            <img src={"data:image/;base64," + item.product.img} width='100px'></img>
            <p><strong>{item.product.pname}</strong> {item.product.price}</p>
            </div>
         )): newList.map((item)=>(
            <div key={item.product.pcode}>
            <img src={"data:image/;base64," + item.product.img} width='100px'></img>
            <p><strong>{item.product.pname}</strong> {item.product.price}</p>
            </div>
         ))}

    </div>
  )
}

export default ProductList

 

 

하나의 상품에 대한 제품 정보 spring boot에서 가져오기

useParam 사용

 

 

현재 스프링 부트를 통해 /pcode 경로 접속하면 pcode에 해당하는 상품 1개의 정보만 보여줌

 

ProductDetail.jsx

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

const ProductDetail = () => {

    let {num} = useParams()
    console.log('num', num);

    const [obj, setObj] = useState({});

    // axios를 통해서 한가지 상품에 대한 정보를 가지고 올 것 
    useEffect(() => {
        axios.get(`http://172.30.1.42:8090/shop/${num}`)
        .then((res) => {
          console.log("detail 결과", res.data.product);
          setObj(res.data.product)
        });
      }, []);

    //   진짜 아이템이 잘 변했나 확인하고 싶으면 ?
    //   useEffect(()=>{
    //     console.log(obj);
    //   }, [obj])

  return (
    <div>
        <div>
            <img src={"data:image/;base64," + obj.img} width='100px'></img>
            <p><strong>{obj.pname}</strong> {obj.price}</p>
        </div> 
    </div>
  )
}

export default ProductDetail

 

주의점

UseEffect 처리 안해주면?

무한루프 돌거나 그 이전에 선택한 값이 나타남(시점이 안맞는다)

 

App.js 

import { useEffect, useState } from "react";
import "./App.css";
import Header from "./components/Header";
import ProductDetail from "./components/ProductDetail";
import ProductList from "./components/ProductList";
import { Route, Routes } from "react-router-dom";
import axios from "axios";

function App() {
  const [list, setList] = useState([]);

  useEffect(() => {
    axios.get("http://172.30.1.42:8090/shop/").then((res) => {
      console.log("결과", res.data);
      setList(res.data);
    });
  }, []);

  return (
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<ProductList list={list} />}></Route>
        <Route path="/product/:num" element={<ProductDetail />}></Route>
      </Routes>
    </div>
  );
}

export default App;