스터디 관리 프로젝트 - CRUD

Seuling·2023년 3월 6일

스터디관리프로젝트

목록 보기

7/10

도메인별로 CRUD 해보기

Member

Create

export const createMember = async (newmember: MemberEntity) => {
  const res: AxiosResponse<Entity<MemberEntity>> = await api.post("/members", {
    data: newmember,
  });
  return res.data;
};

function App() {
  const { data: member } = useAPI<MemberEntity>(fetchMember, { isFetch: true });
const newMember = {
    memberId: "수정슬기222",
    email: "seulgiii2@naver.com",
    name: "수정슬기",
    profileImg:
      "https://images.unsplash.com/photo-1676873261959-173b91552b0d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
  };
useEffect(() => {
    console.log("member", member);
  	 createMember(newMember);
  }, [member]);

  return <></>;
}

export default App;

Read

export const fetchMember = async () => {
  const res: AxiosResponse<Entity<MemberEntity>> = await api.get(
    "/members?populate=*"
  );
  console.log("fetchMember", res);
  return res.data;
};

function App() {
  const { data: member } = useAPI<MemberEntity>(fetchMember, { isFetch: true });
  return <></>;
}
export default App;

Update

export const updateMember = async (member: MemberEntity, id: number) => {
  //put
  const res: AxiosResponse<Entity<MemberEntity>> = await api.put(
    `/members/${id}`,
    { data: member }
  );
  return res.data;
};

function App() {
  const { data: member } = useAPI<MemberEntity>(fetchMember, { isFetch: true });
const newMember = {
    memberId: "수정슬기222",
    email: "seulgiii2@naver.com",
    name: "수정슬기",
    profileImg:
      "https://images.unsplash.com/photo-1676873261959-173b91552b0d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyOXx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=60",
  };
useEffect(() => {
    console.log("member", member);
    if (member.length > 0) {
      updateMember(newMember, member[2].id as number);
    }
  }, [member]);

  return <></>;
}
export default App;

Delete

export const deleteMember = async (id: number) => {
  const res: AxiosResponse<Entity<MemberEntity>> = await api.delete(
    `/members/${id}`
  );
  return res.data;
};

function App() {
  const { data: member } = useAPI<MemberEntity>(fetchMember, { isFetch: true });

useEffect(() => {
	deleteMember(29);
  }, []);

  return <></>;
}
export default App;

Todo

Create

export const createTodo = async (todo: TodoEntity) => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.post("/todos", {
    data: todo,
  });
  return res.data;
};

function App() {

  const { data: todo } = useAPI<TodoEntity>(fetchTodo, { isFetch: true });

  const newTodo = {
    todoContent: "오늘할일스루기",
    complitedAt: new Date(),
    authenticationMethod: "link",
    authenticationContent: "https://www.naver.com",
    author: 26,
  };

  useEffect(() => {
    createTodo(newTodo);
  }, [todo]);

  return <></>;
}

export default App;

Read

export const fetchTodo = async () => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.get(
    "/todos?populate=*"
  );
  return res.data;
};

function App() {
  const { data: todo } = useAPI<TodoEntity>(fetchTodo, { isFetch: true });
  return <></>;
}
export default App;

Update

export const updateTodo = async (todo: TodoEntity, id: number) => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.put(`/todos/${id}`, {
    data: todo,
  });
  return res.data;
};

function App() {

  const { data: todo } = useAPI<TodoEntity>(fetchTodo, { isFetch: true });

  const newTodo = {
    todoContent: "오늘할일스루기",
    complitedAt: new Date(),
    authenticationMethod: "link",
    authenticationContent: "https://www.naver.com",
    author: 26,
  };

  useEffect(() => {
    updateTodo(newTodo, 130);
  }, [todo]);

  return <></>;
}

export default App;

Delete

export const deleteTodo = async (id: number) => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.delete(`/todos/${id}`);
  return res.data;
};

function App() {
  const { data: todo } = useAPI<TodoEntity>(fetchTodo, { isFetch: true });
  useEffect(() => {
    deleteTodo(121);
  }, [todo]);
  return <></>;
}
export default App;

