반응형
홈페이지 구현?
나도 할 수 있는 것인가?
개발자 이게 되네?
홈페이지 구현
1. 홈페이지 구현으로 자기소개서 홈페이지를 팀원분들과 프로젝트를 진행하고 있다.
2. 오늘 크게 메인페이지, 멤버들 페이지, 방명록으로 두 명씩 팀을 나누어 만들고 취합을 하였다.
3. 취합을 하니 정말 하나의 홈페이지가 만들어졌다.
4. 정말 디테일이 무섭다;;;
5. 마지막인 방명록을 통해 spring과 데이터베이스를 배울 수 있었다.
document.getElementById("guestbook-entries").innerHTML = entriesHtml;
//id가 guestbook-entries인 요소를 찾아 그요소의 innerHTML속성을 entriesHtml변수의 값으로 설정
//간단하게 요약하면 위의 묶여있는 방명록들이 id가 guestbook-entries로 설정되어 html형식으로 붙여진다는 뜻이다.
document.querySelectorAll(".btn-delete").forEach(button => {
button.addEventListener("click", async (event) => {
//btn-delete(삭제속성)을가진 버튼에 삭제기능을추가코드
let docId = event.target.getAttribute("data-id");
//클릭된버튼의 "data-id"속성 값을 가져와 docId 변수에 저장
let passwordInput = document.getElementById(`password-${docId}`).value;
//해당 문서id와 일치하는 비밀번호 입력필드의 값을가져옴
let docRef = doc(db, "guestbook", docId);
//문서를참조
let docSnapshot = await getDoc(docRef);
if (docSnapshot.exists() && docSnapshot.data().password === passwordInput) {
//해당스냅샷이 존재하고 비밀번호가 맞으면
await deleteDoc(docRef);
alert("삭제 완료");
window.location.reload();
} else {
alert("비밀번호가 틀립니다");
}
});
});
document.querySelectorAll(".btn-edit").forEach(button => {
button.addEventListener("click", async (event) => {
let docId = event.target.getAttribute("data-id");
let passwordInput = document.getElementById(`password-${docId}`).value;
let docRef = doc(db, "guestbook", docId);
let docSnapshot = await getDoc(docRef);
if (docSnapshot.exists() && docSnapshot.data().password === passwordInput) {
let newContent = prompt("새로운 내용을 입력하세요", docSnapshot.data().content);
if (newContent !== null) {
//새내용은 비어있을수없음
await updateDoc(docRef, { content: newContent });
//새내용을 받아와 doc을 업데이트
alert("수정 완료");
window.location.reload();
}
} else {
alert("비밀번호가 틀립니다");
}
});
});
}
}
비록 내가 안한 부분이지만 코드를 읽어 봄으로써 backend에서 삭제와 수정을 if문을 통해 바로 잡음을 할 수 있다는 것이 신기했다.
6. 세상에 정말 많은 변수가 있다....!
백엔드 과정을 선택한 나의 자신 무수히 많은 변수에 나무만 보는 것이 아닌 숲을 항상 생각하는 마음을 가져야겠다.
아직 외계어를 배우는 입장이지만....
튜터님들과 같이 코딩을 짜고 일할 수 있는 날까지
꾸준히 나아가겠다.
꾸.길
반응형