[TIL] DAY22 Frontend+Backend+DB 연결 및 통신

박동우·2023년 4월 17일

블록체인스쿨3기

블록체인 스쿨 3기

목록 보기

23/72

[TIL] 2023-04-17 DAY22

Frontend+Backend+DB 연결 및 통신

GIT 주소 : https://github.com/dowoo303/todolist_all (commit: DAY22)

오늘 배운것들

저번주 복습

저번주 만들던 것에 이어서 frontend 마무리하고 frontend로 REST API 모두 동작시켜보기

각종 팁

try catch 문을 사용할 경우 오류처리는 try안에서 if문을 이용하지 않고 catch안에 넣어주면된다.

함수 또한 props로 내려줄 수 있다.

스프레드 문법: ...(배열 펼치기)

회고

저번과 다르게 업데이트 시에 getTodo 함수를 이용하지않고 네트워크 비용을 아끼기 위해 다른 방법들을 사용해서 업데이트 함

드디어 frontend, backend, DB를 모두 연결하여 사용할 수 있게 되었다 !

시작

Backend 세팅

pscale connect to-do-list 프리즈마 연결(위치 상관 x)
npx prisma studio 프리즈마 스튜디오 켜기
npm run dev 백엔드 연결

frontend 세팅

npm run start react 스타트

Frontend

CreateTodo.jsx

목표

todo생성 및 자동 업데이트

최신순 정렬

skip take 기능 사용

1. todo생성 및 자동 업데이트

import axios from "axios";
import { useState } from "react";

const CreateTodo = ({ userId, setTodos, todos }) => {
  const [todo, setTodo] = useState("");

  // 투두생성
  const onSubmitCreateTodo = async (e) => {
    try {
      e.preventDefault();

      const response = await axios.post(
        `${process.env.REACT_APP_BACKEND_URL}/todo`,
        {
          // 인섬니아에서 todo와 userId를 보내는 것처럼 여기서도 보내야함
          todo, // todo는 input에서 받은 값을 보냄
          userId, // Login.jsx에서 받아온 user의 id를 보냄
        }
      );

      // 등록 후 자동 업데이트
      setTodos([response.data.todo, ...todos]); // 위에서 배열로 받아오기 때문에 [] 대괄호 필요, 기존 데이터 ...(스프레드)문법으로 추가
      setTodo("");
    } catch (error) {
      console.error(error);

      alert("투두 생성중 에러가 발생하였습니다.");
    }
  };

  return (
    <form className="flex mt-2" onSubmit={onSubmitCreateTodo}>
      <input
        className="grow border-2 border-pink-200 rounded-lg focus:outline-pink-400 px-2 py-1 text-lg"
        type="text"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
      />
      <input
        className="ml-4 px-2 py-1 bg-pink-400 rounded-lg text-gray-50"
        type="submit"
        value="새 투두 생성"
      />
    </form>
  );
};

export default CreateTodo;

-> 새 투두 생성 버튼을 누르면 DB에 성공적으로 todo 추가가 가능하다 !

2. 추가 최신 순으로 정렬하는법

todo.js

const todos = await client.todo.findMany({
      where: {
        userId: parseInt(userId),
      },
      orderBy: {
        createdAt: "desc",    // 내림차순, asc:오름차순
      },
    });

이 경우 순서가 바뀌었기 때문에 createTodo 부분도 일부 수정이 필요하다.
setTodos([response.data.todo, ...todos]); -> 순서변경

3. skip take 기능

todo.js

const { skip } = req.query;

    // findMany: 조건을 만족하는 여러가지 값 조회
    const todos = await client.todo.findMany({
      where: {
        userId: parseInt(userId),
      },
      orderBy: {
        createdAt: "desc", // 내림차순, asc:오름차순
      },
      skip: parseInt(skip),
      take: 3,
    });

인섬니아로 먼저 확인해보기

-> 잘 나오는 것을 확인 후 프론트엔드에 연결

app.jsx

const onClickReload = async () => {
    try {
      if (!user) return;

      const response = await axios.get(
        `${process.env.REACT_APP_BACKEND_URL}/todo/${user.id}?skip=${skip}`
      );	// skip 추가

      setTodos([...todos, ...response.data.todos]);
      // 다음번에는 다음 3개를 보여주기 위해 3증가
      setSkip(skip + 3);
    } catch (error) {
      console.error(error);
    }
  };

-> 처음에 3개를 보여주다가 onClickReload가 발동되면 3개가 추가되도록 설정

TodoCard.jsx

목표

isDone 업데이트 기능 만들기

todo delete 기능 만들기

1. isdone 업데이트

const onClickDone = async () => {
    try {
      const response = await axios.put(
        `${process.env.REACT_APP_BACKEND_URL}/todo/${id}/done`,
        {
          userId,
        }
      );

      setTodoIsDone(response.data.todo.isDone);
    } catch (error) {
      console.error(error);
    }
  };

-> 밑 return 부분에 todoIsDone을 붙여서 삼항연산자로 조종한다

2. todo 삭제

const onClickDelete = async () => {
    try {
      const response = await axios.delete(
        `${process.env.REACT_APP_BACKEND_URL}/todo/${id}`,
        {
          data: {
            userId,
          },
        }
      );

      const array = todos.filter((v, i) => {
        return v.id !== response.data.todo.id;
      });

      setTodos(array);
    } catch (error) {
      console.error(error);
    }
  };