[2024.07.17 TIL] JS 동적 데이터 생성

전에 만들었던 푸드파이터 사이트

파이어베이스 사용해서 데이터 추가할려고 하는데

    $("#addBtn").click(async function () {

        // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
        
        let image = $('#image_input').val();
        let title = $('#title_input').val();
        let star = $('#star_input').val();
        let comment = $('#comment_input').val();
        
        try {
            const docRef = await addDoc(collection(db, "foods"), {

                // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
                'image': image,
                'title': title,
                'star': star,
                'comment': comment
            });

            alert("음식이 추가 되었습니다!");
            window.location.reload();
        } catch (e) {
            console.error("Error adding document: ", e);
        }
    });

위 코드에서 이런 에러가 계속 뜬다..

        FirebaseError: Function addDoc() called with invalid data.
        Unsupported field value: undefined (found in field image in
        document foods/Bc708ph80uojfOcCOSF0)});

개발자도구에서는 트라이캐치에서 캐치문에 오류로 표시되는데 예외처리 된 것 같다.

대충 필드 값을 없다고 하는 것 같은데 스크립트에는 아무리 봐도 문제를 모르겠다.

근데 이럴수가 ㅠㅠ

input_box에 오타가 있었다...

                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="image_inputt" placeholder="name@example.com">
                    <label for="image_input">음식 이미지 주소</label>
                </div>

역시 복붙하는 습관을 들여야겠다고 다시 다짐한다.

해결!