JS

2024.08.27 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 -2

정훈5 2024. 8. 27. 09:55

 

board-list.html

더보기

board-list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 목록</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/boardList.css">
</head>
<body>
        <!-- 헤더 세션과 네비 영역-->
         <header>
            <nav class="nav-container">

                <div class="nav-item">
                    <span class="menu-link" id="board">게시판</span>
                </div>
                
                <div class="nav-item" id="authLinks">
                    <span class="menu-link" id="signIn">로그인</span>
                    <span class="menu-link" id="signUp">회원가입</span>
                </div>

            </nav>
         </header>

         <main class="content-wrapper">

            <section class="title-box">
                <h1>게시글 상세보기 By JS</h1>
            </section>

                <div class="content-box">
                    <div class="head">
                        <div class="head-1">번호</div>
                        <div class="head-2">제목</div>
                        <div class="head-3">작성자</div>
                        <div class="head-4">작성일</div>
                        <div class="head-5">조회수</div>
                    </div>

                    <div class="board-content-box">
                        <!-- 삭제 예정 : js 코드로 반복문을 활용해서 동적으로 컨텐트 만든다. -->

                        <!-- <div class="board">
                            <div class="board-1">1</div>
                            <div class="board-2">후미진 어느 언덕에서 JS</div>
                            <div class="board-3">둘리</div>
                            <div class="board-4">2024.08.26</div>
                            <div class="board-5">11</div>
                        </div> -->
                    </div>


                    <!-- 페이지 영역-->
                     <div class="botton-box">

                        <div class="page-box">

                            <span class="left">◀</span>

                            <div class="num-box">
                                <span class="num">1</span>
                            </div>

                            <span class="right">▶</span>

                        </div>

                        <div class="write-button-box">
                            <button type="button" class="btn">글쓰기</button>
                        </div>
                        
                     </div>
                </div>

         </main>

         <script src="../js/header.js"></script>

         <script src="../js/boardList.js"></script>

</body>
</html>

 

boardList.js

더보기

boardList.js

 

// 샘플 데이터 입력
const sampleBoardList = [
    {
        id: 1,
        title: "첫번째 개시글",
        content: "첫번째 개시글에 내용 입니다.",
        username: "홍길동",
        today: "2024.08.25",
        count: 5
    },

    {
        id: 2,
        title: "두번째 개시글",
        content: "두번째 개시글에 내용 입니다.",
        username: "이몽룡",
        today: "2024.08.25",
        count: 14
    },

    {
        id: 3,
        title: "세번째 개시글",
        content: "세번째 개시글에 내용 입니다.",
        username: "심청",
        today: "2024.08.25",
        count: 11
    },

    {
        id: 4,
        title: "네번째 개시글",
        content: "네번째 개시글에 내용 입니다.",
        username: "도이",
        today: "2024.08.25",
        count: 9
    },

    {
        id: 5,
        title: "다섯번째 개시글",
        content: "다섯번째 개시글에 내용 입니다.",
        username: "김홍도",
        today: "2024.08.25",
        count: 13
    }
];

// 파일이 들어갔는지 확인하고 (F12  눌러서 로컬스토리지에 파일 확인)주석 없으면 주석풀고 실행
// localStorage.setItem('boardList', JSON.stringify(sampleBoardList)); 

