프론트엔드에서 API요청 예외처리의 중요성

문제의 원인

components/footer/comment/Comment.tsx

tsx

    useEffect(() => {
        const getComment = async () => {
            const data = await getComments(path);
            if (data) {
                setComment(data);
            }
        };
 
        getComment();
    }, [path, comments]);

API 요청을 comments가 바뀔때마다 재요청을 보내게 해두었는데,
실제로 전달받은 값은 [] 빈 배열 이었습니다.

하지만 항상 API 요청으로 반환되는 이 값은 동일한 메모리주소로 취급받지않고,
항상 새로운 데이터가 온다고 인식이 되고 있었던 것입니다.

따라서 계속해서 요청을 10ms마다 보내고 있었던 것이었죠!
supabase가 요청에 payment를 요구하지않아서 정말 다행입니다..

해결 과정

1. 별개의 요청 함수를 제작

components/footer/comment/Comment.tsx

tsx

        const handleUpdateComments = async () => {
        const response = await getComments(path);
        if ('status' in response) {
            console.error(response.message);
        } else {
            setComment(response);
        }
    };
 
        useEffect(() => {
            handleUpdateComments()
    }, [path]);

useEffect를 통해 항상 요청을 보내는게 아니라
요청 함수를 제작해서 path 변동시 한번 요청을 보냅니다.

이후에는 CRUD 이벤트가 발생할때마다
해당 갱신함수를 호출해서 해결할 수 있었습니다.

2. 모든 요청의 실패를 반환

supabase와의 통신이 항상 성공할거라고 보장할수는 없습니다.
데이터를 요청하고 데이터의 요청이 실패했을때도 전부 처리해야 했습니다.

lib/commentParse.ts

tsx

function handleError(error: any, message: string): CommentStatus {
    console.error(message, error);
    return {
        status: false,
        message: `${message}: ${error.message}`,
    };
}
 
export async function getComments(pathId: string): Promise<Comment[] | CommentStatus> {
    const { data, error } = await supabase
        .from('comments')
        .select('content, created_at, updated_at, name, id, admin')
        .eq('path', pathId);
 
    if (error) {
        return handleError(error, 'Failed to fetch comments');
    }
 
    return data as Comment[];
}
 
(...)

이런식으로 CRUD 발생중 통신 핸들링을 하여 에러 형식에 맞춰 반환하고,
반환된 status가 false일 경우 message를 출력하게끔 조정하였습니다.

결론

개선된 API요청

프론트엔드의 주업무중 하나는 백엔드와의 API 통신이고
모든 실패의 대한 예외처리와 데이터 검사가 필요합니다. 주의하면서 코드를 작성하도록 해야합니다.

댓글은 포스팅에 도움이됩니다. 적극적인 의견 감사드립니다.

댓글을 불러오는 중...