개발공부일지
Javascript - 게시판 만들기 2 본문
목차
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. 결과
★ 오늘의 포인트와 남겨두기 ★
※ 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 |
