231128 TIL

css button 꾸미기

hover : 영역에 커서를 올렸을 때 색상이 진해지는 효과

 

button에 링크 달기

주소 링크 달때처럼 a 태그에 href 하려다가 안돼서 찾아봤더니 버튼에 링크를 달 때는 onclick 속성 이용!

 

---

상세페이지각 html 파일에 css는 참조파일로 넣으려고 링크를 넣었는데

다른 건 다 정상적으로 뜨면서 제일 큰 box의 정렬이 풀려버린다!!! 분명 flec-direction : row; 로 적용했고

그 안의 또 다른 부모 컨테이너들은 그 안에서 column 설정 잘 지켜주고 있는데 

제일 큰 부모 컨테이너만 적용이 안되니....왜 그런 건지 한참을 이것저것 해봐도 모르겠다

css 파일에 <style> 태그를 주고 있었다..................

저 태그 지우니까 정상적으로 작동된다.

---

firebase 를 바탕으로 방명록 삭제기능 넣기

 

비밀번호와 일치하는 document ID를 불러오지 못해서 아무 진도가 안 나가고 있다..

여기 console로 

id가 뜨는건 확인했으나 활용을 어떻게 해야 하는지 모르겠다...

하루종일 매달리고 튜터님들께 질문드렸더니 한 분이 해결하셨다고 힌트를 주셨다.

해결이 가능한 오류라니 계속 붙잡고 해봐야될 것 같다.

그래서 오늘도 마찬가지로 학습한 것이 없다. 

오늘 자기 전에 성공하면 작성가능하겠지만

 

또다시 새로운 에러

doc, deleteDoc import 를 기존의 것과 같이 했더니 위의 참조 오류는 사라졌다.

그리고 다시 튀어나온 

db 오류....되돌아왔다

 

해결한 코드

 

Firebase의 공식문서 속 document 삭제 항목

 

 우리가 firebase를 강의에서 처음 배울 때 이런 시작부분 세팅에 대한 설명이 생략되어있었다.

당시에는 그렇구나~하고 넘겼는데 도구를 정말로 잘 이용하려면 세팅 단계부터 제대로 이해를 해야하는 구나 싶다.

입력값을 firebase에 저장하고 로딩시 읽어오는 기능까지는 위에서 네번째줄까지로 충분했다.

그런데 이제 문서를 삭제하려면 

 import { doc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

 

해당되는 걸 추가로 넣어야 했다.

 

인터넷에서 방명록 삭제 댓글 삭제 같은 걸 찾아다니면서 온갖 코드를 집어넣고 거기로 부족해 비밀번호 검사까지 넣은 흔적....은 일단 제일 기본적인 '삭제'기능부터 해결하기 위해 다 지웠다.

 

1. 지정한 방명록의 문서 ID 값을 가져올 수 있어야 한다.

2. 가져온 문서 ID 값을 불러와서 삭제할 수 있어야 한다.

3. 삭제 버튼을 클릭하면 위의 두 가지가 실행되어야 한다.

 

1.

 let temp_html = `
            <div class="card-body" data-pass="${pass}" data-entry-id="${doc.id}">
        <h5 class="card-title">${name}</h5>   
        <p class="card-text">${content}</p>
        <a href="#" id="del" class="btn btn-danger">삭제</a>
        <a href="#" id="ch" class="btn btn-light">수정</a>
         </div>`;
            console.log("Document ID:", doc.id);
            $('#naeyongdw').append(temp_html);

getDocs 로 데이터를 불러와서 붙여넣을 때 

data-entry-id="${doc.id}"

를 통해 ID 를 가져왔다. (사실 서치하면서 집어넣은거라 아직 이 항목에 대한 이해가 완벽하지 않다. 자고 일어나서 공부해볼게요...) (pass 는 비밀번호 검사하려고 넣어놨던 것이니 일단 생략)

 

2.

 //'.btn-danger' : 문서 내에서 클래스가 '.btn-danger'인 모든 요소를 선택
        $('#naeyongdw').on('click', '.btn-danger', async function () {

            // 선택한 방명록에 해당되는 document ID 를 변수 지정
            const entryId = $(this).closest('.card-body').data('entry-id');
            console.log(entryId);

            // 'abc' collection의 entryId에 해당되는 document를 불러오고, 삭제
            await deleteDoc(doc(db, "abc", entryId));
            alert('삭제완료');

            window.location.reload();
        })

복잡한 걸 없애고 나니 눈에 잘 들어오더라🥲🥲

튜터님께서 주신 힌트.

Firebase 문서에 저 형식이 떡하니 나와있더라ㅜㅜ 진작에 읽어볼걸...

올바른 doc 호출 형식을 쓰니 deletDoc 이 바로 적용되었다.

 

모든걸 뒤죽박죽하지 말고 가이드 따라서 차근 차근 해보자....

 

---

삭제 기능에서 가로막혔을 때 솔직히 해결할 수 있을거란 기대감이 적었다...문제 마주치니까 머리가 빙글빙글 돌아서 나 너무 못하는 거아닌가 온갖 생각이 다 들었다....그런데 튜터님들께 질문드리고 힌트얻고 혹시나 혹시나 하는 마음에 출석시간 끝났어도 그냥 해보다가 성공했을 때 너무 신나서 어쩔 줄 몰랐다.

현직자들한테는 문젯거리도 안되는 문제일 수 있겠지만 그래도 기쁜 걸 어떡해 ..