본문 바로가기
TIL

TIL - Git의 필요성과 prepend()를 사용하면서 생긴 문제 발견과 해결

RRWW 2024. 4. 18. 21:03

Git의 필요성

오늘은 내일까지인 팀 프로젝트 간단한 팀 소개 웹페이지에서 팀원들과 그동안 만들었던 기능들을 합치는 작업과
어제 todo list를 만들면서 팀 소개 웹페이지에 들어갈 방명록 중에 개선해야 할 점들을 개선했다. 

git을 아직 익숙하지 않아서 github에 직접 파일을 업로드하고 수정하면서 협업을 진행했었는데 

오늘 기능들을 합치는 과정에서 그동안 개선했던 코드들과 기존에 있던 코드를 수정하지 못해서 부분으로 에러가 발생되었다.

 

처음에는 간단했지만 계속 수정 작업을 하다 보니 실수가 발생했고 이러한 문제점의 해결 방안이 Git이라는 것을 알고 있었지만 몸으로 직접 겪어보니 git을 이용해서 소프트웨어의 변경사항을 체계적으로 추적하고 통제했으면 이러한 오류들이 발생되지 않았을 것이다

 

그리고 이전에는 발생하지 않았는데 무언가를 수정하면서 발생한 에러 때문에 기존의 코드와 비교를 해야 했었는데 github에 history에 과거에 작성한 코드를 보고 비교하면서 에러를 좀 더 수월하게 해결했던 것 같고 git으로도 log를 통해 diff로 코드 변경 확인이 가능하고 reset으로 돌아가는 기능이 있다는 걸 배웠고 새로 프로젝트를 만들어서 github에 git을 연습해야 할 필요성을 팀원들과 코드를 수정 병합하면서 느꼈다.

 

 

prepend()를 사용하면서 생긴 문제 발견과 해결

문제 1

// 방명록 폼 제출 이벤트 핸들러
document.getElementById("guestbook-form").addEventListener("submit", async (event) => {
    event.preventDefault(); // 폼 제출 방지
    // 입력된 값 가져오기
    const name = document.getElementById("name").value;
    const message = document.getElementById("message").value;
    const password = document.getElementById("password").value;
    try {
        // Firestore에 데이터 추가
        await addDoc(collection(db, "guestbook"), { // (2)
            name: name,
            message: message,
            password: password,
            timestamp: Number(new Date()) // 등록 순으로 정렬하기 위해
        });
        window.alert("등록 성공");
        // 페이지 새로고침
        window.location.reload();  // (1)
    } catch (error) {
        // 오류 메시지 표시
        console.error("Error adding document: ", error);
        window.alert("방명록을 제출하는 동안 오류가 발생했습니다.");
    }
});

 

문제점

  • 기존의 코드에서 병합하는 과정에서 테스트할 때 제출을 할 때마다 페이지가 새로고침으로 불편함

해결방안

  •  Todo List를 만들 때처럼 기존에 만들었던 displayGuestbookEntry();로 화면에 바로 표시

 

해결방안에서 생긴 문제

  •  화면에 바로 표시가 되면서 비동기 실행으로 인해 페이지가 먼저 표시되고(=displayGuestbookEntry()) 나서 firestore에 데이터가 전달(=addDoc)

해결방안에서 생긴 문제 해결방안

  •  (2)에서 const docRef 변수를 선언해서  displayGuestbookEntry( docRef.id, { name, message } ); 부분적으로 docRef에 데이터 추가가 완료 후에 화면에 표시

 

해결 코드 

// 방명록 폼 제출 이벤트 핸들러
document.getElementById("guestbook-form").addEventListener("submit", async (event) => {
    event.preventDefault(); // 폼 제출 방지

    // 입력된 값 가져오기
    const name = document.getElementById("name").value;
    const message = document.getElementById("message").value;
    const password = document.getElementById("password").value;

    try {
        // Firestore에 데이터 추가
        const docRef = await addDoc(collection(db, "guestbook"), {
            name: name,
            message: message,
            password: password,
            // timestamp: Number(new Date()) (1)
        });

        document.getElementById("name").value = "";
        document.getElementById("message").value = "";
        document.getElementById("password").value = "";
        displayGuestbookEntry(docRef.id, { name, message });
    } catch (error) {
        // 오류 메시지 표시
        console.error("Error adding document: ", error.message);
        window.alert("방명록을 제출하는 동안 오류가 발생했습니다.");
    }
});

 

