6일차에 작성하는 5일차 TIL ...
미니프로젝트가 끝났다. 완전 기초밖에 되지 않는 프로젝트였지만 이번 프로젝트를 하면서 협업은 물론이고 그 외 몰랐던 HTML, CSS에 대해 많이 알게 된 것 같다.
애니메이션 효과를 적용해보는 건 처음이었는데, 어떻게 해야하나 찾아보고 응용하는 과정이 너무 재미있었다. 기존에는 종이가 넘어가듯 전환 효과가 들어갔으면 좋겠어서 여기저기 찾아봤지만 아쉽게도 내 서칭 실력으로 그 정도 수준의 효과를 찾아보기는 어려웠고, 어떤 효과가 좋을까 보다가 이런 페이지를 발견했다.
https://speckyboy.com/page-transition-effects/
뭐 여러가지 전환 효과를 모아놓은 페이지인데 뭔가 세로로 좁았다가 넓어지는 듯한? 효과가 있어서 이걸 비슷하게 쓰면 얼추 책이 펼쳐지는 것 같겠다 싶어 아주 간단하게 응용했다.
#open {
animation: open 0.5s ease forwards; // 0.5초 동안 실행되는 애니메이션 생성
}
@keyframes open {
from {
transform: scaleX(0%); // X축의 비율을 0으로 설정해 페이지가 안 보이게
transition-timing-function: ease-out; // 빠르게 시작해서 점점 느려지도록
}
to {
transform: scaleX(100%); // 0.5초후 X축 비율이 100%가 되면서 페이지가 노출됨
}
}
가로축을 찌부시켰다가 다시 늘리는 효과였다. 적용해보니 생각보다 괜찮아서(중요!) 만족스러웠다. 다만 애니메이션이 원래 그런건지? 페이지에 들어가있는 사진이 많거나 용량이 큰 경우 애니메이션이 느려지고 뚝뚝 끊겨서 모든 팀원들의 이미지 크기를 줄여서 넣어야만 했다.
댓글 기능도 만들었는데, 사실 나는 미니 프로젝트 합류 시점에 파이어베이스 강의를 안 봤기 때문에... 완전히 이것 뭐에요? 상태였다. 지금 생각해보니 프로젝트를 하면서 강의를 보기 힘들 것 같으니까 자연스럽게 다른 분이 해주길 내심 바랐던 것 같다. 아주 못됐다.
그래도... 내거 끝났다고 팀원분이 힘들어하는데 모르는 척 하는 건 도리가 아니니까! 내 역할이었던 html, css 작업을 마치고 부랴부랴 댓글 기능 완성하기에 합류했다.
댓글 기능에 꼭 들어가야 했던 것
- 입력한 댓글이 데이터베이스에 저장됨
- 데이터베이스에 저장된 댓글을 html로 불러와야함
- 페이지가 로딩되면 댓글도 함께 로딩되어야함
- (3)의 댓글이 최신순으로 정렬되어야함
- 총 댓글의 수가 카운트 되어야함
추가로 들어가길 희망했던 것
- 각 댓글마다 좋아요 카운트
- 삭제 기능
- 삭제 버튼 클릭하면 댓글을 삭제하시겠습니까? 팝업 노출
우선 뼈대로 만들어놓은 댓글 기능 스크립트가 강의로 배웠던 데이터베이스 넣기, 가져오기와는 완전히 다른 형태였기 때문에 1차로 멘붕이 왔던 것 같다. 어떻게 해야하지? 하지만 고민할 여유도 없었기 때문에ㅜㅜ 일단 팀원분은 하던 코드로 이어서 진행을 하고, 나는 강의 자료를 찾아보면서 새로 코드를 짜보기로 했다.
댓글을 넣고, 가져오는 건 사실 어렵진 않았다. 의외로 애먹었던건 삭제.. 최신순 정렬.. 과 같은 부수적인 기능이었다. 페이지 로딩하면 댓글이 불러와지는 것도 확인했는데 뭐 하나 추가할 때마다 자꾸 댓글이 사라졌다. 근데 뭐가 문제인지 몰라서 제일 답답했던 것 같다.
import { getFirestore, collection, addDoc, getDocs, deleteDoc, updateDoc, increment, query, orderBy, doc, getDoc }
from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";근데 걍 여기다가 함수 안 불러와서 그런 거였음.
아 그리고! 댓글에 노출되는 타임 스탬프를 적어야하는데 자꾸 테스트 댓글에 날짜가 6월이라고 나와서 얘 왜이러지 싶었는데
let month = ('0' + (date.getMonth() + 1)).slice(-2);자바스크립트에서는 0이 시작이기 때문에.. 현실은 7월이지만 1월=0월, 2월=1월 이런 식으로 되어서 자꾸 6월로 출력된거였다. 그래서 getMonth 에다가 꼭! +1 을 해줘야 날짜를 맞출 수 있다.
댓글 기능은 사실상 강사님이 70% 인터넷 29% 내가 1% 정도로 기여했기 때문에 아직까지 왜 꼭 이 함수를 사용해야하는지, 왜 이 부분이 다른지 완벽하게 이해하지는 못했다.
그래도 삭제버튼이랑 삭제 되묻는 팝업은 나의 힘으로 만들었으니까...
<button class="deleteComment" data-id="${id}" data-comment="${comment}">삭제</button>
$('.deleteComment').click(async function () {
let id = $(this).data('id');
let comment = $(this).data('comment');
let confirmation = confirm(`"${comment}" 해당 댓글을 삭제하시겠습니까?`);
if (confirmation) {
await deleteDoc(doc(db, "comment", id));
alert('댓글이 삭제되었습니다.');
window.location.reload();
}
});
}
삭제 버튼에 댓글의 id와 내용을 저장해놓고 누르면 그 댓글의 id와 내용을 불러와서 "댓글내용" 해당 댓글을 삭제하시겠습니까? 라고 묻는 팝업이 나타난다. 로그인 기능은 자기소개 페이지에 투머치라고 생각해서 만들지 않았고, 비밀번호를 넣을 정도의 정신머리가 없었다. 때문에 남의 댓글도 삭제가 가능한 구조라 실수로 눌렀다면 취소할 수 있도록, 고의로 눌렀다면 양심에 찔리도록 팝업 기능을 추가했다.
프로젝트 페이지 맨 밑에 숨겨 놓고 도망가기 ~
