231215 개발일지 TIL - Error: TypeError: data.result.data is undefined

Error: TypeError: data.result.data is undefined

문제 발생
백엔드 서버에서 json key값 구조를 변경하여 아래 문제가 발생한 현상.

문제 원인
fetch함수를 사용하여 서버에서 데이터를 가져오는 과정에서 발생한 오류.
이 오류는 서버로부터 받은 응답 객체(data) data.result.data가 정의되지 않았기 때문에 이 오류가 발생한 것이다.

해결 방법

    function fetchItemDetail(itemId){
        fetch(`http://192.168.0.158:8000/getItemDetail?id=${itemId}`)
            .then(response => response.json())
            .then(data => {
                console.log(data); // Add this line
                const offerImgList = data.result.data[itemId].data.offerImgList;
                let slideShow = document.querySelector('[name="slideshow"]');
                slideShow.src = offerImgList[0];
            })
            .catch(error => console.error('Error:', error));
    }

catch문 내에 콘솔 에러 메시지를 출력하는 코드를 작성 후 브라우저의 콘솔에서 서버의 응답을 확인할 수 있다.
만약 응답의 구조를 파악하는데 어려움이 있다면, 개발자 도구의 Network 탭에서 요청과 응답이 들어오는지 확인한다. 이를 통해 서버로부터 받은 데이터의 구조와 형태를 파악할 수 있다.

느낀 점
이렇게 오류 메시지를 해석하고 문제를 해결하는 과정에서 이를 통해 코드가 어떻게 동작하는지 이해하고, 필요한 수정을 적용하여 원하는 결과를 얻을 수 있었다.
그래서 json 형태가 바뀐 것을 api 문서를 통해 확인하고 백엔드에 수정 요청을 할 수 있었다.