FACTS(사실, 객관) : 내가 한 일
웹개발 종합반 3~5주차 듣고 JavaScript를 활용하여 동적 데이터 생성하기 숙제
firebase를 이용하기 위한 기본 세팅과 firebase 데이터 추가 코드 작성까지는 문제없이 따라갈 수 있었지만
데이터읽기 및 카드생성코드 완성에서 막혔다.
정확히는 try-catch 문에서 막혔는데, 첫째로try{} catch {} 가 왜 들어갔는지, 어디에 쓰이는 건지 몰랐고둘째로const = docRef ~ 부분이 강의 안의 코드와 달라서
try {
const docRef = await addDoc(collection(db, "foods"), {
// 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
let doc = {
'title' : title,
'star' : star,
'comment' : comment,
'image' : image
}
});
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
이런 식으로 코드를 넣어 계속 오류가 뜨고
아무것도 쌓이지 않는 문제가 자꾸 발생함.
try {
const docRef = await addDoc(collection(db, "foods"), {
// 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
'title' : title,
'star' : star,
'comment' : comment,
'image' : image
});
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
찾아본 내용으로 수정 후,
정상적으로 쌓이는 것을 확인 했지만
기록한 내용이 표시가 되지 않음
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
부트스트랩까진 금방 이해하고 따라갈 수 있었는데 자바스크립트 시작하자마자 헤메게 돼서 걱정스러움코드가 조금만 달라져도 헤메는 문제
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
"try-catch" 문.
예외를 처리하기 위한 구문
예)
try {
const docRef = await addDoc(collection(db, "foods"), {
// 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
'title': title,
'star': star,
'comment': comment,
'image': image
});
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}try : 안에 있는 내용이 정상적으로 실행되면 "음식이 추가 되었습니다!" 라는 메시지와 함께 페이지가 새로고침 됨
catch : try에서 에러가 발생하면 에러가 (e)변수에 할당되어 catch로 전달됨
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지
요청을 보내거나, 에러 정보를 표시하거나, 사용자에게 대안을 제안하는 등 여러 방면으로 적용할 수 있다고 함