프로젝트(1) - React 서버 구현

REACT로 서버 구현

express 설치하기
$ npm i express

 

cors 설치하기
$ npm install cors

 

nodemon 설치하기 (저장할 때마다 자동으로 서버를 재실행 해서 편리해짐)
$ npm i -g nodemon
그리고나서 nodemon concurrently를 설치해줍니다. (필요하다면)
npm install nodemon concurrently --save-dev
 ,   "server": "nodemon server",
    "client": "npm start",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client"



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

 

// Form에서 전달 받은 값 이용하기 값을 가져오려면 상단에 추가

app.use(express.urlencoded({ extended: true }));

// 유저가 보낸 array/object 데이터를 출력하기 위함

app.use(express.json());

// cors는 다른 도메인 주소끼리 ajax 요청을 주고받기 위해 필요한 브라우저 정책

var cors = require("cors");

app.use(cors());

app.listen(PORT, () => {
  console.log(`${PORT} 포트 서버 실행됨.`);
});

// 특정 폴더(프로젝트의 build)의 파일을 static 파일로 전송하기

app.use(express.static(path.join(__dirname, "../build"))); // 프로젝트위치/build

// 서버가 GET요청을 하면 DB에서 데이터를 받아와 보내주는  API 만들기
app.get("/", (요청, 응답) => {
  응답.sendFile(path.join(__dirname, "build/index.html")); // 메인페이지('/')로 접속하면 html파일을 보내주세요.
});

// '/product'로 ajax 이용해서 GET 요청을 보내면 됩니다.
app.get("/product", (요청, 응답) => {
  응답.json({ name: "uriri" });
});

// "*" 어떤 url을 접속하든 react-router

app.get("*", (요청, 응답) => {

  응답.sendFile(path.join(__dirname, "../build/index.html")); // index.html 을 띄워주세요

});

react-router 설치하기
$ npm install react-router-dom@6

 

 

 

axios 설치하기
$ npm i axios 

 

 

redux toolkit 설치하기
$ npm install @reduxjs/toolkit react-redux
https://sakuraop.tistory.com/395

 

 

 

googleapis (api 라이브러리) 설치하기 
$ npm install googleapis --save



Form에서 전달 받은 값 이용하기
값을 가져오려면 상단에 추가

app.use(express.urlencoded({extended: true})) 

https://sakuraop.tistory.com/406

 

리액트 .env 환경변수파일 이용하기
npm install --save dotenv
require("dotenv").config();
console.log(process.env.REACT_APP_API_KEY);



server로 POST하여 데이터 보내기
<div onClick={() => axios.post("http://localhost:8080/add", { todo: "todo" })
.then((res) => console.log(res))}>POST</div>

app.post("/add", (req, res) => {
  res.send("sent");
  console.log(req.body);
});



server에서 GET하여 DB 데이터를 가져오기
const [testWord, setTestWord] = useState("");

<div
    onClick={() =>
    axios
        .get("http://localhost:8080/list")
        .then((res) => setTestWord(res.data.test))
        .then((res) => console.log(testWord))
    }
>
    Get testWord
</div>
{testWord.length ? <div>{testWord.map((el) => el.name)}</div> : "list"}

app.get("/list", (요청, 응답) => {
  // 모든 데이터 가져오기
  db.collection("post")
    .find()
    .toArray((에러, 결과) => {
      console.log(결과);
      응답.send({ test: 결과 });
    });
});