React로 이미지가 포함된 정보 DB에서 가져오기

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고

* react -> node.js로 이미지 및 정보 저장하기

* mongoDB에 저장하는 것까지 확인

 

 

* 데이터 저장한 부분은 지난 포스팅 참고 (https://ba-gotocode131.tistory.com/129)

 

[Client] - 연결 루트는 "localhost:5000/api/data/list"(server) / "localhost:3000/review"(client)

1. App.js

- /review로 페이지 확인하도록 만들기

 

2.  Review/ShowAllData.js

- DB에 저장한 내용 확인

 

 

[Server]

1. routes/data.js

- DB에서 정보를 찾아 클라이언트에 전달

 

 

[1. 설정하기]

 

[Client] 

1. App.js

- /review로 페이지 확인하도록 만들기

 

import { BrowserRouter, Routes, Route } from "react-router-dom";

import DataUpload from "./components/views/Review/DataUpload";
import ShowAllData from "./components/views/Review/ShowAllData";

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        {/* 복습 */}
        <Route path="/review/data" element={Auth(DataUpload, true)} />
        <Route path="/review" element={Auth(ShowAllData, null)} /> //추가
      </Routes>
    </BrowserRouter>
  );
}
export default App;

 

[Server]

1. routes/data.js

- DB에서 정보를 찾아 클라이언트에 전달

 

router.post("/list", (req, res) => {
  Data.find() //스키마 포함된 데이터 값
    .populate("title")
    .exec((err, dataInfo) => {
      if (err) return res.status(400).json({ success: false, err });
      return res.status(200).json({ success: true, dataInfo });
    });
});

 

* populate : ObjectId를 실제 객체로 치환하는 작업에 사용

* 출처 : (https://mongoosejs.com/docs/populate.html#populate_multiple_documents)

* 다른 참고 글 : (https://www.zerocho.com/category/MongoDB/post/59a66f8372262500184b5363)

 

 

* exec : 온전한 프로미스를 반환값으로 얻을 수 있으며, 에러가 났을 때 stack trace에 오류가 발생한 코드의 위치가 포함되기 때문에 공식 문서에서도 exec()을 사용할 것을 권장

* 출처 : (https://tesseractjh.tistory.com/166)

* 출처 2 : (https://mongoosejs.com/docs/api.html#query_Query-exec)

 

[Client]

3.  Review/ShowAllData.js

- DB에 저장한 내용 확인

 

import axios from "axios";
import React, { useEffect } from "react";

function ShowAllData() {
  useEffect(() => {
    axios.post("/api/data/list").then((response) => {
      if (response.data.success) {
        console.log(response.data);
      } else {
        alert("상품을 가져오는데 실패했습니다.");
      }
    });
  });

  return (
    <div>
      <br />
      <br />
      <br />
      <br />
      ShowAllData
    </div>
  );
}

export default ShowAllData;

 

 

* 결과

 

 

 

 

[2. 받아온 데이터 클라이언트에 보여주기]

 

[Client]

1. Review/ShowAllData.js

- ImageSlider.js를 만들어 이미지 부분만 분리

 

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Card, Row, Col } from "antd";
import ImageSlider from "./Sections/ImageSlider";

const { Meta } = Card;

function ShowAllData() {
  const [Datas, setDatas] = useState([]);

  useEffect(() => {
    axios.post("/api/data/list").then((response) => {
      if (response.data.success) {
        // console.log(response.data);
        setDatas(response.data.dataInfo); //server 내 routes에서 지정
      } else {
        alert("상품을 가져오는데 실패했습니다.");
      }
    });
  });

  const renderCard = Datas.map((data, index) => {
    return (
      <div style={{ display: "Grid", placeItems: "center" }}>
        <Col lg={4} md={6} xs={16} key={index}>
          <Card
            style={{
              width: "350px",
              height: "20%",
              position: "relative",
              right: "50%",
            }}
            //ImageSlider에 images로 정보 전달
            cover={<ImageSlider images={data.images} />}
          >
            <Meta
              title={data.title}
              description={`$${data.description}`}
            ></Meta>
          </Card>
        </Col>
      </div>
    );
  });

  return (
    <div>
      <div style={{ width: "100%", margin: "0" }}>
        <br />
        <br />
        <br />
        <br />
        <h2 style={{ textAlign: "center" }}>DB에 저장한 거 확인하기</h2>

        {/* card */}
        <div style={{ width: "85%", margin: "1rem auto" }}>
          <Row gutter={[20, 20]}>{renderCard}</Row>
        </div>
      </div>
    </div>
  );
}

export default ShowAllData;

 

 

2. Review/Sections/ImageSlider.js

 

import React from "react";
import { Carousel } from "antd";

function ImageSlider(props) {
  //props를 통해 ShowAllData 정보가 전달
  return (
    <div>
      <Carousel autoplay>
        {props.images &&
          props.images.map((image, index) => (
            <div key={index}>
              <img //ImageSlider에 images로 정보 전달
                style={{ width: "350px", height: "120px" }}
                src={`http://localhost:5000/${image}`}
              />
            </div>
          ))}
      </Carousel>
    </div>
  );
}

export default ImageSlider;

 

 

* 결과

- 처음 사진이 나오지 않는 경우는 DB에는 있으나 VS code에는 이미지가 없어서 그렇다