Axios 요청을 미친 듯이 보내는 현상

오류 발견

StudyDetail 페이지에서 발견된 에러이다.

구글 개발자 도구 Network에서 axios 요청을 계속해서 보내는 것을 목격했다.

 

주니어 프론트엔드 개발자가 서버에 디도스를 건다는 말이 갑자기 떠올랐다.

이래서...

오류 분석 및 원인

당황스러웠지만 해당 Study(게시글)의 작성자의 이름을 찾는 함수를 브라우저에 렌더링 되는 retrun()에서 함수 호출이 되도록 로직을 작성한것이 유력한 원인으로 보였다.

 

const readWriterHandler = () => {
        let body = {
            _id: Study.writer
        }

        axios.post('/api/users/profile', body)
            .then(response => {
                setwriter(response.data.profile)
            })
            .catch(err => console.log(err))

        return (
            <td><a href={`/profile/${Study.writer}`}>{writer && writer.name}</a></td>
        )

    }

 

이 함수가 실제 렌더링이 되는 retrun()에서 위 함수를 호출하도록 되어있었다.

의도는 작성자의 이름을 렌더링하기 위해서다.

API 통신을 하여 가져온 Study 정보에는 작성자의 ID 밖에 없다.

작성자의 ID를 매개로 다시 User Collection에서 해당 ID를 가지고 있는 객체의 Name을 가져와야 해서 이런 코딩을 하게되었다;;

오류 해결

1차 개선 코드

const readWriterHandler = () => {
        axios.get(`/api/studyPost/studyPosts_by_id?id=${studyId}`)
            .then(response => {
                setStudy(response.data[0])
                
                let body = {
                    _id: response.data[0].writer
                }
                
                axios.post('/api/users/profile', body)
                .then(response => {
                    setwriter(response.data.profile)
                })
                .catch(err => console.log(err))
            })
            .catch(err => console.log(err))
    }, [])

 

처음 Study의 정보를 API 요청으로 가져오고 통신에 응답에 성공할시 바로 작성자의 ID로 작성자의 이름을 가져오도록 API 요청을 한다.

응답에 성공한다면 state를 설정하고 렌더링 시킨다.

다행이도 API 요청을 디도스마냥 보내던 것은 해결되었지만 코드가 너무 엉성하고 비효율적이다.

특히 API 요청을 한 컴포넌트에서 두 번을 하게되고 너무 비효율적인 코드이다.

2차 개선 코드

const readWriterHandler = () => {
        return (
            <td><Link to={`/profile/${Study.writer}`}>{writer && writer.name}프로필</Link></td>
        )
}

 

작성자의 이름을 렌더링하지 않고 클릭시 작성자의 프로필 페이지로 이동하도록 변경하였다.

API 요청을 두번 반복하지 않으며 좀 더 정확하고 폭넓은 프로필를 볼 수 있도록 개선.

Profile 페이지에는 작성자의 이름, 이메일은 물론 다룰 수 있는 스킬과 경험한 프로젝트를 볼 수 있다.