[TIL] Coz’ Mini Hackathon - 오류 수정

저난주에 진행한 Coz’ Mini Hackathon에서 제작한 아고라 스테이츠에 심각한 오류가 있었다. 페이지 네이션을 통해 구현한 페이지 버튼이 서브밋한 html요소를 빼고 페이지를 넘긴다는 것이다.

// Advanced Challenge 페이지네이션
const rowsperPage = 10;
const rows = document.querySelectorAll("li.discussion__container");
const rowsCounts = rows.length;
const pageCounts = Math.ceil(rowsCounts/rowsperPage);
const pageWrapper = document.querySelector(".page__wrapper");

const btnPage = pageWrapper.querySelectorAll("a")
// 페이지 버튼에 이벤트리스너 
btnPage.forEach((item, index) => {
  item.addEventListener('click', (e) => {
    e.preventDefault(); 
    displayRows(index);
  })
})

const displayRows = (index) => {
  let rowsArr = [...rows];
  let start = index * rowsperPage;
  let end = start + rowsperPage;

  for(let rowA of rowsArr) {
    rowA.style.display = 'none';
  }

  let displayRow = rowsArr.slice(start, end);

  for(let displayR of displayRow) {
    displayR.style.display = '';
  }
  for(let css of btnPage) {
    css.classList.remove('active');
  }
  btnPage[index].classList.add('active');
}

위의 코드가 작성했던 페이지네이션 구현이다. 변수 rows에 html 요소들을 할당했다. discussion__container가 달린 요소들은 discussion의 정보를 담은 하나의 discussion들이다.

displayRows의 내부에 선언된 rowsArr은 for...of 문에 사용된다. 모든 요소의 스타일을 조작해 'none'을 부여해 시각적으로 없애고, 버튼 숫자에 해당하는 인덱스의 요소들 10개만 'none'을 제거한다.

아래의 'active'를 제거하고 붙히는 반복문은 버튼이 눌렸을 때, 검은 배경을 유지시킨다.
각 버튼이 눌릴 때, displayRows가 호출된다.

// 페이지네이션 변수 선언
const rowsperPage = 10;
// rows는 더미 데이터의 길이만 필요함으로 제거
const rowsCounts = agoraStatesDiscussions.length;
const pageCounts = Math.ceil(rowsCounts/rowsperPage);
const pageWrapper = document.querySelector(".page__wrapper");

// 페이지 버튼에 이벤트리스너 
btnPage.forEach((item, index) => {
  item.addEventListener('click', (e) => {
    e.preventDefault(); 
    displayRows(index);
  })
})

const displayRows = (index) => {
  let rowsRest = document.querySelectorAll("li.discussion__container");
  let rowsArr = [...rowsRest];
  let start = index * rowsperPage;
  let end = start + rowsperPage;
  console.log(rowsArr);

  for(let rowA of rowsArr) {
    rowA.style.display = 'none';
  }

  let displayRow = rowsArr.slice(start, end);

  for(let displayR of displayRow) {
    displayR.style.display = '';
  }
  for(let css of btnPage) {
    css.classList.remove('active');
  }
  btnPage[index].classList.add('active');
}

꽤 오래 고민하고 콘솔을 많이 찍어봤는데 갈피를 못잡다가 어이없게도 엄청 쉽게 해결했다. rows를 전역에 선언했기 때문에 처음에 페이지가 렌더링 됐을 때의 html 요소만 담겨있었고, 그걸 전개 연산자를 통해 할당한들 추가된 li 요소들이 담기지 않았다.

때문에 rows 변수를 제거하고 바로 agoraStatesDiscussions.length;만 구했다. submit한 disccusion들은 더미데이터 agoraStatesDiscussions에 담기기 때문에 렌더링에 문제가 없다. displayRows에서도 rowsRest를 li 요소들을 할당해주고 그걸 전개연산자로 할당했다.

마무리

전역으로 변수 rows가 선언된 후, submit 된 요소들을 담지 못한다는 걸 몰랐다. 추가된 요소를 담을 때마다 새롭게 재할당하려는 의도였다면 함수안에 선언하는 것이 맞았다. 알고나서 생각하니 당연한 문제였지만 푸는데 5시간이 넘게 들었다. 코드를 내 맘대로 짜는 것이 아니라 컴퓨터가 알아들을 수 있도록 짜야한다. 변수 선언과 시점은 너무나 어렵다. 더 공부가 필요하다.