document.addEventListener('DOMContentLoaded', function() {
    // DOM 접근

            // <div class="board-content-box">
    const boardContainer = window.document.querySelector('.board-content-box'); // 컨텐트를 넣을 Element 선택
            
            //  <button type="button" class="btn">글쓰기</button>
    const writeButton =  window.document.querySelector('.btn'); // 글쓰기 버튼 Element 선택

            //  <div class="num-box">
    const paginationContainer = window.document.querySelector('.num-box');

    // 로컬 스토리지에서 게시글 목록 가져오기
    const storedBoardList = JSON.parse( window.localStorage.getItem("boardList") );
    console.log("storedBoardList : " + storedBoardList);

    // 게시글 목록을 내림차순으로 정렬하기
    if(storedBoardList) {
        storedBoardList.reverse();
    }


    // 페이징 처리 필요한 변수
    let currentPage = 0;
    const limit = 2; // 한 페이지당 게시글 수

    loadPosts(currentPage);

    
    // 게시글을 로드하는 함수
    function loadPosts(page) {

        const offset = page * limit; // 1 페이지 0, 1  //  2 페이지 2, 3
        const end = offset + limit;

        let postElements = ""; // 게시글 HTML 요소를 저장할 변수

        // 방어적 코드 작성
        if(storedBoardList != null && storedBoardList.length >0) {
            
            // 반복문  : 한 페이지에 2개씩 보여줘야 한다.
            for(let i = offset; i < end && i < storedBoardList.length; i++) {

                postElements += ` <div class="board" data-id=${storedBoardList[i].id}>
                            <div class="board-1">${storedBoardList[i].id}</div>
                            <div class="board-2">${storedBoardList[i].title}</div>
                            <div class="board-3">${storedBoardList[i].username}</div>
                            <div class="board-4">${storedBoardList[i].today}</div>
                            <div class="board-5">${storedBoardList[i].count}</div>
                    </div>`;
            }

            boardContainer.innerHTML = postElements; // 게시글 컨테이너에 HTML 추가

            // 페이지 네이션 생성하기
            createPagination(storedBoardList, page);

        } else {
            // 게시글이 없는 경우 메세지 표시
            boardContainer.innerHTML = '<div class="no-list" style=" text-align:center; margin-top:20px "> 조회된 게시글이 없습니다. </div>'
        }
    }

    // 페이지 네이션 생성함수 만들기
    function createPagination(boardList, currentPage) {

        // 전체 게시글 수, 한 페이지 당 보여질 게시글 수 
        const totalPosts = boardList.length; // 전체 게시글 수
        const totalPages = Math.ceil(totalPosts / limit); // 전체 페이지 수 (소수점 올림 처리)
        
        // 페이지 번호 HTML 저장할 변수
        let paginationHTML = "";

        for(let i=0; i< totalPages; i++) {
            paginationHTML += `<span class="num" data-page="${i}">${i + 1}</span>`; // f12 눌러서 1번 element 복사
        }

        paginationContainer.innerHTML = paginationHTML;

        // 생성된 페이지 번호의 요소 접근 (동적 할당)
        const pageNumbers = window.document.querySelectorAll('.num');

        // 현재 페이지 번호에 스타일 적용
        pageNumbers[currentPage].style.backgroundColor = 'grey';
        pageNumbers[currentPage].style.fontWeight = 600;


        pageNumbers.forEach( (pageNumber)=> {
            pageNumber.addEventListener('click', (event)=> {
                // console.log('event', event);
                // console.log('event.target', event.target);
                // console.log('event.target.dataset', event.target.dataset);
                // console.log('event.target.dataset.page', event.target.dataset.page);
                // 해당하는 번호를 가지고 와서 렌더링 시켜줘야 한다.  렌더링 --> loadPosts()
                const targetPageNumber = parseInt(event.target.dataset.page); // 문자열 --> number 변환
                loadPosts(targetPageNumber);
            });
        });
     
        // 글쓰기 버튼 눌렀을 경우 --> 글쓰기 페이지 이동 처리
        writeButton.onclick = function() {
            location.href = "board-write.html";
        }


        // 해당 row 게시글을 눌렀을 경우 --> 상세보기 화면 이동 처리
        
    }
});

 

사전기반 지식

data-* 속성 및 dataset 개념

1. data-* 속성

 

data-* 속성은 HTML5에서 제공하는 사용자 정의 데이터 속성입니다.

이 속성을 사용하면 HTML 요소에 데이터를 저장할 수 있으며, 이 데이터는 JavaScript로 쉽게 접근할 수 있습니다.

  • data-* 속성의 이름은 반드시 data-로 시작하고, 그 뒤에 사용자 정의 키를 붙일 수 있습니다.
    예를 들어, data-id, data-user, data-index 등이 가능합니다.
<div data-id="123" data-name="둘리1"></div>

 

2. dataset 객체

dataset 객체는 JavaScript에서 HTML 요소의 data- 속성에 접근*할 수 있도록 해주는 특수한 객체입니다.
dataset 객체를 사용하면 data-*로 시작하는 모든 속성에 접근할 수 있으며, 이를 통해 데이터 값을 가져오거나 변경할 수 있습니다.

 

const myDiv = document.getElementById('myDiv');

// data-id 속성에 접근
console.log(myDiv.dataset.id); // 출력: 123

// data-name 속성에 접근
console.log(myDiv.dataset.name); // 출력: 둘리

// data-name 속성의 값을 변경
myDiv.dataset.name = "고길동";
console.log(myDiv.dataset.name); // 출력: 고길동

 

'JS' 카테고리의 다른 글

2024.08.28 JavaScript 게시판 만들기 JavaScript boardWrite.js 글 쓰기  (0) 2024.08.28
2024.08.27 JavaScript 게시판 만들기 JavaScript boardWrite.js 글 쓰기 기능 만들기  (0) 2024.08.27
2024.08.26 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기  (0) 2024.08.26
2024.08.22 JavaScript 게시판 만들기 JavaScript 로그인 기능 만들기  (0) 2024.08.22
2024.08.21 JavaScript 게시판 만들기 JavaScript 회원 가입 만들기  (0) 2024.08.21

'JS'의 다른글

  • 현재글2024.08.27 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 -2

관련글

티스토리툴바