[TIL] Day43 #React-CRUD-server

2022.06.26(Sun)
[TIL] Day43

이번 주말에는 express로 server-API-CRUD를 구현해서 저번주에 진행했던 React-CRUD-client에 fetch를 통해 연결해보는 작업을 진행했다.
미루다 미루다 아직도 수정 기능인 UPDATE는 구현 못함... 해야하는데 코드가 너무 중구난방이라 한번 컴포넌트 구조 좀 싹 갈아엎은 후에 진행해야 할듯 싶다..🫠

📁 폴더 구조

• CRUD-PROJECT
  • crud-client
    • components
      • ContentItem.js
      • ContentList.js
      • Editor.js
    • App.js
  • crud-server
    • repository/diaryData.js
    • router/diaryRouter.js
    • controller/index.js
    • app.js

📎 crud-server

// app.js
const express = require("express");
const app = express();
const cors = require("cors");
const morgan = require("morgan");
const port = 3001;

app.use(cors()); // cors middleware 적용
app.use(express.json()); // Express 내장 미들웨어 적용
app.use(morgan("tiny")); // HTTP 요청 logger인 morgan 적용

// Routing
const diaryRouter = require("./router/diaryRouter");
app.use("/diary", diaryRouter);

// Response
app.get("/", (req, res) => {
  res.status(200).send("My Diary!~!");
});

app.use((req, res, next) => {
  res.status(404).send("Not Found!");
});

const server = app.listen(port, () => {
  console.log(`[RUN] My CRUD diary Server... | http://localhost:${port}`);
});

module.exports.app = app;
module.exports.server = server;

// router/diaryRouter.js
// TODO: discussions 라우터를 완성합니다.\
const { diaryController } = require("../controller");
const { findAll, findById, createOne, updateById, deleteById } =
  diaryController;
const express = require("express");
const router = express.Router();

// http://localhost:3001/diary/

router.get("/", findAll); // 모든 목록 조회 Router
router.get("/:id", findById); // 글 하나 조회 Router
router.post("/", createOne); // 글 하나 생성 Router
router.put("/:id", updateById); // 글 하나 수정 Router
router.delete("/:id", deleteById); // 글 하나 삭제 Router

module.exports = router;

// controller/index.js
const { diaryDummyData } = require("../repository/diaryData"); 
const diaryData = diaryDummyData;
const diaryController = {
  // router.get("/", findAll);
  findAll: (req, res) => {
    return res.status(200).json(diaryData);
  },

  // router.get("/:id", findById);
  findById: (req, res) => {
    // path-parameter가 있다면
    if (req.params) {
      // filter 대신 find 메소드 사용
      const idx = diaryData.find((item) => item.id === Number(req.params.id));
      // 조회하려는 id가 있다면 응답
      if (idx !== undefined) {
        res.status(200).json(idx);
      }
    }
    res.status(404).send("Not found!!");
  },
  
  // router.post("/", createOne); 
  createOne: (req, res) => {
    const newItem = req.body;
    // unshift()로 생성된 data를 diaryData 앞에 추가
    diaryData.unshift(newItem);
    return res.status(200).send("Create Diary!!");
  },

  // router.put("/:id", updateById);
  updateById: (req, res) => {
    const updated = diaryData.filter((item) => item.id === Number(req.body.id));
    // //updated는 배열 안에 객체가 있는 형태이므로 index:[0]을 가져옴
    // 수정한 내용을 body에 붙여서 수정
    const change = { ...updated[0], ...req.body }; // update할 data
    // findIndex() 메소드로 id가 일치하는 data의 index를 구함
    const idx = diaryData.findIndex(
      (item) => item.id === Number(req.params.id)
    );

    // splice(): 새 요소를 추가하여 배열 내용 변경
    // splice(start index, deleteCount, item)
    diaryData.splice(idx, 1, change);
    return res.status(200).json(change);
  },

  // router.delete("/:id", deleteById);
  deleteById: (req, res) => {
    const deleted = diaryData.findIndex(
      (item) => item.id === Number(req.params.id)
    );
    // splice(): 배열의 기존 요소 삭제 
    diaryData.splice(deleted, 1);
    return res.status(200).json();
  },
};

module.exports = {
  diaryController,
};

📎 crud-client

// fetch쪽 코드만 살펴보기 ٩( ᐛ )و

function App() {
  const url = "http://localhost:3001/diary";
  const [data, setData] = useState([]);

  // 처음 렌더링될 때만 fetch 적용
  useEffect(() => {
    getDiary();
  }, []);

  // fetch로 server에서 data 가져오는 function'
  const getDiary = () => {
    fetch(url)
      .then((res) => res.json()) // json 형식으로 data 가져오기
      .then((data) => setData(data)); // data 상태 변경 함수 실행
  };


  // Create-글 추가
  const onCreate = (title, content) => {
    const createdAt = new Date().toLocaleDateString();
    const newItem = {
      id: dataId.current,
      username: "SooBin",
      title,
      content,
      createdAt,
    };
    dataId.current += 1;
    setData([newItem, ...data]);

    fetch(url, {
      method: "POST",  // 생성 메소드 적용
      headers: {
        // client->server로 요청시 json 데이터 형식 권장 의미
        "Accept": "application/json",
        // 현재 전송하는 데이터가 json임을 의미
        "Content-Type": "application/json", 
      },
      // json 형식으로 변환
      body: JSON.stringify(newItem),
    }).then((res) => {
      if (res.status === 201) {
        getDiary();
      }
    });
  };


  // Delete-글 삭제
  const onDelete = () => {
    const deletedDiary = data.filter((item) => item.id !== Number(id));
    setData(deletedDiary);
    setIsTitleClick(false);
    fetch(url + `/${id}`, {
      method: "DELETE", // 삭제 메소드 적용
    }).then((res) => {
      // 202 status: 요청 성공적으로 접수 & 아직 해당 요청에 대해 처리 중이거나 처리 시작 전
      // 204 status: 요청이 성공 & client가 현재 페이지에서 벗어나지 않아도 됨을 의미
      if (res.status === 202 || 204) {
        getDiary();
      }
    });
  };

  ...
}

export default App;

요로콤 적용하면 React client 페이지에서 새로고침해도 글을 생성, 삭제한 것이 고대로 남아있댜 🙌