개발공부일지
Javascript - 게시판 만들기 1 본문
목차
1. html에서 home 페이지 table 만들기, css
2. js로 tbody 내용 만들고 thead th의 값 넣어주기 (localStorage 활용)
3. html에서 create 페이지 만들기, css
4. js로 등록 버튼 onclick 이벤트 주기 (localStorage 활용)
5. 결과
1. html에서 home 페이지 table 만들기, css
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List</title>
<link rel="stylesheet" href="public/index.css" />
</head>
<body>
<div id="root">
<div>
<a href="./create"><button>Create</button></a>
</div>
<div>
<table>
<colgroup>
<col class="number" />
<col class="title" />
<col class="user" />
<col class="created-at" />
<col class="views" />
<col class="likes" />
</colgroup>
<thead>
<tr>
<th>Num</th>
<th>Title</th>
<th>User</th>
<th>Created At</th>
<th>Views</th>
<th>Likes</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
</div>
</div>
<script src="public/index.js"></script>
</body>
</html>- <a>로 home과 create 를 연결시켜주기
- <colgroup>은 <table>에서 세로로 나열된 항목에 <col class=" ">를 주어 각각 다른 스타일을 적용시켜 줄 수 있음
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
col.number {
width: 5%;
}
col.title {
width: 45%;
}
col.user {
width: 20%;
}
col.created-at {
width: 20%;
}
col.views {
width: 5%;
}
col.likes {
width: 5%;
}
th {
border-bottom: 2px solid black;
}
td {
padding: 0.5rem 1rem;
border-bottom: 1px dashed black;
text-align: center;
}
th,
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
td.title {
text-align: start;
}- table-layout:fixed → 내가 입력한 만큼 layout 고정시키기 위해 작성
- col. 으로 각각의 class이름으로 스타일 줄 수 있음
- 넘치는 내용을 다음줄로 넘기지 않고 줄어든 내용을 ... 으로 표현하기
2. js로 tbody 내용 만들고 thead th의 값 넣어주기 (localStorage 활용)
const temps = [
{
num: 0,
title: "제목1",
user: "김보람",
text: "지금은 안보이는 내용",
createdAt: Date.now(),
views: 0,
likes: 0,
comments: [],
},
{
num: 0,
title: "제목2",
user: "김보람",
text: "지금은 안보이는 내용",
createdAt: Date.now(),
views: 0,
likes: 0,
comments: [],
},
{
num: 3,
title: "제목6",
user: "김보람",
text: "지금은 안보이는 내용",
createdAt: Date.now(),
views: 0,
likes: 0,
comments: [],
},
];
const splitStr = "/,/,/,";
const list = {
numbers: localStorage.getItem("numbers")?.split(splitStr) || [],
titles: localStorage.getItem("titles")?.split(splitStr) || [],
users: localStorage.getItem("users")?.split(splitStr) || [],
createdAts: localStorage.getItem("createdAts")?.split(splitStr) || [],
views: localStorage.getItem("views")?.split(splitStr) || [],
likes: localStorage.getItem("likes")?.split(splitStr) || [],
};
console.log(list);
const listElem = document.getElementById("list");
const thList = ["numbers", "titles", "users", "createdAts", "views", "likes"];
for (let i = 0; i < list.numbers.length; ++i) {
const tr = document.createElement("tr");
thList.forEach((item) => {
const td = document.createElement("td");
if (item == "titles") td.classList.add("title");
if (item == "createdAts")
td.innerHTML = new Date(+list[item][i]).toLocaleString();
else td.innerHTML = list[item][i];
tr.append(td);
});
listElem.append(tr);
}- tbody (id=list) 에 게시글 내용이 들어가게 tr과 td생성해주기
- localStorage.getItem() 에 저장해두기
→ string으로 받기 때문에 key, value를 잘라주기위해 split 적어주기
→ , 대신해서 /,/,/, 을 splitStr 으로 지정
- 다시 입력해보면서 공부하기
3. html에서 create 페이지 만들기, css
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creat Board</title>
<link rel="stylesheet" href="public/index.css" />
</head>
<body>
<div id="root">
<div>
<a href="../"><button>Home</button></a>
</div>
<div>
<div><input type="text" id="title" placeholder="Title" /></div>
<div><input type="text" id="user" placeholder="User" /></div>
<!-- <div><input type="text" id="text" placeholder="Text" /> -->
<div>
<textarea name="text" id="text" placeholder="Text"></textarea>
</div>
<div><button id="add">등록</button></div>
</div>
</div>
<script src="./public/index.js"></script>
</body>
</html>- <a>로 home과 create 를 연결시켜주기
- input으로 사용자에게 title, user, text 입력하게 해주기
- 작성한 내용 home에 게시되도록 등록버튼 만들어주기
input,
textarea {
width: 100%;
}
textarea {
min-height: 10rem;
resize: none;
}
#root div {
margin: 1rem 0;
}
#title {
font-size: 2rem;
}- text를 입력하는칸(textarea)에 최소 높이를 지정해주고, 크기 고정해두기
4. js로 등록 버튼 onclick 이벤트 주기 (localStorage 활용)
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 = localStorage.getItem("comments")?.split(splitStr) || [];
document.getElementById("add").onclick = () => {
if (numbers.length) {
numbers.push(+numbers[numbers.length - 1] + 1);
} else {
numbers.push(1);
}
localStorage.setItem("numbers", numbers.join(splitStr));
// console.log(localStorage.getItem("numbers").split(splitStr));
const title = document.getElementById("title").value;
// console.log(title);
titles.push(title);
localStorage.setItem("titles", titles.join(splitStr));
// console.log(localStorage.getItem("titles").split(splitStr));
const user = document.getElementById("user").value;
// console.log(user);
users.push(user);
localStorage.setItem("users", users.join(splitStr));
// console.log(localStorage.getItem("users").split(splitStr));
const text = document.getElementById("text").value;
// console.log(text);
texts.push(text);
localStorage.setItem("texts", texts.join(splitStr));
// console.log(localStorage.getItem("texts").split(splitStr));
createdAts.push(Date.now());
localStorage.setItem("createdAts", createdAts.join(splitStr));
views.push(0);
localStorage.setItem("views", views.join(splitStr));
likes.push(0);
localStorage.setItem("likes", likes.join(splitStr));
comments.push([]);
localStorage.setItem("comments", comments.join(splitStr));
alert("등록되었습니다.");
window.location.href = "../";
};- 버튼을 눌렀을때 사용자가 입력한 title, user, text가 home table에 등록되게 연결시켜주기
- alert로 등록되었습니다 라는 창이 뜨고 확인을 누르면 home 페이지로 돌아가게하기
5. 결과
★ 오늘의 포인트와 남겨두기 ★
※ 넘치는 내용을 다음줄로 넘기지 않고 줄어든 내용을 ... 으로 표현하기
th,
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
※ CRUD (Create, Read, Update, Delete) - 기본적인 데이터 처리기능
→ 데이터를 생성하고, 데이터를 읽고, 새로운 데이터를 업데이트하고, 데이터를 삭제하는 것
※ 수업시간에 했던 기존 코드도 다시보고 공부하기
더보기
const temps = [
{
num: 0,
title: "제목1",
user: "김보람",
text: "지금은 안보이는 내용",
createdAt: Date.now(),
views: 0,
likes: 0,
comments: [],
},
{
num: 0,
title: "제목2",
user: "김보람",
text: "지금은 안보이는 내용",
createdAt: Date.now(),
views: 0,
likes: 0,
comments: [],
},
{
num: 3,
title: "제목6",
user: "김보람",
text: "지금은 안보이는 내용",
createdAt: Date.now(),
views: 0,
likes: 0,
comments: [],
},
];
localStorage.setItem("list", temps);
console.log(localStorage.getItem("list"));
localStorage.clear();
localStorage.setItem("numbers", [1, 2].join(splitStr));
localStorage.setItem("titles", ["확인중", "확인중"].join(splitStr));
localStorage.setItem("users", ["김보람", "확인중"].join(splitStr));
localStorage.setItem("texts", ["내용 확인중"].join(splitStr));
localStorage.setItem("createdAts", [Date.now(), Date.now()].join(splitStr));
localStorage.setItem("views", [0, 0].join(splitStr));
localStorage.setItem("likes", [0, 0].join(splitStr));
localStorage.setItem("comments", [[], []].join(splitStr));
console.log(localStorage.getItem("list"));
const numbers = localStorage.getItem("numbers");
const titles = localStorage.getItem("titles");
const users = localStorage.getItem("users");
// const texts = localStorage.getItem("texts");
const createdAts = localStorage.getItem("createdAts");
const views = localStorage.getItem("views");
const likes = localStorage.getItem("likes");
// const comments = localStorage.getItem("comments");
console.log(localStorage.getItem("numbers"));
const thList = ["num", "title", "user", "createdAt", "views", "likes"];
// 1번 방법이 있고
for (let j = 0; j < temps.length; ++j) {
const tr = document.createElement("tr");
for (let i = 0; i < thList.length; ++i) {
const td = document.createElement("td");
tr.append(td);
td.innerHTML = temps[j][thList[i]];
}
listElem.append(tr);
}
// 2번 방법이 있음
temps.forEach((item) => {
const tr = document.createElement("tr");
thList.forEach((th) => {
const td = document.createElement("td");
tr.append(td);
td.innerHTML = item[th];
});
listElem.append(tr);
});
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!
** 목표에 대해 생각하자!!!!!
* 만들고 싶은것의 흐름을 생각해보기
'Javascript' 카테고리의 다른 글
| Javascript - 참조타입, 얕은 복사, 깊은 복사, 메모리 주소 (0) | 2023.08.03 |
|---|---|
| Javascript - 게시판 만들기 2 (0) | 2023.07.25 |
| Javascript - 정규표현식 (Regular Expression) (0) | 2023.07.21 |
| Javascript - 정렬 알고리즘 기초 (Bubble, Insert, Select) / swap (0) | 2023.07.20 |
| Javascript - Algorithm, Big-O표기법, updown 게임 / Flow chart, mermaid, markdown (0) | 2023.07.19 |
'Javascript' Related Articles
more
