[Refactor] token 필요없는 fetch custom hook 만들기

[eonseok-jeon]

Related Issue : Closes #444

---

🧑‍🎤 Summary

• axios를 이용한 instance에서 fetch를 이용한 instance로 변경
• 기존 axios instance 이용한 부분 fetch instance로 변경

🧑‍🎤 Comment

코드 짜기 전에는 hook으로 분리해줄까 했었는데
짜고 보니 분리할 필요가 없더라고요?
원래 방식처럼 그냥 바로 instance 가져다가 사용하면 됐어요

사용법은 비슷해요

첫 번째 인자로 url 넣어주고 두 번째 인자로 options들 넣어주면 됩니다~
단 body는 JSON.stringify()로 감싸줘야 해요!

const api요청 = async (인자들) => {
  const res = await fetchInstance(url, {
    method: 'POST',
    headers: {
      // ...
    },
    body: JSON.stringify({
      // ...
    }),
    // ...
  });

  return res;
};

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[wuzoo]

고생하셨습니다 !

하나의 의견이 있는데, 현재 headers에서 Record 유틸리티 타입으로 string, string key-value를 받고 있는데, 잘못된 key 값을 헤더에 넣었을 시 에러가 발생할 수도 있을 것 같다는 생각을 했습니다.

fetch api를 사용하기로 했으므로 Union 타입으로 headers key 값에 들어갈 스트링을 제한해주면 어떨까 싶습니다 !

[wuzoo]

고생하셨습니다 !

하나의 의견이 있는데, 현재 headers에서 Record 유틸리티 타입으로 string, string key-value를 받고 있는데, 잘못된 key 값을 헤더에 넣었을 시 에러가 발생할 수도 있을 것 같다는 생각을 했습니다.

fetch api를 사용하기로 했으므로 Union 타입으로 headers key 값에 들어갈 스트링을 제한해주면 어떨까 싶습니다 !

Changes request 잘못 눌렀네요 ㅎㅎ..

[eonseok-jeon]

@wuzoo
좋은 거 같습니다! 모든 걸 다 제한하기엔 너무 많아서 대표적으로 사용되는 애들로만 일단 제한을 걸었어요

type StandardHeaders = 'Content-Type' | 'Authorization' | 'Accept' | 'Cache-Control' | 'User-Agent';

[wuzoo]

뽕쌈한 것 같습니다 !!

[lydiacho]

좋아요 ~ ~ ~ ~ 🚀 🚀

저도 주용오빠와 같은 맥락의 의견 내자면 method option도 타입 좁혀주는거 어떠신가요 ~??
물론 header key 에 비해서는 저희가 잘 알고있는 친구들이라 추론 없이도 큰 탈 없이 사용해줄 수 있겠지만
기존 axios 사용시에는 AxiosInstance 가 가지는 메소드로 추론이 됐었는데 현재 쓰이는 RequestInit의 method는 string으로만 되어있어서
대표적으로 사용하는 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' 타입만 아주 간단히 정의해주면 axios쓸때랑 똑같은 기능을 얻을 수 있어서 추가해줘도 좋을 것 같아용

[wuzoo]

완동 입니다 ~ 🚀

[eonseok-jeon]

@wuzoo @lydiacho
너무 좋네요~ 반영 했습니다 :)