Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
useEffect의 dependency에 data를 추가하여 해결
There was a problem hiding this comment.
고생하셨어요 유경님! 리뷰가 너무 늦어버렸네요ㅠㅠ 지난번 보다 코드가 더 깔끔해진거 같아용!
멘토링 시간에 다루었던 추상화를 해보려고 합니다..! 아직 전부 반영하지 못했지만, 몇 가지 url이 같은데 get post put delete 하는 API의 경우 하나의 객체로 한 번 더 모아서 사용할까 하는데 괜찮은 걸까요?
넵 객체로 모으는 기준이 명확하면 괜찮을거 같습니다!
도메인별(Ex. 인증, 유저 등)으로 응집시켜서 관리해도 될거 같고, 화면 단위로 응집시켜서 관리해도 될거 같고 방법은 여러가지가 있을거 같은데 명확한 기준만 세워주세요:)
Comment on lines
+16
to
+20
| onSuccess: () => { | ||
| queryClient.invalidateQueries({ | ||
| queryKey: ["folderList"], | ||
| }); | ||
| }, |
There was a problem hiding this comment.
Query Key 관리하는건 tkdodo 형님의 이 글이 바이블처럼 여겨지는거 같아서 읽어보시고 적용해보시는걸 추천드립니다!
Comment on lines
+1
to
+71
| import axios, { AxiosResponse } from "axios"; | ||
| import { axiosInstance } from "./axios/axiosInstance"; | ||
|
|
||
| export function createHttpClient() { | ||
| async function get<R>(url: string): Promise<R> { | ||
| try { | ||
| const response: AxiosResponse<R> = await axiosInstance.get(url); | ||
| return response.data; | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error)) { | ||
| throw new Error(error.message); | ||
| } else { | ||
| throw new Error("데이터를 불러오는데 실패했습니다."); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| async function del<R>(url: string): Promise<R> { | ||
| try { | ||
| const response: AxiosResponse<R> = await axiosInstance.delete(url); | ||
| return response.data; | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error)) { | ||
| throw new Error(error.message); | ||
| } else { | ||
| throw new Error("데이터를 삭제하는데 실패했습니다."); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| async function put<T, R>(data: T, url: string): Promise<R> { | ||
| try { | ||
| const response: AxiosResponse<R> = await axiosInstance.put(url, data); | ||
| return response.data; | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error)) { | ||
| throw new Error(error.message); | ||
| } else { | ||
| throw new Error("데이터를 저장하는데 실패했습니다."); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| async function post<T, R>( | ||
| data: T, | ||
| url: string, | ||
| headers?: string | ||
| ): Promise<R> { | ||
| try { | ||
| const response: AxiosResponse<R> = await axiosInstance.post(url, data, { | ||
| headers: { | ||
| "Content-Type": headers ? headers : "application/json", | ||
| }, | ||
| }); | ||
| return response.data; | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error)) { | ||
| throw new Error(error.message); | ||
| } else { | ||
| throw new Error("데이터를 불러오는데 실패했습니다."); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| get, | ||
| post, | ||
| put, | ||
| del, | ||
| }; | ||
| } |
There was a problem hiding this comment.
너무 좋습니다!!
하나 더 말씀드리면 지금처럼 throw new Error()를 통해 에러를 던질때는 string 값만 던질 수 있는데, 객체나 특정한 값을 에러에 담아서 보내려면 어떻게 해야할까요?!?
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
심화
주요 변경사항
코드리뷰 이후 추가
멘토에게