Room

Create

export const createRoom = async (newRoom: RoomEntity) => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.post("/rooms", {
    data: newRoom,
  });
  return res.data;
};

function App() {
  const { data: room } = useAPI<RoomEntity>(fetchRoom, { isFetch: true });

  const newRoom = {
    roomName: "공부스터디",
    roomDesc: "공부스터디설명",
    startDate: new Date(),
    endDate: new Date(),
		enterCode: 123123,
		members : [23,24]
  };

  useEffect(() => {
    createRoom(newRoom);
  }, []);

  return <></>;
}

export default App;

Read

export const fetchRoom = async () => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.get(
    "/rooms?populate=*"
  );
  return res.data;
};

function App() {
  const { data: room } = useAPI<RoomEntity>(fetchRoom, { isFetch: true });
  return <></>;
}

export default App;

Update

export const updateRoom = async (newRoom: RoomEntity, id: number) => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.put(`/rooms/${id}`, {
    data: newRoom,
  });
  return res.data;
};

function App() {
  const { data: room } = useAPI<RoomEntity>(fetchRoom, { isFetch: true });

  const newRoom = {
    roomName: "공부스터디",
    roomDesc: "공부스터디설명",
    startDate: new Date(),
    endDate: new Date(),
		enterCode: 123123,
		members : [23,24]
  };

  useEffect(() => {
		updateRoom(newRoom, 12);
  }, []);

  return <></>;
}

export default App;

Delete

export const deleteRoom = async (id: number) => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.delete(`/rooms/${id}`);
  return res.data;
};

function App() {
  const { data: room } = useAPI<RoomEntity>(fetchRoom, { isFetch: true });
 
  useEffect(() => {
		deleteRoom(4);
  }, []);

  return <></>;
}

export default App;

Fine

Create

export const createFine = async (newFine: FineEntity) => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.post("/fines", {
    data: newFine,
  });
  return res.data;
};

function App() {
  const { data: fine } = useAPI<FineEntity>(fetchFine, { isFetch: true });
  const newFine = {
    date: new Date(),
    members: [23, 24, 25],
    time: 9,
  };
  useEffect(() => {
	createFine(newFine)
  }, [fine]);

  return <></>;
}

export default App;

Read

export const fetchFine = async () => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.get(
    "/fines?populate=*"
  );
  return res.data;
};

function App() {
  const { data: fine } = useAPI<FineEntity>(fetchFine, { isFetch: true });
  return <></>;
}
export default App;

Update

export const updateFine = async (newFine: FineEntity, id: number) => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.put(`/fines/${id}`, {
    data: newFine,
  });
  return res.data;
};

function App() {
  const { data: fine } = useAPI<FineEntity>(fetchFine, { isFetch: true });

  const newFine = {
    date: new Date(),
    members: [23, 24, 25],
    time: 9,
  };

  useEffect(() => {
    updateFine(newFine, 2);
  }, [fine]);

  return <></>;
}

export default App;

Delete

export const deleteFine = async (id: number) => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.delete(`/fines/${id}`);
  return res.data;
};

function App() {
  const { data: fine } = useAPI<FineEntity>(fetchFine, { isFetch: true });
  return <></>;
}
export default App;

`Partial<Type>`

Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.

여기서 수정사항이 생겼다.
req,res 타입을 동일하게해주었더니, 계속 옵셔널 처리가 늘어나는 문제가 발생하였다.

때문에, 타입을 req, res 타입이 다른 부분인 Todo, Room, Fine 부분의 타입을 Partial 타입으로 변경해주었다.

TodoEntity

변경 전

interface TodoEntity {
  id?: number;
  todoContent?: string;
  complitedAt?: Date | string;
  authenticationMethod?: string;
  authenticationContent?: string;
  author?: Entity<MemberEntity> | number;
  createdAt?: Date;
  updatedAt?: Date;
  publishedAt?: Date;
}

변경 후

interface TodoEntity {
  id: number;
  todoContent: string;
  complitedAt: string;
  authenticationMethod: string;
  authenticationContent: string;
  author: Entity<MemberEntity>;
  createdAt: Date;
  updatedAt: Date;
  publishedAt: Date;
}

