작성 일자 : 2024-04-03
.container {
width: 700px;
margin: 0px auto;
padding: 20px;
border: 1px solid #cccccc;
background-color: azure;
}
p {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>게시판</title>
<link href="resources/css/board.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>게시판목록</h3>
<div class="margin_bottom_15 text_right"> <!-- 검색창은 우측으로 정렬 -->
<input type="text" placeholder="검색어입력" />
<button>검색</button>
</div>
<div class="margin_bottom_15">
<table border="1px">
<thead>
<tr>
<th>번호</th> <!-- 목록 1 -->
<th>제목</th> <!-- 목록 2 -->
<th>저자</th> <!-- 목록 3 -->
<th>hit</th> <!-- 목록 4 -->
<th>출판일자</th> <!-- 목록 5 -->
</tr>
</thead>
<tbody id="tbody"> <!-- 내용 1 -->
<tr>
<td>1</td>
<td><a href="boardcontent.html?no=1">가나다</a></td>
<td>홍길동</td>
<td>11</td>
<td>2024-04-02</td>
</tr>
<tr>
<td>2</td>
<td><a href="boardcontent.html?no=2">라마바</a></td>
<td>김세종</td>
<td>11</td>
<td>2023-04-02</td>
</tr>
<tr>
<td>3</td>
<td><a href="boardcontent.html?no=3">사아바</a></td>
<td>이순신</td>
<td>11</td>
<td>2022-04-02</td>
</tr>
</tbody>
</table>
</div>
<div class="margin_bottom_20 text_center">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<script>
const handleData = () => {
//백엔드에서 값을 받았다고 가정함.
const arr =
[
{ no: 100, title: '안녕하세요', hit: 223, writer: '홍길동', date: '2024-04-03' },
{ no: 101, title: '헬로', hit: 224, writer: '스텔라', date: '2024-04-04' },
{ no: 102, title: '곤니치와', hit: 225, writer: '사쿠라', date: '2024-04-05' },
{ no: 103, title: '니하오', hit: 226, writer: '유덕화', date: '2024-04-06' },
{ no: 104, title: '봉쥬르', hit: 227, writer: '피에르', date: '2024-04-07' }
]
// 1개는 => {no: 1} => obj.no
// n개는 => {{}, {}, {}} => {} 3번 수행
// for(let {}한개담을변수 of [{},{},{}])
for(let obj of arr) {
console.log(obj.no, obj.title, obj.hit, obj.writer, obj.date);
}
}
handleData();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판상세</title>
<link href="resources/css/boardcontent.css" rel="stylesheet" />
</head>
<!-- 자동정렬: shift + alt + f -->
<!-- 블록복사: shift + alt + 화살표-->
<body>
<div class="container">
<div>
<h3>게시판 상세 내용</h3>
</div>
<div>
<label>번호</label>
<p id="no">1</p>
</div>
<div>
<label>제목</label>
<p id="title">1</p>
</div>
<div>
<label>내용</label>
<p id="content">1</p>
</div>
<div>
<label>작성자</label>
<p id="writer">1</p>
</div>
<div>
<label>조회수</label>
<p id="hit">1</p>
</div>
<div>
<label>날짜</label>
<p id="date">1</p>
</div>
<div>
<a href="board.html"><button>목록으로</button></a>
<button>삭제</button>
<button>변경</button>
<button>이전글</button>
<button>다음글</button>
</div>
</div>
<script type="text/javascript">
function handleData() {
// var a = 13; // 변수 = 다른 숫자로 변경 가능
let b = 14; // 변수 = 다른 숫자로 변경 가능
const c = 15; // 상수 = 다른 숫자로 변경 불가능
// 상수로 만듬.. 변수로 바꿈
let d = 'a'; // 문자
const e = '11'; // 문자
// 글번호, 제목, 내용, 작성자, 조회수, 날짜 JSON
const obj = {
no: 1,
title: '안녕하세요',
content: '삶은 계란이다.',
writer: '홍길동',
hit: 100,
date: '2024-04-03'
};
// <p id="no">여기에내용</>
no.innerText = obj.no;
title.innerText = obj.title;
content.innerText = obj.content;
writer.innerText = obj.writer;
hit.innerText = obj.hit;
date.innerText = obj.date;
}
handleData(); // 수동으로 함수 실행
</script>
</body>
</html>
for(let obj of arr) {
tbody.innerHTML +=
`<tr>` +
`<td>3</td>` +
`<td><a href="boardcontent.html?no=3">사아바</a></td>` +
`<td>이순신</td>` +
`<td>11</td>` +
`<td>2022-04-02</td>` +
`</tr>`;
}
for(let obj of arr) {
tbody.innerHTML +=
`<tr>` +
`<td>${obj.no}</td>` +
`<td><a href="boardcontent.html?no=3">${obj.title}</a></td>` +
`<td>${obj.writer}</td>` +
`<td>${obj.hit}</td>` +
`<td>${obj.date}</td>` +
`</tr>`;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원목록</title>
</head>
<body>
<div class="container">
<h3>회원목록</h3>
</div>
<script src="<https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js>"></script>
<script>
console.log(window);
const selectMember = async() => {
const url = '<http://1.234.5.158:13000/api/member/select.json?page=1&text=&cnt=10>';
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
console.log (data);
// // for(let {}를 한 개 보관한 변수 of [{},{},{}])
// for(let obj of data.rows) {
// console.log(obj);
// }
}
selectMember();
</script>
</body>
</html>
const selectMember = async() => {
const url = '<http://1.234.5.158:13000/api/member/select.json?page=1&text=&cnt=10>';
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
// console.log (data);
// for(let {}를 한 개 보관한 변수 of [{},{},{}])
for(let obj of data.rows) {
console.log(obj);
}
}