[Refactor] fetch instance 기능 보강

[eonseok-jeon]

Related Issue : Closes #449

---

🧑‍🎤 Summary

• error throw 하여 핸들링할 수 있게 하기
• params 및 body 받을 수 있게 하기
• formData 받을 수 있게 하기
• instacne 적용

🧑‍🎤 Screenshot

가능한 에러 경우의 수 다 테스트 완료했어요 물론 정상 플로우도 다 테스트 했습니다

비번 틀림

존재하는 계정

이미 가입된 계정

비번 찾기 - 존재하지 않는 계정

인증번호 실패

🧑‍🎤 Comment

👊🏻 error throw 하여 핸들링할 수 있게 하기

fetch는 axios와 달리 4xx, 500 에러가 나도 error를 throw 하지 않고 response에 그냥 반환을 해요
그래서 에러가 발생 시 따로 error를 throw 해야 했어요
이때 error status를 같이 넘겨줌으로써 에러 로직을 세분화 시킬 수 있게 했어요
이때 기존 Error에는 status가 없어서 type 에러가 나기에 status가 추가된 CustomError class를 생성해줬어요
관련커밋

👊🏻 params 및 body 받을 수 있게 하기

GET으로 data 보낼 때 params에 담아서 보내줘야 하는데 이를 위해 URLSearchParams를 이용하여 url 뒤에 붙여줬어요
그 외에는 body에 data를 보내줘야 하는데 이때 JSON.stringfy로 감싸줘야 해요
매번 해주기 귀찮아서 instance에 처리해줬어요
관련커밋

👊🏻 formData 받을 수 있게 하기

form data를 보낼 때는 application/json 타입이 아니라서 JSON.stringfy로 감싸면 안 됐어요
따라서 formData인지 아닌지에 따라 'Content-Type'과 body를 달리 설정해줬어요
관련커밋

진행 과정 및 내용 정리는 언석 공부방에 적어놨으니 궁금하시다면 한 번 참고해 보셔도 좋을 거 같아요 :)

[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.

[cloudflare-workers-and-pages]

Deploying sopt-recruiting-frontend-test with    Cloudflare Pages

Latest commit:	8902b84
Status:	✅  Deploy successful!
Preview URL:	https://6c039a26.sopt-recruiting-frontend-test.pages.dev
Branch Preview URL:	https://refactor--449-upgrade-instan.sopt-recruiting-frontend-test.pages.dev

View logs

[lydiacho]

고생하셨습니다! 👍👍👍 노션 첨부해주신 덕분에 무리없이 코드 파악하면서 모두 이해할 수 있었네요

궁금한점이 그 timeout 보강 작업을 해당 PR에서 못찾아서요! 혹시 다른 브랜치에서 작업하신걸까요??

[eonseok-jeon]

@lydiacho

timeout 보강 작업을 해당 PR에서 못찾아서요! 혹시 다른 브랜치에서 작업하신걸까요??

아뇨! timeout은 필요한 곳에

const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 1); // 1ms로 설정

const response = await instance('/invalid-endpoint', {
  method: 'POST',
  signal,
});

이런 식으로 넣어주면 됩니다!!
fetch에 signal 속성이 들어있어서 공통적으로 해줄 건 없었어요!

[lydiacho]

아 사용부에서 해줘야하는거군요!!
이해했습니다 감사합니다💯 💯 💯

[wuzoo]

고생하셨습니다 ~ !!