type PartialTodoEntity = Partial<TodoEntity>;

interface TodoParam extends PartialTodoEntity {
  complitedAt?: Date;
  author?: number;
}

todo services

import { AxiosResponse } from "axios";
import api from ".";

export const fetchTodo = async () => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.get(
    "/todos?populate=*"
  );
  return res.data;
};

export const createTodo = async (todo: TodoParam) => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.post("/todos", {
    data: todo,
  });
  return res.data;
};

export const updateTodo = async (todo: TodoParam, id: number) => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.put(`/todos/${id}`, {
    data: todo,
  });
  return res.data;
};

export const deleteTodo = async (id: number) => {
  const res: AxiosResponse<Entity<TodoEntity>> = await api.delete(
    `/todos/${id}`
  );
  return res.data;
};

FineEntity

변경 전

interface FineEntity {
  date: Date;
  members: Entity<MemberEntity>[] | number | number[];
  time: number;
  createdAt?: Date;
  updatedAt?: Date;
  publishedAt?: Date;
}

변경 후

interface FineEntity {
  date: Date;
  members: Entity<MemberEntity>;
  time: number;
  createdAt: Date;
  updatedAt: Date;
  publishedAt: Date;
}

type PartialFineEntity = Partial<FineEntity>;

interface FineParam extends PartialFineEntity {
  members: number[];
}

fine services

import { AxiosResponse } from "axios";
import api from ".";

export const fetchFine = async () => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.get(
    "/fines?populate=*"
  );
  return res.data;
};

export const createFine = async (newFine: FineParam) => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.post("/fines", {
    data: newFine,
  });
  return res.data;
};
export const updateFine = async (newFine: FineParam, id: number) => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.put(`/fines/${id}`, {
    data: newFine,
  });
  return res.data;
};

export const deleteFine = async (id: number) => {
  const res: AxiosResponse<Entity<FineEntity>> = await api.delete(
    `/fines/${id}`
  );
  return res.data;
};

RoomEntity

변경 전

interface RoomEntity {
  id?: number;
  roomName: string;
  roomDesc: string;
  startDate: Date;
  endDate: Date;
  members?: Entity<MemberEntity>[] | number[];
  enterCode: number;
  createdAt?: Date;
  updatedAt?: Date;
  publishedAt?: Date;
}

변경 후

interface RoomEntity {
  id?: number;
  roomName: string;
  roomDesc: string;
  startDate: Date;
  endDate: Date;
  members?: Entity<MemberEntity>[];
  enterCode: number;
  createdAt?: Date;
  updatedAt?: Date;
  publishedAt?: Date;
}

type PartialRoomEntity = Partial<RoomEntity>;

interface RoomParam extends PartialRoomEntity {
  members?: number[];
}

roomentity services

import { AxiosResponse } from "axios";
import api from ".";

export const fetchRoom = async () => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.get(
    "/rooms?populate=*"
  );
  return res.data;
};

export const createRoom = async (newRoom: RoomParam) => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.post("/rooms", {
    data: newRoom,
  });
  return res.data;
};

export const updateRoom = async (newRoom: RoomParam, id: number) => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.put(`/rooms/${id}`, {
    data: newRoom,
  });
  return res.data;
};

export const deleteRoom = async (id: number) => {
  const res: AxiosResponse<Entity<RoomEntity>> = await api.delete(
    `/rooms/${id}`
  );
  return res.data;
};

Seuling

프론트엔드 개발자 항상 뭘 하고있는 슬링

이전 포스트

스터디 관리 프로젝트 - api axios instance

다음 포스트

스터디 관리 프로젝트 - CRUD

스터디관리프로젝트

도메인별로 CRUD 해보기

Member

Create

Read

Update

Delete

Todo

Create

Read

Update

Delete

Room

Create

Read

Update

Delete

Fine

Create

Read

Update

Delete

`Partial<Type>`

TodoEntity

FineEntity

RoomEntity

스터디 관리 프로젝트 - api axios instance

스터디 관리 프로젝트 - TODOLIST

0개의 댓글