[Node.js_4기] Today_I_Learn : Project_3 (23/12/26)

목차

 

1. 문제

2. 시도

3. 결과

4. 배운점

 

1. 문제 

 

특정 id를 기준으로, 해당 id를 가진 firebase db의 document 내용을 수정하는 기능을 구현.

 

 

2. 시도 

 

Edit 버튼을 만들고, 해당 버튼을 누르면 Edit할 ID, URL, Name, Role, Content, TMI, MBTI, URL을 작성하는 창이 보여지고, 원래 사이트의 화면이 어두워진다.

이후, 내용을 모두 입력하고 Save 버튼을 누르면 저장 성공시 저장 완료 alert가, 실패시 error alert가 발생한다.

 

3. 결과 

 

모달 구현 은 다음과 같이 할 수 있다.

<div>
      <!-- Modal trigger button -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal">
        Edit
      </button>

      <!-- modal -->
      <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Edit Team Member</h5>
            </div>
            <div class="modal-body">
              <!-- Modal content -->
              <div>
                <div class="box" id="update_box">
                  <div class="form-group">
                    <label for="update_image">ID_to_Edit</label>
                    <input type="text" class="form-control" id="update_id" placeholder="ID">
                  </div>
                  <div class="form-group">
                    <label for="update_image">Image URL:</label>
                    <input type="text" class="form-control" id="update_image" placeholder="Image URL">
                  </div>
                  <div class="form-group">
                    <label for="update_name">Name:</label>
                    <input type="text" class="form-control" id="update_name" placeholder="Name">
                  </div>
                  <div class="form-group">
                    <label for="update_role">Role:</label>
                    <input type="text" class="form-control" id="update_role" placeholder="Role">
                  </div>
                  <div class="form-group">
                    <label for="update_content">Content:</label>
                    <textarea class="form-control" id="update_content" placeholder="Content"></textarea>
                    <div class="form-group">
                      <label for="update_tmi">TMI:</label>
                      <input type="text" class="form-control" id="update_tmi" placeholder="TMI">
                    </div>
                    <div class="form-group">
                      <label for="update_mbti">MBTI:</label>
                      <input type="text" class="form-control" id="update_mbti" placeholder="MBTI">
                    </div>
                    <div class="form-group">
                      <label for="update_url">URL:</label>
                      <input type="text" class="form-control" id="update_url" placeholder="URL">
                    </div>
                    <div class="control">
                      <button id="updatebtn" type="button" class="btn btn-primary">Save</button>
                      <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </div>
    </div>

gpt에게 물어본 결과 위와 같은 코드가 생성되었다.

부트 스트랩에서 비슷한 내용을 찾아볼 수 있었다.

 

이제 js파일을 뜯어보자.

Edit 버튼을 눌러 db의 데이터를 수정하는 코드는 다음과 같다.

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { doc, getDoc ,updateDoc} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
//비밀//
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

$("#updatebtn").click(async function () {
  let newid = $('#update_box #update_id').val();
  let newimage = $('#update_box #update_image').val();
  let newname = $('#update_box #update_name').val();
  let newrole = $('#update_box #update_role').val();
  let newcontent = $('#update_box #update_content').val();
  let newmbti = $('#update_box #update_mbti').val();
  let newtmi = $('#update_box #update_tmi').val();
  let newurl = $('#update_box #update_url').val();

  let newdoc = {
    image: newimage,
    name: newname,
    role: newrole,
    content: newcontent,
    mbti: newmbti,
    tmi: newtmi,
    url: newurl
  };

  try {
    // Assuming "test" is the collection name and "1" is the document ID, adjust accordingly
    const updateDocRef = doc(db, "team", newid);
    await updateDoc(updateDocRef, newdoc);
    alert("Update complete");
    window.location.reload();
  } catch (error) {
    console.error("Error updating document: ", error);
    alert("Error updating document. Please try again.");
  }
});

html의 모달 부분의 input에서 값을 받아 그 값들을 새로운 doc으로 만들고, 해당 doc을 설정된 id를 가진 document에 update해주는 코드이다.

 

평이한 코드지만, 좀 더 개선할 부분이 있을것 같다.

예를 들어, 특정한 id를 입력하는게 아니라 1p, 2p, 3p, 4p라 적힌 버튼을 누르고 edit 버튼을 누르면 해당 버튼 id(1,2,3,4)를 자동으로 받아 newid부분에 넣어준다던가 하는 방식 말이다.

 

4. 배운점 

 

모달을 사용하는 방법과, updatDoc 함수의 사용법을 알 수 있었습니다.

아마 내일은 원래 내용을 modal의 input 부분에 미리 넣어놓아 빈칸을 모두 채워야 제대로 업데이트 되는 지금 버전의 코드를 수정할 예정입니다.

 

 

++ 오늘 TIL 쓰는 방법 특강을 받기는 했지만, 아직까진 이런 허접한 TIL밖에는 작성하지 못하겠습니다.

프로젝트 주간이라 배움 보다는 찾고 고치고 시도 해보는 시간이 많아서 그런걸까 싶습니다.