실습 프로젝트 (팀 소개 페이지 만들기)
-날씨 정보 가져오는 기능
-멤버 카드 CRUD(생성, 읽기, 갱신, 삭제) 기능
오늘 한 작업
-날씨 정보 가져오기
-멤버 카드 CRUD 중 삭제 기능
날씨 정보를 가져오는 부분
<script type="module">
...
// 날씨 정보를 가져와서 weatherSlider에 추가
fetch(url).then(res => res.json()).then(data => {
let row = data['RealtimeCityAir']['row'];
row.forEach((e) => {
let location = e['MSRSTE_NM'];
let dust = e['IDEX_NM'];
$('#weatherSlider').append(`<div class="weatherItem">${location} : ${dust}</div>`);
})
})
...
날씨 정보를 가져와서 항목마다 슬라이더 항목을 html로 생성한다.
<li class="nav-item">현재 서울의 날씨
<div id="weatherSlider" class="weatherSlider">
<!-- 여기에 날씨 슬라이더 아이템 추가 -->
</div>
<!-- fetch weather -->
style="vertical-align: middle;"> -->
</li>
-날씨 슬라이더의 html
// 문서 시작시 날씨 슬라이더 움직이기
$(document).ready(function () {
setInterval(function () {
const firstItem = $('.weatherItem').first();
firstItem.animate(
{ marginTop: '-=25px' }, // 항목 높이에 맞게 조정
500,
function () {
firstItem.appendTo('.weatherSlider'); // 첫 번째 항목을 리스트 마지막으로 이동
firstItem.css('marginTop', 0); // 항목의 위치를 초기화
}
);
}, 2000); // 2초마다 한 항목씩 슬라이드
});
-문서 로드시 슬라이더가 움직이도록 하는 js코드
-챗지피티의 도움을 받았다
-firstItem.animate에서 첫번째 항목을 위로 -25px만큼 이동한다.
-코드만 봤을 때는 첫번째 항목 외에는 움직이는 코드가 없어서 첫번째 코드만 올라가고 나머지는 그대로 있을것으로 예상했다.
-그러나 실제로는 모든 항목이 위로 25px씩 움직였다.
-챗지피티 왈)_ html의 레이아웃 시스템 때문에 첫번째 항목이 위로 올라가면 알아서 밑의 항목들이 따라 올라간다고 한다.
멤버 카드 삭제 기능
$('.deleteBtn').click(async function () {
const card = $(this).closest('.memberCard');
const name = card.find('.cardName').text();
const image = card.find('.cardImg').attr('src');
const mbti = card.find('.cardMBTI').text();
const merit = card.find('.cardMerit').text();
const cbst = card.find('.cardCbst').text();
const blog = card.find('.cardBlog').text();
const git = card.find('.cardGit').text();
const cards = collection(db, "profiles");
const q = query(cards,
where("name", "==", name),
where("image", "==", image),
where("mbti", "==", mbti),
where("merit", "==", merit),
where("cbst", "==", cbst),
where("blog", "==", blog),
where("git", "==", git)
);
const querySnapshot = await getDocs(q);
if (querySnapshot.docs.length > 0) {
for (const docSnapshot of querySnapshot.docs) {
await deleteDoc(doc(db, "profiles", docSnapshot.id));
console.log(`ID ${docSnapshot.id} deleted`);
}
window.location.reload();
}
})
deleteBtn클래스를 가진 버튼을 클릭하면 코드가 실행된다
-멤버 카드를 memberCard클래스로 정의해서 버튼을 선택하면 가장 가까운 memberCard클래스를 참조하도록 한다
-멤버 카드의 모든 항목들에 각각 클래스를 부여해 참조할 수 있도록 한다.
-파이어베이스의 쿼리를 통해 모든 항목이 일치하는 문서를 찾는다
=> db가 RDB가 아니라 NoSQL이라 id값이 없었다. 그래서 부득이 모든 항목이 일치하는 카드를 검색했다.
-해당하는 카드를 찾았다면 db에서 삭제하고 새로고침한다.
=> 카드를 생성할 때 mbti를 선택하지 않으면 null값으로 추가되기 때문에 문서를 찾을 수 없다...
=> mbti부분은 추가적인 처리를 하거나 무시해야할듯
제공된 강의에서 db에 있는 문서를 삭제하는 방법을 가르쳐주지 않았기 때문에 스스로 찾아서 했다.
문제는 db가 NoSQL이라는 것... 카드를 서버에서 받아올 때 id값을 받아와서 식별할 수 있으면 이런 비루한 작업은 필요없었을텐데.