패스트캠퍼스 데브캠프 27일차 [JavaScript, Pagination]

Su Min·2024년 6월 26일

JavaScript pagination 패스트캠퍼스 데브캠프

🔗 Vanilla JS로 페이지네이션 구현하기

DATA

패스트캠퍼스 데브캠프

목록 보기

24/68

🔗 Vanilla JS로 페이지네이션 구현하기

📌 완성본 미리보기

DATA

준비물은 VScode와 글 목록으로 만들 데이터 뿐!!!

let data = [
      {
        id: "1",
        date: "2024-06-20",
        title: "취업 준비 특강 공지",
        userName: "manager",
        content:
          "안녕하세요 수강생 여러분! <br/>금일 18시에서 20시까지 취업 준비 특강 진행 예정입니다~ <br/>모두 참여하셔서 여러분의 프론트엔드 개발자 취업 준비에 도움이 되었으면 좋겠습니다.",
      },
      {
        id: "2",
        date: "2024-06-21",
        title: "(화) 퇴실 공지",
        userName: "manager",
        content:
          "화요일이 지나가고 있습니다! 취업특강으로 원하시는 정보를 얻으셨길 바라겠습니다!!<br/>오늘도 너무너무 고생 많으셨습니다~!<br/>공지사항이 많으니 하나씩 꼼꼼히 확인 부탁드리겠습니다.",
      },
      {
        id: "3",
        date: "2024-06-22",
        title: "(수) 입실 공지",
        userName: "manager",
        content:
          "수요일 아침이 밝았습니다!!! 작일 취업특강으로 원하시는 정보를 얻으셨을까요??<br/>오늘도 빠이팅입니다~ 좋은 하루 되길 바라겠습니다!<br/>공지사항이 많으니 하나씩 꼼꼼히 확인 부탁드리겠습니다.",
      },
      {
        id: "4",
        date: "2024-06-23",
        title: "(수) 퇴실 공지",
        userName: "manager",
        content:
          "안녕하세요 수강생 여러분! 다들 오늘의 공부 열심히 하셨나요?? 열심히하는 모습이 아주 보기 좋습니다!<br/>오늘 하루도 고생하셨습니다!!!",
      },
      {
        id: "5",
        date: "2024-06-24",
        title: "(목) 퇴실 공지",
        userName: "manager",
        content:
          "안녕하세요 여러분@@ 목요일이 지나가고 있습니다! 오늘도 너무너무 고생 많으셨습니다~!<br/>공지사항이 많으니 하나씩 꼼꼼히 확인 부탁드리겠습니다.",
      },
      {
        id: "6",
        date: "2024-06-25",
        title: "(금) 입실 공지",
        userName: "manager",
        content:
          "금요일 아침이 밝았습니다!!! 오늘은 이번주의 끝! 금요일입니다@ 오늘 하루도 좋은 하루 되길 바라겠습니다!<br/>공지사항이 많으니 하나씩 꼼꼼히 확인 부탁드리겠습니다.",
      },
    ]

HTML

    <section>
      <div class="notice-top">
        <h1>공지사항</h1>
      </div>
      <div>
        <ul class="post-list">
          <!-- li 태그 들어갈 예정 -->
        </ul>
        <div class="number-btn-wrapper">
          <!-- 페이지네이션 버튼 들어갈 예정 -->
        </div>
      </div>
    </section>

ul태그 안에는 선언해준 data를 태그로 감싸 넣어 주고, 페이지네이션을 이용할 버튼이 들어갈 예정이라 비워두었다.

CSS

section {
  margin: auto 0;
  width: 600px;
  height: 750px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.notice-top {
  display: flex;
  justify-content: center;
}
.post-list {
  align-items: center;
  padding: 0 20px;
}
.post-list li {
  list-style-type: none;
}
.post-container {
  height: 170px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 10px;
}
.post-list .post {
  display: flex;
  flex-direction: column;
}
.post-list .post-top,
.post-list .post-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.post-number {
  font-size: 15px;
  padding: 15px;
}
.number-btn-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.number-btn-wrapper span {
  display: block;
  margin: 0 10px;
  cursor: pointer;
}

CSS는 시각적으로 보았을때 필요한 부분만 작성해두었다.
하다보니 조금 길어지긴 했다..😅

🔗 JavaScript

페이지네이션 버튼 생성

	// 한페이지에 들어갈 리스트 수
    const COUNT_PAGE = 3 
     
	// 데이터 길이에 맞게 페이지 수
    const getTotalPage = Math.ceil(data.length / COUNT_PAGE)
    
    // 페이지네이션 버튼 생성 및 클릭 이벤트
    const setPageButtons = () => {
      const numberBtnWrapper = document.querySelector(".number-btn-wrapper")
      if (numberBtnWrapper != null) {
        numberBtnWrapper.innerHTML = ""
        for (let i = 1; i <= getTotalPage; i++) {
          numberBtnWrapper.innerHTML += `<span class="number-btn">${i}</span>`
        }
        const pageNumberBtn = document.querySelectorAll(".number-btn")
        pageNumberBtn.forEach((btnItem) => {
          btnItem.addEventListener("click", () => {
            getPost(btnItem.textContent, data)
          })
        })
      }
    }
    setPageButtons()

한 페이지 당 리스트 수와 페이지 수를 선언해주고 페이지네이션의 역할을 해줄 요소를 반복문을 통해 생성해준다. 생성된 요소에 이벤트핸들러를 적용하여 버튼의 내용! 바로 "1", "2" 같은 내용과 데이터를 매개변수로 전달해준다.

리스트 생성

	// 리스트의 부모요소 ul태그 선언
    const ul = document.querySelector(".post-list")
    
    // 페이지 번호에 맞는 데이터 불러오기
    const getPost = (pageNum, data) => {
      ul.innerHTML = "" // ul의 내용 초기화
      const start = (pageNum - 1) * COUNT_PAGE
      const end = pageNum * COUNT_PAGE
      const postData = data.slice(start, end)
      for (let i = 0; i < postData.length; i++) {
        ul.innerHTML += `
          <li>
            <div class="post-container">
              <p class="post-number">${postData[i].id}</p>
              <div class="post">
                <div class="post-top">
                  <p class="post-title">${postData[i].title}</p>
                  <p class="post-date">${postData[i].date}</p>
                </div>
                <div class="post-mid">
                  <p class="post-content">${postData[i].content}</p>
                </div>
                <div class="post-bottom">
                <p class="userName">${postData[i].userName}</p>
                </div>
              </div>
            </div>
          </li>
          `
      }
    }
    getPost(1, data) // 페이지 초기값 1 매개변수로 전달