CRUD 작업이란 무엇입니까? 반응에서 CRUD 작업을 구축하는 방법은 무엇입니까?

크러드:

CRUD는 만들기, 읽기, 업데이트 및 삭제를 나타냅니다. CRUD는 일반적으로 데이터베이스에서 수행되는 작업을 나타냅니다. 응용 프로그램이 데이터베이스에 연결되면 데이터베이스에 데이터를 추가하고, 데이터를 읽고, 데이터를 업데이트하고 데이터를 삭제할 수 있는 CRUD 작업을 수행합니다.

만들기 — 데이터베이스에 레코드를 삽입합니다.
읽기 — 데이터베이스에서 레코드를 검색합니다.
업데이트 — 데이터베이스의 레코드를 업데이트합니다.
삭제 — 데이터베이스에서 레코드를 삭제하려면

CRUD 애플리케이션 구축 방법:

CRUD 작업을 생성하려면 먼저 반응 애플리케이션을 생성해야 합니다. React 애플리케이션을 생성하려면 터미널에 npx create-react-app <Your app name>를 입력합니다.

패키지가 설치되는 것을 볼 수 있습니다. 이 반응 프로젝트를 생성한 후 프로젝트 폴더로 이동하여 연 다음 터미널 및 명령npm start을 엽니다.
이제 다음과 같은 기본 React 템플릿이 표시됩니다.



이는 반응 애플리케이션을 성공적으로 생성했음을 의미합니다.

이제 코드 편집기로 이동하여 app.js 파일을 엽니다. 다음과 같은 기본 상용구가 표시됩니다.



이제 우리는 서버를 위한 또 다른 프로젝트를 생성해야 합니다. 서버 환경을 설치하기 전에 컴퓨터에 node.js 소프트웨어를 설치해야 합니다.
이제 서버용 컴퓨터에 디렉토리를 생성하고 터미널에서 디렉토리를 열 수 있습니다. 이제 다음 단계에 따라 서버를 만들 수 있습니다.

npm 초기화 -y

Npm install express cors mongodb dotenv nodemon

package.json 파일의 scripts 속성에 다음 2줄을 삽입합니다.

"scripts": {
    "start": "node index.js",
    "start-dev": "nodemon index.js"

이제 프로젝트를 열고 index.js라는 파일을 만들고 필요한 다른 항목을 삽입합니다.

const express = require("express");
const { MongoClient } = require("mongodb");
require("dotenv").config();
const cors = require("cors");
const ObjectId = require("mongodb").ObjectId;
const app = express();
const port = process.env.PORT || 5000;

index.js 파일에서 미들웨어를 사용해야 합니다.

app.use(cors());
app.use(express.json());

그런 다음 MongoDB 클러스터를 만들고 .env 파일을 입력하고 다음과 같이 index.js 파일에서 사용합니다.

const uri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.qu1uq.mongodb.net/myFirstDatabase?retryWrites=true&w=majority`;

이제 다음 코드와 같은 함수를 만들고 데이터베이스를 생성하고 데이터베이스에 연결합니다. try 블록에 모든 것을 씁니다.

async function run() {
  try {
await client.connect();
    const database = client.db("modernFurniture");
    const productsCollection = database.collection("products");
    const ordersCollection = database.collection("orders");
    const usersCollection = database.collection("users");
    const reviewsCollection = database.collection("reviews");

  } finally {
    // await client.close();
  }
}
run().catch(console.dir);

CRUD 작업을 시작하겠습니다.

작업 만들기:

이제 일부 데이터를 가져오기 위한 HTML 입력 양식을 만들고 생성 작업을 위해 서버로 보냅니다.



우리는 Axios를 사용하고 후크 형식을 반응하여 서버에 데이터를 보냅니다. 터미널에 Axios 쓰기 명령을 설치하는 경우npm i axios 및 반응 후크 양식을 설치하는 경우npm install react-hook-form

const AddProduct = () => {
  const { register, handleSubmit, reset } = useForm();
  const onSubmit = (data) => {
    axios
   .post("http://localhost:5000/products", data)
      .then((res) => {
        “Do something”        }
      });
  };

이제 노드 서버에 포스트 API를 생성하여 데이터베이스에 데이터를 생성합니다.

   app.post("/products", async (req, res) => {
      const product = req.body;
      const result = await productsCollection.insertOne(product);
      res.json(result);
    });

읽기 작업:

이제 클라이언트 측에 구성 요소를 만들고 브라우저에 표시할 모든 데이터를 가져오기 위해 서버에 요청을 보냅니다. 그리고 서버가 응답하면 데이터를 상태로 저장합니다. 그리고 UI에 데이터를 표시할 수 있습니다.

데이터베이스에서 데이터를 가져오기 위한 get 요청을 만듭니다.

  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch("http://localhost:5000/products")
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, []);

서버에서 브라우저로 데이터 보내기:

   // GET API
    app.get("/products", async (req, res) => {
      const cursor = productsCollection.find({});
      const products = await cursor.toArray();
      res.json(products);
    });

업데이트 작업:

기존 데이터를 추가로 업데이트해야 하는 경우 업데이트 작업에 사용합니다. 먼저 다음 코드를 사용하여 클라이언트 측에서 업데이트 요청을 생성합니다.

 const user = { email };
    fetch("http://localhost:5000/users/admin", {
      method: "PUT",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(user),
    })
      .then((res) => res.json())
      .then((data) => {
        "do something";
      });

그런 다음 서버의 응답:

   // make a admin user
    app.put("/users/admin", async (req, res) => {
      const user = req.body;
      const filter = { email: user.email };
      const updateDoc = { $set: { role: "Admin" } };
      const result = await usersCollection.updateOne(filter, updateDoc);
      res.json(result);
    });

우리는 일반 사용자부터 관리자까지 위의 코드를 사용하도록 합니다.

삭제 작업:

데이터베이스에서 데이터를 삭제해야 하는 경우 삭제 작업을 사용합니다. 여기서 고객 주문을 삭제하려고 합니다.

const url = `http://localhost:5000/orders/${id}`;
        fetch(url, {
          method: "DELETE",
        })
          .then((res) => res.json())
          .then((data) => {
            if (data.deletedCount > 0) {
             alert("Deleted!", "Your order has been deleted.", "success");
            }
          });

서버 응답:

  // delete single order
    app.delete("/orders/:id", async (req, res) => {
      const id = req.params.id;
      const query = { _id: ObjectId(id) };
      const result = await ordersCollection.deleteOne(query);
      res.json(result);
    });

이제 서버 응답과 주문이 UI에서 삭제되고 데이터베이스에서도 삭제됩니다.