TIL 2023-10-10 팀프로젝트 CRUD 구현

부트스트랩에서 퍼온 댓글창

저번 주 토요일 가공한 댓글창

참고 이미지

css 혼을 불태워 오늘 아침에 이 정도까지 만들었다.

이제 CRUD를 구현할 차례 (U는 시간, 기술상 문제로 구현을 못했다.)

DB는 파이어베이스를 쓸 것이다.

 

  <div class="card-body">
    <div class="commentaddarea">
      <div class="commenthead"> 🏠 방명록 </div>
      <!-- Comment form-->
      <div class="idpwdadd">
        <div class="idpwd">
          <div class="form-floating">
            <input type="email" class="form-control" id="inputid" placeholder="Name" maxlength="10">
            <label for="inputid">이름</label>
          </div>
          <div class="form-floating">
            <input type="password" class="form-control" id="inputpwd" placeholder="Password" maxlength="10">
            <label for="inputpwd">비밀번호</label>
          </div>
          <button id="addComment" type="button" class="btn btn-outline-primary">방명록 작성</button>
        </div>
        <div>
          <form class="mb-4"><textarea id="inputcom" class="form-control" rows="4" placeholder="방명록을 작성하세요"></textarea>
          </form>
        </div>
      </div>
    </div>
    <!-- Comment with nested comments-->
    <div id="commentarea" class="d-flex mb-4">
      <!-- Single comment-->
      <div class="d-flex">
        <div class="ms-3">
          <div class="fw-bold">국밥</div>
          <div class="commnetContens">든든한 국밥</div>
        </div>
        <div class="editdel">
          <span class="deletecom" style=" cursor: pointer;">삭제</span>
        </div>
      </div>
    </div>
  </div>

댓글 창 구조는 이렇다..

 

우선 C(Create)

우리는 inputid, inputpwd, inputcom에 넣어져 있는 값을 받아올 거다.

input 마다 적혀져 있는 id를 js에서 지정 후 변수에 value를 넣어준다

    let id = $('#inputid').val();
    let pwd = $('#inputpwd').val();
    let comment = $('#inputcom').val();

이후 db에 저장 될 형식을 만들어준다

    let doc = {
      'inputid': id,
      'inputpwd': pwd,
      'inputcom': comment
    };

id 변수를 inputid에 저장

pwd 변수를 inputpwd에 저장... (생략)

이 모든 값들을 doc라는 변수에 저장

    await addDoc(collection(db, "name"), doc);
    window.location.reload(); // 새로고침

addDoc 으로 name 이라는 곳에 doc라는 변수를 저장.

 

이제 R(Read)을 할 차례다.

서버에 값만 저장하고 프론트에서 읽지를 못하면, 댓글의 의도가 없어진다.

Get방식을 이용할 것이다.

 

$('#aa').append(bb); 를 이용해 aa라는 곳에 bb라는 변수를 추가할 수 있다.

 

 

  let docs = await getDocs(collection(db, "TP1_Comment"));
  docs.forEach((doc) => {
    let row = doc.data();

getDocs으로 데이터 받고 담을 변수를 선언한다.

    let id = row['inputid'];
    let pwd = row['inputpwd'];
    let comment = row['inputcom'];

inputid, inputpwd 등 DB 형식에 따라 저장된 값을 row(단일 구조 데이터 항목이라고 한다..)로 가져온다.

그리고 값을 담을 변수 선언한다.

    let temp = `
    <div class="d-flex">
      <div class="ms-3">
        <div class="fw-bold">${id}</div>
        ${comment}
      </div>
      <div class="editdel">
          <span data-hello=${doc.id} class="deletecom" style=" cursor: pointer;">삭제</span>
    </div>`;
    $('#commentarea').append(temp);
  });

기존 댓글 뼈대 html에 값이 들어갈 부분을 ${}로 채워주고 temp 라는 변수 선언 및 값을 넣어준다.

html이 들어갈 장소 (commentarea) 를 $('#')으로 지정해준 뒤, append 해준다.

${doc.id}는 뒤에 서술.

 

여기까지 하면 작동이 되긴하나, 빈 값을 넣어도 서버에 보내지고 읽어진다.

gif 마지막 부분을 보면 빈 값을 넣고 데이터를 보내는데도 보내지고 읽어진다.

이런 상황을 방지하려면 addDoc 하는 부분 위에 false 반환하는 if문을 써야된다.

 

    let id = $('#inputid').val();
    let pwd = $('#inputpwd').val();
    let comment = $('#inputcom').val();

    let doc = {
      'inputid': id,
      'inputpwd': pwd,
      'inputcom': comment
    };

    if (!inputid.value) {
      alert("이름을 입력하세요")
      return false;
    }
    if (!inputpwd.value) {
      alert("비밀번호를 입력하세요")
      return false;
    }
    if (!inputcom.value) {
      alert("방명록 내용을 입력하세요")
      return false;
    }

 

이런 식으로 if (!inputid.value)를 쓰면

value에 값이 없을 때 1로 바뀌니까 if문이 실행

alert으로 **을 입력하세요 출력

false 반환. 을 입력해야하는 값마다 적어주었다.

 

결과

 

U는 기술, 시간상 부족하여 만들지 못하였다.

 

D는 오늘 2시간만하면 될 거 같았는데 팀원끼리 합심해서 구글링 5시간 이상을 해도 못찾았다.

이건가? 이건가? 이건가?ㅋㅋㅋ

강의 내용에도 없었고, UD 구현하려고 튜터님들한테 질문해도 지금 내 레벨에서는 UD는 정말 어려울 거다, 안해도 된다 의견 다수

 

스파르타 코딩 클럽은 CRUD 강의를 배포하라...ㅠ

 

팀원분중 한분이 각종 튜터님들에게 몇시간이고 물어본 결과 답은 이거 였다.

 

댓글 삭제 <span> 에 데이터를 저장하는 data-변수=${doc.id} 를 추가한다.

doc.id가

여기에 적히는 id라고 한다.

진짜 몇시간 검색해도 안나왔는데... 팀원 분께서 4번 정도 나는 2번 정도 튜터님한테 왔다갔다 하면서 알아냈다.

팀원분께서 설명하시길 이 값을 변수에 담고 data화 시킨다고 한다고 하신다

 

  $(document).on('click', '.deletecom', function () {
    const commentId = $(this).data('hello'); // 댓글 ID 가져오기
    const ok = window.confirm("삭제하시겠습니까?");
    console.log(commentId)
    if (ok) {
      try {
        // Firestore에서 댓글 삭제
        deleteDoc(doc(db, "name", commentId));

        // 성공적으로 삭제되면 DOM에서 해당 댓글 삭제
        $(this).closest('.d-flex').remove();
      } catch (error) {
        console.error("댓글 삭제 중 오류 발생:", error);
      }
    }
  });

hello 변수에 있는 data를 commentId에 저장

cofirm으로 삭제하겠냐는 질문 (확인시 1, 취소시 0)

1이 표시되면 ok

ok면 deleteDoc로 name에 있는 commentId 일치하는 걸 찾아서 doc 삭제

closest('.이름').remove(); 로 dom에서 해당 댓글 삭제

catch로 에러 시 뜨는 문구 출력하면된다.

 

해결하고 보니까 쉬운 코드 같아보이는데, 내가 한게 아니라 이해는 솔직히 잘 되지 않는다.

수업 끝나기 30분전에 해결한 거라서 시간 지나면 이해 되겠지...

개인프로젝트 하면서 CRUD 구현 해야하면 쓸 수도 있는 거라 이해해야한다..

 

내배캠은 사전 캠프때 CRUD 강의를 지급해라...