Next14로 TodoList를 다시 만들어 보았다.(Fetch통신) + 회고

 

 

복습 겸 투두리스트를 다시 만들어 보았다.

next14 버전으로 만들어보지는 않아서 next버전으로 만들어 보았는데, 

이번에 Axios통신을 사용하지 않고 Fetch로 사용해서 만들어보았다.

 

 

`배포 링크` : 클릭

`깃허브` : 클릭

 

Axios를 안쓰고 왜 Fetch를 썼나?

Fetch를 사용하면 내장 api로 되어있어 외부 라이브러리의 의존성을 줄일 수 있다.

또한, next14에서 앱 라우터로 바뀌면서 SSR을 이제 컴포넌트에서 호출할 수 있고 상황에 따라 CSR, SSR에서 불러와서 사용할 수 있다.

그리고 이제 폼 액션도 사용할 수 있기 때문에 앞으로 app router이 발전하면 할 수록 Fetch를 사용할 일이 많아질 것 같았다.

또한 공식문서에도 Fetch 사용을 권장하고 있어서 Fetch로 구현해 보았다.

 

 

대신 Axios보다 보일러 플레이트가 많아진다는 점,

Fetch는 SyntaxError 에러가 날때 try, catch 블록으로 감싸주고, 에러처리를 별도로 해줘야해서 axios와는 차이점이 있다.

그래서 개발자 마다 선호하는 것이 다를 수 있다는 점이다.

 

 

그래서 이번에 연습 겸 Fetch통신을 사용해서 만들어 보았다.

 

 

---

 

 

✏️ Api 코드 작성

endpoint, method, body를 매개변수로 불러오는 함수

export const todoClient = async (
  endpoint: string,
  method: string,
  body?: InputForm
) => {
  const options: RequestInit = {
    method,
    headers: {
      "Content-Type": "application/json",
    },
  };

  if (body) {
    options.body = JSON.stringify(body);
  }

  const res = await fetch(`${SERVER_URL}${endpoint}`, options);

  const data = await res.json();
  return data;
};

 

 

 

요청을 처리하는 함수들

//데이터 불러오기
export const getTodos = async () => {
  const data = await todoClient("/todos", "GET");
  return data;
};

//데이터 추가하기
export const addTodos = async (todos: InputForm) => {
  const data = await todoClient("/todos", "POST", todos);
  return data;
};

//데이터 삭제하기
export const deleteTodos = async (id: string) => {
  const data = await todoClient(`/todos/${id}`, "DELETE");
  return data;
};

//데이터 수정하기
export const updateTodos = async (id: string, todos: InputForm) => {
  const data = await todoClient(`/todos/${id}`, "PUT", todos);
  return data;
};

 

 

 

만들어 보면서 느낀 점

아직 공부하는 단계라 interceptor 라우터처리나 폼 액션 등 여러가지 활용을 못해봤지만

기본적으로 공부하는 단계라서 나중에 발전해서 Fetch통신도 잘 활용해 봐야겠다는 생각을 했다.

그리고 탠스택 쿼리 오랜만에 쓰다보니 버벅여서 이전 코드를 보면서 다시 만들었다...;;; (ㅠㅠ)

복습의 중요성! 복습 열심히 하자..

 

 

보완 해야할 점

1. 커스텀 훅으로 만들어 보고 싶었는데 좀 더 고민해서 만들어 봐야겠다.

2. useForm으로 구현해보고 싶었는데 이건 좀 더 공부해서 마이그레이션으로 진행해 봐야겠다.

 

 

 

 

 

공부하면서 본 문서들

Axios vs Fetch: Which is Best for HTTP Requests