$(document).on("click", "#hobbyDelete", async function () {
let id = $(this).parent().parent().data("value").toString();
const docRef = doc(db, "Dotorihobby", id);
await deleteDoc(docRef);
window.location.reload();
})
`let id = $(this).parent().parent().data("value").toString();`
데이터의 value값을 가져오는 과정에서 JS가 문자열로 저장되어있던 값을 정수로 변환하여 가져오는 상황 발생
`toString()` 함수로 값을 다시 문자열로 변환
📄 dailyScrum.js
fetch API로 데이터 요청
export async function fetchData() {
// 1. 네트워크 요청 보내기
const response = await fetch(`db_url`, {
method: "GET", // HTTP 메서드: GET 요청
headers: {
"Content-Type": "application/json" // JSON 형식으로 데이터 요청
}
});
// 2. 응답 상태 코드 검사
if (!response.ok) { // 응답이 성공적이지 않은 경우 (예: 404, 500 에러)
throw new Error("데이터를 불러오는데 실패했습니다."); // 에러 발생
}
// 3. JSON 데이터 파싱
const data = await response.json(); // JSON 형식으로 변환
return data; // 데이터를 반환
}
`"Content-Type": "application/json"`
클라이언트(브라우저)가 서버에 데이터를 보낼 때, "나는 이 데이터를 JSON 형식으로 보내겠다" 라고 명시
`const data = await response.json();`
서버가 응답을 보낼 때, 그 응답의 본문(body)은 기본적으로 텍스트(String) 형태로 전달 됨
response.json()은 이 응답 본문을 JavaScript 객체로 변환
이 작업을 하지 않으면 응답 데이터를 직접 처리할 수 없음
fetch API로 요청한 데이터 처리
const data = await fetchData(); // fetchData 호출로 비동기 데이터 요청
if (data.documents) { // 문서가 존재하는지 확인
data.documents.forEach(doc => { // 각 문서에 대해 반복
const fields = doc.fields; // 해당 문서의 필드 추출
// 각 필드의 값 추출
let teamAim = fields.teamAim.stringValue;
let ghGoal = fields.ghGoal.stringValue;
let cjGoal = fields.cjGoal.stringValue;
let syGoal = fields.syGoal.stringValue;
// 문서 ID 추출 (Firestore에서 자동 생성된 문서 ID 가져오기)
let id = doc.name.split("/").pop();
// 날짜 값 (존재 여부에 따라 값 설정)
let date = fields.date?.stringValue;
// 체크 상태 값 추출
let ghcheck = fields.ghcheck.stringValue;
let cjcheck = fields.cjcheck.stringValue;
let sycheck = fields.sycheck.stringValue;
});
}
`fields.date?.stringValue`
옵셔널 체이닝(?.)을 사용하면 date 필드가 없을 경우 에러가 발생하지 않고 undefined 반환
