GitHub

사용된 기술

• TypeScript
• React
• Sass
• Git

라이브러리

• React-Query
• recoil
• axois
• json-server
• date-fns

내가 구현한 부분

이번 프로젝트에서는 api부분을 주로 맡아서 작업했다. api 다루는 부분, 그리고 react-query는 처음이라 서툴어 시간이 많이 들기도 해서 UI적인 부분은 많이 작업하지 못했다.

• axios와 Rest API를 활용하여 get, create, delete로직을 구현하였다.
• react-query를 도입해보았다.

기록하고 싶은 코드

httpRequest.ts

src/api/httpRequest.ts
여기서 get, create, delete에 해당하는 비동기 함수를 작성했다.

새로운 스케줄을 생성할 때(createSchedule)에는 data를 파라미터로 받고, 생성한 스케줄을 삭제할 경우(deleteSchedule) id를 파라미터로 받아 해당 id의 데이터를 삭제한다.

import axios from 'axios';
import { Schedule, NewSchedule } from '../types/schedule';

const BASE_URL = 'http://localhost:8000';

export const getSchedule = () =>
  axios
    .get<Schedule[]>(`${BASE_URL}/schedule`)
    .then((response) => response.data);

export const createSchedule = async (data: NewSchedule) => {
  const { data: response } = await axios.post(`${BASE_URL}/schedule`, data);
  return response.data;
};

export const deleteSchedule = async (id: number) => {
  const response = await axios.delete(`${BASE_URL}/schedule/${id}`);
  return response.data;
};

createSchedule 에서 받아오는 data의 타입인 인터페이스 NewSchedule은 src/types/schedule에서 따로 관리했다.

interface NewSchedule {
  days: string[];
  start: string;
  end: string;
}

## ScheduleTable.tsx 스케줄을 보여주는 메인 페이지(ScheduleTable컴포넌트) 에서 data를 가져오고, 스케줄을 삭제하는 부분의 코드이다.

useQuery, useMutation를 사용하는 커스텀훅을 만들어 다른 폴더에 넣고 커스텀훅만 가져와 사용하고자 했으나,const queryClient = useQueryClient(); 이 부분의 useQueryClient는 (함수 내에서) 컴포넌트 내에서 사용해야 한다는 에러 메세지가 떠서 ScheduleTable컴포넌트 안으로 가져와 사용했다.

  const queryClient = useQueryClient();
  
  // get
  const { data } = useQuery<Schedule[] | any>(['schedule'], () =>
    getSchedule()
  );

  // delete
  const deleteMutation = useMutation((id: number) => deleteSchedule(id), {
    onSuccess: () => {
      queryClient.invalidateQueries(['schedule']);
    },
  });

AddForm.tsx

스케줄을 등록하는 Add 페이지(AddForm컴포넌트) 에서 data를 가져오고, 스케줄을 생성하는 부분의 코드이다.

  const queryClient = useQueryClient();

 // get
  const { data } = useQuery<Schedule[] | any>(['schedule'], () =>
    getSchedule()
  );

 // create
  const { mutate } = useMutation(createSchedule, {
    onMutate: (variables) => {
      if (JSON.stringify(data) === JSON.stringify(variables)) {
        setPopupOpen(true);
      } else {
        alert('추가되었습니다.');
        navigate('/view');
      }
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries(['schedule']);
    },
    onSettled: () => {},
  });

// Save버튼 클릭 시 호출되는 submit함수
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  	
    ...
    
    days.map((day: string) => {
      const newSchedule: any = {
        day: day,
        start: startTime + ' ' + times.meridiem,
        end: endTime + ' ' + times.meridiem,
      };

      mutate(newSchedule);
    });
    
  
  }

아쉬운 점

짧은 기간 내에 공부하면서 코드를 작성해야 해서 부족한 점이 많았다.
axios와 rest api로 CRUD를 구현하는 방법, react-query를 제대로 활용하는 방법에 대한 공부가 필요하다.