다음 내용은 내일배움캠프 활동 중 배운 내용을 정리한 글입니다.
💻 TIL(Today I Learned)
📌 Today I Done
✏️ 팀원들 코드 병합하기
- 초반에 파일 나누는 것을 하지 못해서 각자 같은 파일로 복사해서 작업함
- 그래서 깃허브에 올리고도 직접 비교하면서 수정하는 절차가 필요했음
- 그래서 초반에 디렉토리 구성이나 파일 분리 기획이 중요함
✏️ 댓글 기능 각 모달창에 넣기
- hidden 타입의 input 태그를 이용해서 각각의 모달창에 댓글 기능을 구현할 수 있었음
- 하지만, 댓글 리스트 같은 경우 하나의 스크립트 파일에서 코드를 가져와서 사용하기에 각각 형태가 다른 모달창에서 댓글기능을 넣기에는 어려움이 있음
📌 Tomorrow's Goal
✏️ 팀원들 코드 병합하기
- 남은 팀원 2명의 코드 병합하기
- 진짜 제출할 시간이 부족할지도....
✏️ 제출용 시연 영상 촬영
- 병합이 끝난 후 시연 영상을 녹화해서 제출해야 함
- 목소리와 시연되는 화면만 있으면 됨
- 진짜 시간이 얼마 남지 않음
📌 Today's Goal I Done
❌ 팀원들 코드 병합하기
- 아직 팀원 2명의 코드가 완성되지 않아서 코드를 완전히 병합하진 못했음
- 최대한 빨리 나머지 팀원들의 코드를 합치고 영상을 촬영해야 함
- 정말로 시간이 빠듯함
⚠️ 구현 시 발생한 문제
✔️ 각 모달창에서 댓글 구역의 스타일을 건들 수 없음
- 처음에는 hidden 타입의 input 태그로 누구의 모달인지 넘기면 해당 모달의 주인의 댓글들을 가져올 수 있었으나
- 하나의 스크립트 코드를 사용하기에 클래스나 아이디 값이 생각 이상으로 복잡해짐
- 시간이 별로 없기에 과감히 모달창에서 빼기로 결정함
- 모달창에서 댓글 기능을 빼고 메인 페이지 하단에 넣어서 방명록처럼 만듦
- 메인 페이지로 빼니 코드도 약간 간결해 졌음
- 더 보기 버튼 클릭 시 데이터를 가져오는 게 아니라 reload 될 때마다 댓글 리스트를 가져옴
// 댓글 리스트를 출력하기 전에 비워두기 위한 함수
$('.comment_list').empty();
// 파이어베이스에서 데이터 가져오는 forEach문 (날짜 순으로 정렬해서 가져옴)
let docs = await getDocs(query(collection(db, "9to9_Team_Intro"), orderBy("date")));
docs.forEach((doc) => {
let row = doc.data();
// isDelete가 false일 때 댓글 출력
if (row['isDelete'] == false) {
let commenter = row['commenter'];
let content = row['content'];
let date = row['date'].toDate();
// 날짜, 시간 포맷 변경하기
let year = date.getFullYear();
let month = ('0' + (date.getMonth() + 1)).slice(-2)
let days = ('0' + date.getDate()).slice(-2)
let hours = ('0' + date.getHours()).slice(-2)
let minutes = ('0' + date.getMinutes()).slice(-2)
let seconds = ('0' + date.getSeconds()).slice(-2)
let day = year + '-' + month + '-' + days + " " + hours + ":" + minutes + ":" + seconds
let html_temp = `
<hr class="border border-dark border-2" style="width: 100%;">
<div class="comment">
<div class="comment_left">
<div class="commenter_info">
<img class="comment_img" src="./imgs/comment_img.png">
<div class="commenter_and_time">
<p class="commenter" style="font-weight: bold">${commenter}</p>
<p class="comment_time">${day}</p>
</div>
</div>
<div class="comment_content">
<p style="font-weight: bold">${content}</p>
</div>
</div>
<div class="comment_right">
<!-- 댓글들을 구분하기 위해서 파이이베이스 각 필드의 id 값을 value에 넣어줌 -->
<button value=${doc.id} type="button" class="btn btn-outline-danger comment_delete_btn">삭제</button>
</div>
</div>
`
$('#comment_list').append(html_temp);
}
});
조금씩 정리하자!!!