[Node + React] (bootstrap 사용) list 뿌려주기

나중에 내가 참고해서 보려고 작성한 글..!

현재 폴더나 파일들 상태

App.js

function App() {
  return <div>완전 백지상태인 react 간만이당ㅎㅎ</div>;
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js를 Router로 바꿔줬음.
참고로 react-router-dom 사용
npm i react-router-dom

아래는 Router.js

import { HashRouter, Route, Routes } from "react-router-dom";
import { Home } from "./pages/Home";
import { ConList } from "./pages/ConList";

function Router() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/list" element={<ConList />} />
      </Routes>
    </HashRouter>
  );
}

export default Router;

✨react-bootstrap 설치

1. npm install react-bootstrap bootstrap 부트스트랩 설치
   

2. index.js에 import해주기

import 'bootstrap/dist/css/bootstrap.min.css'; 

3. List.js (부트스트랩 사용할 components)
   

여기서 styled-components 함께 사용할 수는 없을까? 하는 생각에 시도
npm install styled-components 설치!

이렇게 styled()안에 넣어주면 두개 같이 사용 가능!!!

그럼 이번에는 Node 사용해서 서버랑 연결해서 데이터 받아 뿌려줘보자..
server.js 생성 뒤, 터미널창에 npm init -y
express 라이브러리를 설치하기 위해서 npm install express로 설치

4. 이후 server.js 있는 폴더에 react 프로젝트 넣어줌
   

5. 사이트 접속시 react로 만든 html을 보여주기 위해 server에 연결함

const express = require("express");
const app = express();
const path = require("path");

app.listen(8080, () => {
  console.log("http://localhost:8080 에서 서버 실행중");
});

app.use(express.static(path.join(__dirname, "list-server-connect/build")));

app.get("/", (요청, 응답) => {
  응답.sendFile(path.join(__dirname, "list-server-connect/build/index.html"));
});

6. react에서 라우팅을 담당해주기 위해
   server.js의 최하단에 아래 코드 추가해줌

app.get('*', function (요청, 응답) {
    응답.sendFile(path.join(__dirname, '/list-server-connect/build/index.html'));
  });

여기까지 하면 SPA로 사용할 수 있으나,
DB에서 게시글 list를 가져와야하니
AJAX형식으로 받아오면 된다.
AJAX 사용을 위해 server.js의 상단에

app.use(express.json());
var cors = require("cors");
app.use(cors());

추가 후 터미널에 npm install cors입력 후 설치

정말 여러 방법을 써봤는데.. 무한루프에 갇혀서 죽을뻔했다..

server.js

const express = require("express");
const path = require("path");
const app = express();
const { MongoClient } = require("mongodb");
require("dotenv").config();

let connectDB = require("./database.js");

let db;

connectDB
  .then((client) => {
    console.log("DB연결성공");
    db = client.db("forum");
  })
  .catch((err) => {
    console.log(err);
  });

app.listen(8080, () => {
  console.log("http://localhost:8080 에서 서버 실행중");
});

app.use(express.json());
var cors = require("cors");
app.use(cors());

app.use(express.static(path.join(__dirname, "list-server-connect/build")));

app.get("/", (요청, 응답) => {
  응답.sendFile(path.join(__dirname, "list-server-connect/build/index.html"));
});

app.get("/list", async function (요청, 응답) {
  let result = await db.collection("post").find().toArray();
  응답.json(result);
});

// react에서 라우팅 담당
app.get("*", function (요청, 응답) {
  응답.sendFile(path.join(__dirname, "/list-server-connect/build/index.html"));
});

아래는 List.js

import ListGroup from "react-bootstrap/ListGroup";
import { Link } from "react-router-dom";
import styled from "styled-components";
import { useEffect, useState } from "react";

const TitleList = styled(ListGroup.Item)`
  &:nth-child(1) {
    background-color: rosybrown;
  }
`;

const ConList = styled(ListGroup.Item)`
  background-color: beige;
`;

export const List = () => {
  const [listData, setListData] = useState([]);
  const [loading, setLoading] = useState(true);

  const conListData = async () => {
    try {
      const response = await fetch("http://localhost:8080/list");
      const data = await response.json();
      setListData(data);
      console.log(data);
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    conListData();
  }, []);

  if (loading) {
    return <div>Loading...</div>; // 로딩 중 상태 표시
  }

  return (
    <div>
      <ListGroup>
        <TitleList disabled>목록</TitleList>
        <TitleList disabled>제목</TitleList>
        <Link to={"/"}>
          <ConList action className="con">
            contents1
          </ConList>
        </Link>
        {listData.map((data) => (
          <Link to={"/"} key={data._id}>
            <ConList action>
              <p>{data.title}</p>
            </ConList>
          </Link>
        ))}
      </ListGroup>
    </div>
  );
};

아래는 계속 무한루프 반복해서 고생했던 코드도 추가
나중에는 실수하지 말자..