TC - 7번일지 (백엔드 서버 추가)

15. 백엔드 추가.

지금까지는 내 메모리에만 저장 되었기 떄문에 새로고침하면 데이터가 전부 날라갔다. 백엔드를 추가해서 어디서든, 접근가능하고 데이터가 남아있게 해보겠다.

✍목표

1. 백엔드 서버 추가
2. 보내기전에 백엔드 API를 사용해 데이터를 posts.json 파일에 저장 (이 프로젝트에선 db 쓰지 않고)
3. 프론트에서 백엔드로 데이터 보내기.

우선 프론트에서 백엔드로 데이터를 보내기 위해선 서버를 구동해야 한다. 해당 깃헙 주소로 가서 readme.md 파일에 나온대로 서버 구동.
https://github.com/AronLee5263/max-react-vite1-backend

✍ App.jsx - (backend project)

const express = require('express');
const bodyParser = require('body-parser');

const { getStoredPosts, storePosts } = require('./data/posts');

const app = express();

app.use(bodyParser.json());

app.use((req, res, next) => {
  // Attach CORS headers
  // Required when using a detached backend (that runs on a different domain)
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/posts', async (req, res) => {
  const storedPosts = await getStoredPosts();
  // await new Promise((resolve, reject) => setTimeout(() => resolve(), 1500));
  res.json({ posts: storedPosts });
});

app.get('/posts/:id', async (req, res) => {
  const storedPosts = await getStoredPosts();
  const post = storedPosts.find((post) => post.id === req.params.id);
  res.json({ post });
});

app.post('/posts', async (req, res) => {
  const existingPosts = await getStoredPosts();
  const postData = req.body;
  const newPost = {
    ...postData,
    id: Math.random().toString(),
  };
  const updatedPosts = [newPost, ...existingPosts];
  await storePosts(updatedPosts);
  res.status(201).json({ message: 'Stored new post.', post: newPost });
});

app.listen(8080);

백엔드에 데이터를 보내기전에 코드 간략히 설명을 해야한다. 나는 App.jsx - (backend project) 코드에서 가장 아래 있는 app.post 로 백엔드 서버로 데이터를 보낼것이다.


1. fetch 함수를 쓰지만 get이 아닌 post 형식으로 보내야하고
2. body property에 데이터를 보낼때 JSON으로 감싸야 하고
3. headers 추가해서 데이터가 JSON 형식이라는걸 알려야한다.

15.1. 프론트에서 백엔드로 데이터 보내기.

1. fetch() 사용
2. 로컬 호스트 주소 설정
3. fetch API의 기본 요청 프로토콜에 맞게 보내기

cf. fetch()는 HTTP 요청을 보낼 때 사용하고, 브라우저에서 기본으로 지원하는 함수 (단, 데이터를 가져오는것 또한 가능하긴함)

3. fetch API의 기본 요청 프로토콜에 맞게 보내기

• fetch API의 기본 요청이 'GET'이기 때문에 두 번째 인자를 객체 형태로 만들고 method 필드에 'POST'를 넣어 POST 요청 으로 바꿔야 함.
• 담은 객체 데이터를 JSON 으로 바꾸기

✍ PostList.jsx - (front-end project)

import { useState } from "react";

import Post from "./Post";
import NewPost from "./NewPost";
import Modal from "./Modal";
import classes from "./PostList.module.css";

function PostList({ isPosting, onStopPosting }) {
  const [posts, setPosts] = useState([]);

  function addPostHandler(postData) {
    setPosts((existingPosts) => [postData, ...existingPosts]);

    fetch("http://localhost:8080/posts", {
      method: "POST",
      body: JSON.stringify(postData),
      headers: {
        "Content-Type": "application/json",
      },
    });
  }

  return (
    <>
      {isPosting && (
        <Modal onClose={onStopPosting}>
          <NewPost onCancel={onStopPosting} onAddPost={addPostHandler} />
        </Modal>
      )}
      <ul className={classes.posts}>
        {posts.length > 0 &&
          posts.map((post) => <Post author={post.author} body={post.body} />)}
      </ul>
      {posts.length === 0 && (
        <div style={{ textAlign: "center", color: "white" }}>
          <h2>포스트가 없습니다.</h2>
          <p>여기에 내용을 추가해보세요 !</p>
        </div>
      )}
    </>
  );
}
export default PostList;

• 백엔드에 데이터를 보내는 시점은 상태가 업데이트 되어서 프론트에서도 데이터가 업데이트 되는 시점이다. 그러니까 이전에 작업했던걸 보자.
  사용자가 NewPost 버튼을 눌러서 addPostHandler 함수가 호출되면 setPosts 상태 업데이트 함수로 인해 이전 상태의 데이터와 현재 상태의 데이터가 업데이트 된다. 즉, 최신상태로 보이는것. 그러니까 프론트쪽에서 상태가 업데이트 되자마자

localhost는 백엔드가 로컬 장치에서 실행 중이라는 뜻이고 8080은 이 벡엔드가 수신하고 있는 포트 번호임. 어쨌든 이 로컬 호스트로 데이터를 요청을 전송할것임.

오타

fetch함수에서 headers로 써야하는데 header로 쓰는 바람에 데이터 안보내져서 찾는데 오래걸렸다;; 오타 가끔씩 시간 너무 잡아먹어

아무튼 여기까지가 백엔드 서버로 데이터를 보내고 그 데이터를 받아서
백엔드 프로젝트에 posts.json에 저장하는 것까지 였음.
다음 포스팅부턴 백엔드에서 데이터를 가져오는것을 진행할 것임.


페이지를 다시 로드하거나 페이지를 처음 방문했을 때 백엔드에서 가져온 포스트가 표시되게 해볼 예정!