문제 2

// Firebase에서 방명록 항목 가져오기
async function fetchGuestbookEntries() {
    const querySnapshot = await getDocs(
        // query(collection(db, "guestbook"), orderBy("timestamp", "desc")) // (2)
        query(collection(db, "guestbook"))
    );
    for (const doc of querySnapshot.docs) { // 비동기 배열 순회 
        const entry = doc.data();
        displayGuestbookEntry(doc.id, entry);
    }
}

// 방명록 항목을 화면에 표시
function displayGuestbookEntry(docId, entry) {
    const guestbookEntriesDiv = document.getElementById("guestbook-entries");
    const entryDiv = document.createElement("div");
    entryDiv.classList.add("guestbook-entry");
    entryDiv.innerHTML = `          
     <div class="guestbook-container">  
       <div class="nameMessage">
         <p class="userName"><strong>${entry.name}</strong><br></p>
         <p class="userMessage">${entry.message}</p>
       </div>
       <div class="buttons">
         <button class="edit-btn" data-doc-id="${docId}">수정</button>
         <button class="delete-btn" data-doc-id="${docId}">삭제</button>
       </div>
     </div>  
     `;
    // guestbookEntriesDiv.appendChild(entryDiv);
    guestbookEntriesDiv.prepend(entryDiv);
}

 

문제점

  • 새로고침을 하지 않고 바로 화면에 표시로 인해 appendChild()가 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙는 역할을 해서 방명록이 등록되면 가장 밑에부터 표시

해결방안

  •  Todo List에서도 사용한 요소. prepend("매개변수")를 활용하면 매개변수 앞에 요소를 추가해서 쉽게 해결 

 

prepend를 사용해서 화면에 표시된 방명록이 가장 최근 방명록부터 위쪽으로 표시되는 걸 확인 후에 (1)에 있는 timestamp: Number(new Date())와 (2)에 있는 orderBy()를 지우고 나서 새로고침을 해보니 생각해 보니 화면에만 표시되고 firestore 안에 저장된 데이터 정렬이 되지 않아서 순서가 안 맞는 문제가 생겼고 timestamp: Number(new Date())와 (2)에 있는 orderBy()의 역할이 다시 필요하다고 느꼈고 이전에 만든 Todo List도 잘못된 코드라는 걸 알아차림  

 

즉 prepend를 사용한 Todo List에도 똑같은 문제가 있는 걸 찾았고 왜 순서가 바뀌었는가 찾아보니 문제는 firestore에 저장된 데이터들의 순서를 orderBy와 timestamp: Number(new Date())로 정렬해 주었던 것을 지워서 그랬던 것이다. 
그렇게 다시 orderBy와 timestamp: Number(new Date()) 작성했는데 아래의 사진처럼 문제가 생겼다.

 

새로고침 전 방명록
새로고침 후 방명록

문제점

  • prepend를 이용해서 등록된 방명록은 최신순으로 가장 위에부터 표시되는데 새로고침을 하면 아래와 같이 오래된 순으로 바뀌는 문제가 발생

해결방안

  • Orderby("timestamp", "desc")는 내림차 순이고 firestore에 저장된 timestamp값도 테스트 3 > 테스트 2> 테스트 1의 크기였다 가장 앞에 추가해 주는 prepend와 내림차 순으로 정렬되는 Orderby("timestamp", "desc")가 같이 사용되어서 마치 음수 곱하기 음수는 양수가 나오는 결과가 도출된 것 같았다. 그래서 코드를 Orderby("timestamp", "asc")로 바꿔서 문제를 해결했다. 
  • appendChild()로 새로운 요소를 가장 뒤에 추가하는 방법을 사용하지 않은 이유는 데이터가 추가될 때 새로고침이 아닌 바로 페이지에 표시가 되었고 내가 원한 것은 페이지에 최신으로 등록된 방명록이 가장 위에 표시되는 것을 원해서 prepend()와 Orderby("", "desc")를 이용했다.

 

해결 코드

