TIL 2024-04-17

1. 깃을 정리해야겠단 생각으로 레포를 하나 만들어 그 안에 병합하는 법을 공부
   a. 빈 레포에 폴더 업로드

   $ git remote add origin [깃헙 repository주소]
   $ git status
   $ git add .
   $ git commit -m "커밋 로그"
   $ git remote -v
   $ git push origin master(main)

   b. 병합

   git subtree add --prefix=기존리포지토리명 기존리포지토리주소 기존브랜치명

   위의 작업을 하는 도중 특이한 문제가 발생했다.
   
   위의 사진처럼 폴더에 화살표가 생기고 들어가지지가 않는 것이였는데 원인은 상위 폴더에 .git 파일이 생성 되었음에도 불구하고 하위 폴더에 .git이 포함되어 있었기 때문이다.
   해결법은 폴더에서 .git 파일을 삭제 -> 스테이지의 파일 제거 -> add, commit, push 였다.

   git rm --cached . -rf <- 스테이지의 파일 제거 방법

2. 팀에서 진행하는 미니프로젝트의 방명록 섹션에서 Create시에 깜빡거리는 증상이 있는 것을 확인했다.

해당 팀원의 코드를 보고 원인파악 및 문제해결을 진행했다.

• 원인 : 함수를 제대로 이용하지 않아 특정 기능이 실행된 후 window.reload를 몇 군대에 넣어준 것.
• 해결 : 해당 코드들을 리팩토링하여 원인 제거

아래는 리팩토링 된 코드이다.

window.addEventListener("DOMContentLoaded", () => {
  // URL에서 "from" 매개변수 가져오기
  const urlParams = new URLSearchParams(window.location.search);
  const from = urlParams.get("from");

  // 멤버 리스트
  let member = ["박요셉", "이성찬", "박하린", "조민수", "김용", "이효현"];
  // "from" 매개변수로부터 멤버의 인덱스 가져오기
  let memberIndex = member.indexOf(from);

  // 게스트북 함수
  const guestbook = (memberindex) => {
    // 멤버 이름 엘리먼트 찾기
    const memberNameElement = document.getElementById("membername");
    // 멤버 이름 설정
    memberNameElement.innerHTML = member[memberindex];

    // 로컬 스토리지에서 해당 멤버의 응원 데이터 가져오기
    let support =
      JSON.parse(localStorage.getItem(`supportData${memberindex}`)) || [];

    // 게스트북 렌더링 함수
    const renderGuestbook = () => {
      // 게스트북 보드 엘리먼트 찾기
      const board = document.getElementById("guesthistory");
      if (support.length > 0) {
        // 템플릿 초기화
        let template = "";

        // 응원글 데이터 반복하여 템플릿 생성
        support.forEach((item) => {
          template += `<tr>
                        <td>${item.user}</td>
                        <td class='changevalue'>${item.content}</td>
                        <td>
                            <div><img class='removeimg' src="./img/remove.png" alt="remove Image"></div>
                            <div><img class='editimg' src="./img/edit.png" alt="edit Image"></div>
                        </td>
                    </tr>`;
        });
        // 보드에 템플릿 삽입
        board.innerHTML = template;

      } else {
        // 응원글이 없을 때
        const thankyou = `<td id="thankyoutext" style="width:1300px">응원 감사합니다!</td>`;
        board.innerHTML = thankyou;
      }

      // 삭제 버튼 이벤트 리스너 추가
      const removeimg = document.querySelectorAll(".removeimg");
      removeimg.forEach((item, index) => {
        item.addEventListener("click", () => {
          // 클릭된 응원글 삭제 후 로컬 스토리지 업데이트 및 재렌더링
          support.splice(index, 1);
          localStorage.setItem(
            `supportData${memberindex}`,
            JSON.stringify(support)
          );
          renderGuestbook();
        });
      });

      // 수정 버튼 이벤트 리스너 추가
      const editimg = document.querySelectorAll(".editimg");
      editimg.forEach((item, index) => {
        item.addEventListener("click", () => {
          // 수정 영역 생성
          const tr = item.closest("tr");
          let input = tr.querySelector(".changevalue .editinvalue");
          const currentValue = tr.querySelector(".changevalue").innerHTML;
          if (input) {
            return;
          }
          tr.querySelector(".changevalue").innerHTML = `
                      <input class='editinvalue' type="text" value="${currentValue}">
                      <button class='completion'>완료</button>`;
          const completionButton = tr.querySelector(".completion");
          completionButton.addEventListener("click", () => {
            // 수정된 내용 저장 및 로컬 스토리지 업데이트 후 재렌더링
            const input = tr.querySelector(".editinvalue");
            const newValue = input.value;
            support[index].content = newValue;
            localStorage.setItem(
              `supportData${memberindex}`,
              JSON.stringify(support)
            );
            renderGuestbook();
          });
        });
      });
    };

    // 게스트북 렌더링 호출
    renderGuestbook();

    // 응원글 전송 버튼 이벤트 리스너 추가
    const sendInfoButton = document.querySelector(".sendinfo");
    sendInfoButton.addEventListener("click", () => {
      // 새 응원글 데이터 추가 및 로컬 스토리지 업데이트 후 재렌더링
      const nickname = document.getElementById("nickname").value;
      const content = document.getElementById("supporttext").value;
      if (!content) {
        return;
      }
      support.unshift({ user: nickname, content: content });
      localStorage.setItem(
        `supportData${memberindex}`,
        JSON.stringify(support)
      );

      document.getElementById("nickname").value = "";
      document.getElementById("supporttext").value = "";
      renderGuestbook();
    });
  };

  // 멤버 인덱스가 유효한 경우에만 게스트북 호출
  if (memberIndex !== -1) {
    guestbook(memberIndex);
  }
});