Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

개발공부일지

Javascript - 게시판 만들기 2 본문

Javascript

Javascript - 게시판 만들기 2

보람- 2023. 7. 25. 16:00

목차

 

1. html에서 board 페이지 만들고 home 게시글 눌렀을 때 이동 & 댓글칸 만들기, css, js

2. js로 작성한 게시글 내용 보여주기 (추천수, 조회수, 댓글까지)

3. 결과

 

 

1. html에서 board 페이지 만들고 home 게시글 눌렀을 때 이동 & 댓글칸 만들기, css, js

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="public/index.css" />
  </head>
  <body>
    <div id="root">
      <div>
        <div class="header">
          <h1 id="title"></h1>
          <div>
            <div class="flex-box">
              <h3 id="user"></h3>
              <button id="likes"></button>
              <div id="views"></div>
            </div>
            <div id="created-at"></div>
          </div>
        </div>
        <p id="text"></p>
      </div>
      <div>
        <div>
          <ul id="list"></ul>
        </div>
        <div>
          <input type="text" id="comment" placeholder="comment" />
          <input type="text" id="comment-user" placeholder="user" />
          <button id="add-comment">Add Comment</button>
        </div>
      </div>
    </div>
    <script src="public/index.js"></script>
  </body>
</html>

- create에서 작성한 게시글이 보여지는 화면 만들기

- 제목, 유저이름, 좋아요 수, 조회수, 날짜, 내용, 댓글에 버튼까지 만들어주기

 

.header {
  display: flex;
  justify-content: space-between;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

- 제목을 맨 왼쪽에 두고, 날짜를 제외한 나머지를 같은 class로 묶어서 flex 주기

 

for (let i = 0; i < list.numbers.length; ++i) {
  const tr = document.createElement("tr");
  thList.forEach((item) => {
    const td = document.createElement("td");

    if (item == "createdAts")
      td.innerHTML = new Date(+list[item][i]).toLocaleString();
    else if (item == "titles") {
      const aElem = document.createElement("a");
      aElem.innerHTML = list[item][i];
      aElem.href = `./board/?idx=${i}`;
      td.classList.add("title");
      td.append(aElem);
    } else td.innerHTML = list[item][i];
    tr.append(td);
  });
  listElem.append(tr);
}

-  기존 index.js에서 title을 눌렀을 때 게시글이 보이게 하려고 a태그 만들어서 묶어주기

 

 

 

 

2. js로 작성한 게시글 내용 보여주기 (추천수, 조회수, 댓글까지)

console.log(location.search.split("=")[1]);

const splitStr = "/,/,/,";

const numbers = localStorage.getItem("numbers")?.split(splitStr) || [];
const titles = localStorage.getItem("titles")?.split(splitStr) || [];
const users = localStorage.getItem("users")?.split(splitStr) || [];
const texts = localStorage.getItem("texts")?.split(splitStr) || [];
const createdAts = localStorage.getItem("createdAts")?.split(splitStr) || [];
const views = localStorage.getItem("views")?.split(splitStr) || [];
const likes = localStorage.getItem("likes")?.split(splitStr) || [];
const comments = JSON.parse(localStorage.getItem("comments"));

const idx = location.search.split("=")[1];
console.log(numbers[idx]);
console.log(titles[idx]);
console.log(users[idx]);
console.log(createdAts[idx]);
console.log(views[idx]);
console.log(likes[idx]);
console.log(comments[idx]);

document.getElementsByTagName("title")[0].innerHTML = titles[idx];

document.getElementById("title").innerHTML = titles[idx];
document.getElementById("user").innerHTML = users[idx];
document.getElementById("text").innerText = texts[idx];
document.getElementById("title").innerHTML = titles[idx];
document.getElementById("created-at").innerHTML 
 = new Date(+createdAts[idx]).toLocaleString();

views[idx] = +views[idx] + 1;
localStorage.setItem("views", views.join(splitStr));
document.getElementById("views").innerHTML = `조회수 : ${views[idx]}`;

document.getElementById("likes").innerHTML = `좋아요 : ${likes[idx]}`;
document.getElementById("likes").onclick = () => {
  likes[idx] = +likes[idx] + 1;
  localStorage.setItem("likes", likes.join(splitStr));
  document.getElementById("likes").innerHTML = `좋아요 : ${likes[idx]}`;
};

const commentsElem = document.getElementById("list");
function setComments() {
  commentsElem.innerHTML = "";
  comments[idx].forEach((item) => {
    const li = document.createElement("li");
    li.innerHTML = `${item.comment} - ${item.user}`;
    commentsElem.append(li);
  });
}
setComments();

document.getElementById("add-comment").onclick = () => {
  comments[idx].push({
    user: document.getElementById("comment-user").value,
    comment: document.getElementById("comment").value,
  });
  localStorage.setItem("comments", JSON.stringify(comments));
  location.reload();
};

- 로컬스토리지에 저장하고 idx를 location.search.split 해주기

- 좋아요 수는 '좋아요' 버튼에 onclick 이벤트로 눌렀을때마다 1씩 증가

- 댓글칸은 'Add Comment' 버튼에 onclick 이벤트로 댓글 내용과 유저이름이 ul 속 li로 나타나게 하기

- 직접 만들어 보면서 공부하기!!

 

 

 

 

3. 결과

home에서 새로운 게시글 생성
2번째 게시글을 눌러 이동했을 때
댓글을 달았을 때

 

 

★ 오늘의 포인트와 남겨두기 ★

 

※ MPA (Multiple Page Application) : 여러개의 페이지로 구성된 어플리케이션

※ SPA (Single Page Application) : 한개의 페이지로 구성된 어플리케이션

 

※ JSON : 배열, 객체를 스트링화 해주는 

    - JSON.stringify()

    - JSON.parse()

    ▼ 참고하기

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

 

JSON으로 작업하기 - Web 개발 학습하기 | MDN

JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다(서버에서

developer.mozilla.org

※ 프로그래밍 : 설계 → 구현 → 테스트

 

※ 게시판 만들기로 설계하고 구현하고 테스트하는 흐름을 배웠다.

    직접 구현하며 테스트할 수 있게 흐름을 그려보기!!!

 

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

** 목표에 대해 생각하자!!!!!

* 만들고 싶은것의 흐름을 생각해보기

저작자표시

'Javascript' 카테고리의 다른 글

Javascript - function, this  (0) 2023.08.03
Javascript - 참조타입, 얕은 복사, 깊은 복사, 메모리 주소  (0) 2023.08.03
Javascript - 게시판 만들기 1  (0) 2023.07.24
Javascript - 정규표현식 (Regular Expression)  (0) 2023.07.21
Javascript - 정렬 알고리즘 기초 (Bubble, Insert, Select) / swap  (0) 2023.07.20
'Javascript' Related Articles more