// 방명록 폼 제출 이벤트 핸들러
document.getElementById("guestbook-form").addEventListener("submit", async (event) => {
    event.preventDefault(); // 폼 제출 방지

    // 입력된 값 가져오기
    const name = document.getElementById("name").value;
    const message = document.getElementById("message").value;
    const password = document.getElementById("password").value;

    try {
        // Firestore에 데이터 추가
        const docRef = await addDoc(collection(db, "guestbook"), {
            name: name,
            message: message,
            password: password,
            timestamp: Number(new Date()) // 등록 순으로 정렬하기 위해
        });

        document.getElementById("name").value = "";
        document.getElementById("message").value = "";
        document.getElementById("password").value = "";
        displayGuestbookEntry(docRef.id, { name, message });
    } catch (error) {
        // 오류 메시지 표시
        console.error("Error adding document: ", error.message);
        window.alert("방명록을 제출하는 동안 오류가 발생했습니다.");
    }
});

// Firebase에서 방명록 항목 가져오기
async function fetchGuestbookEntries() {
    const querySnapshot = await getDocs(
        query(collection(db, "guestbook"), orderBy("timestamp", "asc"))
    );
    for (const doc of querySnapshot.docs) { // 비동기 배열 순회 
        const entry = doc.data();
        displayGuestbookEntry(doc.id, entry);
    }
}

// 방명록 항목을 화면에 표시
function displayGuestbookEntry(docId, entry) {
    const guestbookEntriesDiv = document.getElementById("guestbook-entries");
    const entryDiv = document.createElement("div");
    entryDiv.classList.add("guestbook-entry");
    entryDiv.innerHTML = `          
     <div class="guestbook-container">  
       <div class="nameMessage">
         <p class="userName"><strong>${entry.name}</strong><br></p>
         <p class="userMessage">${entry.message}</p>
       </div>
       <div class="buttons">
         <button class="edit-btn" data-doc-id="${docId}">수정</button>
         <button class="delete-btn" data-doc-id="${docId}">삭제</button>
       </div>
     </div>  
     `;
    guestbookEntriesDiv.prepend(entryDiv);
}

r

결론

  • 문제점들을 해결하면서 오름차순으로 표시되는 기능과 오름차순으로 정렬하는 기능을 같이 쓰면 내림차순으로 표시될 수 있으니 이런 것들을 생각을 하면서  코딩을 해야겠다고 배웠다.
  • 통상적으로 방명록이나 댓글 기능은 오래된 것이 가장 위에 표시되는 것이 보통인데 나는 반대로 기능을 구현했다는 것을 깨달았고 Orderby("매개변수", "asc")에서 asc와 desc로 최신순 오래된 순으로 버튼을 눌러서 방명록의 정렬 기준을 바꾸도록 하는 기능이 있으면 좋겠다고 생각해서 추가해 주었다.
// 등록순서 버튼 클릭 이벤트 처리
$("#toggle-order-btn").click(async function () {
    // 버튼 텍스트에 따라 정렬 방향 결정
    const orderDirection = $(this).text() === "최신순" ? "desc" : "asc";
    
    $("#guestbook-entries").empty();
    // 방명록 항목 다시 로드
    await fetchGuestbookEntries(orderDirection);
    
    // 버튼 텍스트 변경
    $(this).text($(this).text() === "최신순" ? "오래된순" : "최신순");
});

// Firebase에서 방명록 항목 가져오기
async function fetchGuestbookEntries(orderDirection) {
    const querySnapshot = await getDocs(
        query(collection(db, "guestbook"), orderBy("timestamp", orderDirection))
    );
    for (const doc of querySnapshot.docs) { // 비동기 배열 순회 
        const entry = doc.data();
        displayGuestbookEntry(doc.id, entry);
    }
}

'TIL' 카테고리의 다른 글

TIL - 블로그 만들기 모달창 구현 및 블로그 글 목록 선입선출로 만들기 (2)  (0) 2024.04.21
TIL - JS와 Firestore 이용해서 블로그 만들기 - 탭 전환 (1)  (0) 2024.04.19
TIL - 간단한 Todo list 만들어서 CRUD기능 구현  (0) 2024.04.17
TIL - 방명록 만들기로 CRUD 구현  (0) 2024.04.16
TIL - firebase와 JS를 이용해서 방명록 구현  (0) 2024.04.15

'TIL' Related Articles

티스토리툴바