JS

2024.08.26 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기

정훈5 2024. 8. 26. 09:06

 

디자인 시안 확인

board-list.html

 

게시글이 없는 경우 (비로그인시), 게시글이 는 경우(로그인시)

 

 

header.js

더보기

header

// DOMContentLoaded 이벤트를 사용해 보자.

window.document.addEventListener('DOMContentLoaded', function() {
    // DOM 요소를 가져오기
    const boardMenu = window.document.getElementById('board');    
    const signInMenu = window.document.getElementById('signIn');    
    const signUpMenu = window.document.getElementById('signUp');    
    const authLinks = window.document.getElementById('authLinks');    

    // 로그인 여부 확인
    // F12 눌러서  LocalStorage 에서 user 를 확인할 수 있다.
    const user = localStorage.getItem('user');
    if(user != null) {
        if(authLinks) {
            // 로그인, 회원가입 링크를 로그아웃 링크로 변경
            console.log('authLinks', authLinks);
            authLinks.innerHTML = '<span class="menu-link" id="logoutLink">로그아웃</span>';

            // 로그아웃 클릭 시 처리
            document.getElementById('logoutLink').addEventListener('click', function() {
                localStorage.removeItem('user'); 
                
                // 로그아웃 후 페이지 새로고침 해야 렌더링이 된다.
                window.location.reload(); // 로그아웃 클릭시, 로그인, 회원가입 버튼이 나타난다.
            });
        }
    }

    // 각 메뉴에 클릭 이벤트를 추가 합니다.
    if(boardMenu) {
        boardMenu.addEventListener('click', function() {
            window.location.href = 'board-list.html'; 
        });
    }

    if(signInMenu) {
        signInMenu.addEventListener('click', function() {
            window.location.href = 'sign-in.html'; 
        });
    }

    if(signUpMenu) {
        signUpMenu.addEventListener('click', function() {
            window.location.href = 'sign-up.html'; 
        });
    }

});

 

사전기반 지식

자바스크립트의 if문 조건식의 평가 방식

자바 스크립트 "truthy"와 "falsy” 

if (조건) {
    // 조건이 true일 때 실행되는 코드
}
자바스크립트에서 if 문 안에 들어가는 조건식은 Boolean 값으로 평가됩니다. 
즉, 조건식이 true로 평가되면 코드 블록이 실행되고, false로 평가되면 실행되지 않습니다.

 

다음은 자바스크립트에서 거짓(false)으로 평가되는 "falsy" 값 

false: Boolean 값 false
0: 숫자 0
"": 빈 문자열 (길이가 0인 문자열)
null: 값이 없음을 나타내는 값
undefined: 정의되지 않은 상태를 나타내는 값
NaN: 숫자가 아님을 나타내는 값 (Not-a-Number)

if (0) {
    // 이 코드는 실행되지 않습니다. (0은 falsy 값이므로)
}

 

 

위에 나열된 "falsy" 값들을 제외한 모든 값은 "truthy" 값으로 간주됩니다.

즉, if 문에서 참(true)으로 평가됩니다.

true
1, -1, 또는 다른 모든 숫자
"hello"와 같은 길이가 1 이상인 문자열
객체 ({}, [] 등)

if ("둘리") {
    // 이 코드는 실행됩니다. ("둘리"는 truthy 값이므로)
}

if (1) {
    // 이 코드는 실행됩니다. ("둘리"는 truthy 값이므로)
}

if (-1) {
    // 이 코드는 실행됩니다. ("둘리"는 truthy 값이므로)
}

 

board-list.html

더보기

board-list

<!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="board-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="nul">1</span>
            </div>
            <span class="right">▶</span>
          </div>

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

    <script src="../js/header.js"></script>
    <script src="../js/boardList.js"></script>
  </body>
</html>

 

 

boardList.css

더보기

boardList.css

.content-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
}

.board-box {
    display: flex;
    flex-direction: column;
}

