그냥 일기입니다
결과물 :
https://bmdk9.github.io/IntroTeam/
메인페이지
TODAY 2002 | TOTAL 118 I-world 참고: https://www.cyworld.com 홈 김성훈 김민선 유민아 이예진 방명록
bmdk9.github.io
미니프로젝트를 하면서 배우거나 느낀 점 :
팀원 중 한 분이 만들어주신 템플릿을 활용해서 개인페이지를 만들었다.
개인페이지를 만들면서 <head>,<body>,<div>,<span>등의 html에 대해 익히고 사진을 넣으면서 사진 넣기, 하이퍼링크 넣기, 배경 이미지 넣기, display:flex , flex-direction 으로 내부 항목을 정렬하는 방법, 부트스트랩 등 css에 관련된 전반적인 사용법도 익힐 수 있었다.
방명록 페이지를 만들면서 html의 구조와 요소들에 접근하고 이용하는 법 등에 대해 더 공부할 수 있었다.
또한 javascript의 전반적인 기능과 문법을 익히고 firebase의 firestore database와 realtime database를 javascript에서 이용하여 노드 생성, 읽기, 삭제,탐색 등 이용하는 방법에 대해 공부할 수 있는 기회가 되었다.
html 파일에서 javascript 파일을 따로 분리하는 방법을 알게되었는데 그 이후 한 html파일에서 firestore database와 realtime database를 모두 쓰는게 가능해졌다.
github로 코드를 병합하는 과정을 거치며 git에도 좀 익숙해졌다.
개발을 1년 반만에 다시 해보는데 구글링을 하면서 얻은 정보로 유추하여 문제를 해결해 나가는 과정이 정말 재미있었다. 오랜만에 스트레스 받지 않고 즐기면서 개발했던, 제가 왜 개발자가 되고싶어 했는지 다시 떠올리게 된 프로젝트였던 것 같다. 열심히 하고 퀄리티가 좋은 결과물을 내려고 노력하는 팀원들을 만나서 배우는 점도 많았고 동기부여가 되는 프로젝트였다고 생각한다.
발표회 후기 :
다른 조들은 비전공자들로 구성됐는데도 방명록 수정기능까지 넣고 잘 해왔더라
하루만 더 있었으면 넉넉하게 방명록 수정 드롭다운까지 했을 거 같은데 안 놀고 개발 더 할걸 하고 후회했다
그리고 나는 코드 효율성 개선해 보겠다고 힘주고 랜덤프로필 기능 넣겠다고 신나서 코드를 망치고 발표때 이상하게 작동하게 만들었다
//방명록 삭제하는 부분
$(document).on("click", "#deleteLogBtn", function () {
let parentDiv = $(this).closest('div');
let textDiv = parentDiv.children('.logText');
let pwInput = parentDiv.find('input');
let id = textDiv.attr('id');
let password = pwInput.val();
const dbRef = database.ref('logs');
dbRef.child(id).remove(); 님아 이걸 왜써놔요
const object = dbRef.child(id).val();
if (object.pw == password) {
dbRef.child(id).remove();
}else{
alert("잘못된 비밀번호");
}
window.location.reload();
});
//방명록 삭제 끝남코드 효율성 개선한답시고 고치다가 비밀번호도 안 받고 db에서 삭제해버리는 코드를 중간에 넣어버리고
밑에 저 코드도 어쩔때는 되던데 또 동작이 제대로 안 됨 ㅋㅋㅋㅋㅋ
그래서 저 함수 전체에서 에러나서 window.location.reload()도 안 작동되어서 삭제된거 말고 남은게 기존에 있던 방명록 이후에 이어서 추가로 떠버리는 사상 초유의 사태가 발생했다
와 우리팀 발표 보는데 머리가 띵 해오고 팀원들한테 너무 미안했다
아무튼 그래서 그냥 기존걸로 수정하고 dbRef.child(id).remove();도 const dbRef밑에서 지웠다 ...
웃긴건 저걸 vscode 노션 블로그 3군데서나 보면서도 아무 생각이 안 들었다는거 ㅋㅋ 다시 보다보니 너무 어이없다 저렇게 이상한 코드가 대놓고 써있는데 왜 몰랐던거임? 뇌를 빼놓고 살면 안 된다는 걸 다시 한 번 깨닫는다
그리고 뭔가 코드가 db를 한바퀴 순회하는게 내 눈에는 너무 비효율적으로 보여서 바로 접근하는 방법을 쓰려고 문법을 잘 알지도 못하면서 될 거 같은 식으로 써놓는 것도 에러를 일으키는 요인이 되었다고 생각한다. 혼자 막 유추해서 질러버리는 버릇도 고쳐야겠다. 근데 진짜 귀신에 홀린 거 같은게 전날 테스트할때는 멀쩡히 동작했단 말입니다..?
$(document).on("click", "#deleteLogBtn", function () {
let parentDiv = $(this).closest('div');
let textDiv = parentDiv.children('.logText');
let pwInput = parentDiv.find('input');
let id = textDiv.attr('id');
let password = pwInput.val();
const dbRef = database.ref('logs');
dbRef.on("value", (snapshot) => {
snapshot.forEach((child) => {
const object = child.val();
if (id == child.ref.key) {
if (object.pw == password) {
dbRef.child(id).remove();
}
else {
alert("잘못된 비밀번호");
}
}
});
});
window.location.reload();
});
//방명록 삭제 끝남그리고 앞으로는 좀 책임감과 꼼꼼함을 가지고 마지막까지 테스트와 점검을 잘 해야겠다는 생각을 했다
'Developing > Journal' 카테고리의 다른 글
| [내일배움캠프][Team Project]키오스크 개발일지 (1) | 2023.10.24 |
|---|---|
| [내일배움캠프][Java 개인과제]키오스크 개발일지 (1) | 2023.10.19 |
| [내일배움캠프][미니프로젝트]메인페이지에서 방명록 3줄 띄우기 개발일지 (0) | 2023.10.10 |
| [내일배움캠프][미니프로젝트]방명록 페이지 개발일지 (2) | 2023.10.07 |
| [내일배움캠프][미니프로젝트] 개인페이지 만들기 (0) | 2023.10.06 |