.head, 
.board {
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

/* 제목, content 공각 영역 맞추기  */
.head-1, 
.board-1 {
    /* flex 속성 (고정 너비) */
    flex: 0 0 80px;
}

.head-2,
.board-2 {
    /* 가변 너비 */
    flex: 1;  
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.head-3,
.board-3,
.head-4,
.board-4,
.head-5, 
.board-5
{
    /* 고정 너비 */
    flex: 0 0 100px;
}

/* 하단 영역 */
.button-box{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
} 

.page-box {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.write-button-box {
    display: flex;
    justify-content: flex-end;
}

 

boardList.js

더보기

boardList

// 샘플 데이터 입력
const sampleBoardList = [
  {
    id: 1,
    title: "첫번째 게시글",
    content: "첫번째 게시글에 내용 입니다.",
    username: "홍길동",
    today: "2024.08.25",
    count: 5,
  },
  {
    id: 2,
    title: "두번째 게시글",
    content: "두번째 게시글에 내용 입니다.",
    username: "이몽룡",
    today: "2024.08.25",
    count: 5,
  },
  {
    id: 3,
    title: "세번째 게시글",
    content: "세번째 게시글에 내용 입니다.",
    username: "성춘향",
    today: "2024.08.25",
    count: 14,
  },
  {
    id: 4,
    title: "네번째 게시글",
    content: "네번째 게시글에 내용 입니다.",
    username: "변학도",
    today: "2024.08.25",
    count: 21,
  },
  {
    id: 5,
    title: "다번째 게시글",
    content: "다번째 게시글에 내용 입니다.",
    username: "심청",
    today: "2024.08.25",
    count: 51,
  },
];
// localStorage.setItem('boardList', JSON.stringify(sampleBoardList));

document.addEventListener("DOMContentLoaded", function () {
  // DOM 접근
  const boardContainer = document.querySelector(".board-content-box"); // 컨텐트를 넣을 Element 선택
  const writeButton = document.querySelector(".btn"); // 글쓰기 버튼 Element 선택
  const paginationContainer = document.querySelector(".num-box");

  // 로컬 스토리지에서 게시글 목록 가져오기
  const storedBoardList = JSON.parse(localStorage.getItem("boardList"));
  // 게시글 목록을 내림차수능로 정렬하기
  if (storedBoardList) {
    storedBoardList.reverse();
  }

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

  loadPosts(currentPage);

  // 게시글을 로드 하는 함수
  function loadPosts(page) {
    const offset = page * limit;
    const end = offset + limit;

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

    // 방어적 코드 작성
    if (storedBoardList != null && storedBoardList.length > 0) {
      // 반복문을 사용 ()
      for (let i = offset; i < end && i < storedBoardList.length; i++) {
        postElements += `<div class="board" data-id=${storedBoardList[i].id}>
                <div class="board-1">${i + 1}</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>`;
    }
    
    paginationContainer.innerHTML = paginationHTML;

    // 생성된 페이지 번호의 요소 접근 (동적 할당)
    const pageNumbers = 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);
            // 해당하는 번호를 가지고 와서 다시 렌더링 
            const targetPageNumber =  parseInt(event.target.dataset.page); // 문자열 --> number 변환 
            loadPosts(targetPageNumber);
        })
    }); 

    // 글쓰기 버튼 눌렀을 경우 -> 글쓰기 페이지 이동 처리 
    writeButton.onclick = function() {
        location.href = "board-write.html";
    }

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

  }
});

 

'JS' 카테고리의 다른 글

2024.08.27 JavaScript 게시판 만들기 JavaScript boardWrite.js 글 쓰기 기능 만들기  (0) 2024.08.27
2024.08.27 JavaScript 게시판 만들기 JavaScript board-list 기능 만들기 -2  (0) 2024.08.27
2024.08.22 JavaScript 게시판 만들기 JavaScript 로그인 기능 만들기  (0) 2024.08.22
2024.08.21 JavaScript 게시판 만들기 JavaScript 회원 가입 만들기  (0) 2024.08.21
2024.08.21 JavaScript 게시판 만들기 프로젝트 뼈대 만들기  (0) 2024.08.21

'JS'의 다른글

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

관련글

티스토리툴바