오늘 내가 배운 것
1. CRUD - 게시판 만들기( create 영역, read 영역)
1. CRUD - 게시판 만들기
코드 진행 순서
1. index.html 파일 만들고, board폴더와 public 폴더 만들기
- board는 다른 카테고리? 의 창들(list, view, write html 파일 모음)
2. html 요소 넣어주고, js파일 연결하기 (파일이 다르니 경로 잘 보고 연결후에 확인)
3. list (글 목록)에서 발생하는 이벤트는 총 2가지 (글 제목클릭 -> 뷰, 글쓰기 클릭 ->쓰기)
- a태그로 경로 지정해주기
로컬 스토리지로 데이터 주고받기
로컬 스토리지에 데이터 저장하기
window (web APIs)
window.localStorage.setItem('name','baek') //선언시 키,값 모두 스트링타입으로 작성
window.localStorage.getItem('name') //호출시에는 키만 적어주면 된다.
4. write.html의 id,name 값 부여하기
- submit이벤트가 발동되었을 때 해당하는 value 값을 얻기 위해
5. form 엘리먼트 불러오기, 이벤트 추가하기
6. 이벤트가 발동될 때 링크가 이동하는 것을 막기 위한 코드 작성
7. 원하는 객체를 만들기 위한 생성자 함수 만들기(class문법을 이용할 것.)
8. submit이 발동되었을 때, 입력받은 값으로 객체를 생성하기
9. 뽑은 값을 string으로 변환, 변환 후 localStorage 저장
10. input-box 내용 리셋
11. write.html에서 값 적어보고 확인하기(검사-> application)
12. location을 이용해서 링크 걸어서 view.html로 이동시키기
윈도우 영역
브라우저 전체를 뜻하고 화면이 그려지는 곳을 document영역이라고 하며, location이 주소창(url) 부분이다.
window.location.href =" " //"" 내용으로 url이 바뀐다.
//링크를 이동할 수 있다 === 링크를 가져올 수 있다.
location.search : url에서 '?'이후의 값을 가져온다 //쿼리스트링 영역을 가져온다.
13. view.js로 가서 localStorage에 저장되어 있던 값을 호출하여 확인한다
14. 형 변환을 해서 객체 타입으로 변환해준다. (저장할 땐 스트링으로 변환해서 저장하고, 호출할 땐 객체로 변환해서 저장한다.)
15. viewFrm의 항목들을 출력시켜준다.
> viewFrm [0]. id :속성 id를 가진 엘리먼트 출력
board : 객체 타입인 항목들
board [id] : 객체 타입 항목들 중 id를 가진 엘리먼트
**"id", id , board[id]** 차이점 알기
16. viewFrm > div > span을 선택해서 안에 내용(innerHTML)을 board [id]로 할당하여 주기
17. list 만들기 처음 진입했을 때는 아무것도 없는 상태이다. 그래서 boards가 있는지 없는지 확인하는 과정이 있어야 한다. 로컬 스토리지에서 호출해본다.
> 결과물이 있을 때는 string 없을 때는 null
18. 없으면 배열을 만들어서 문자열로 변환 후 스토리지에 넣어주고 다시 그 값을 반환받는다.
19. 8번 과정 이후 9번 과정을 수정할 필요가 있다.(write 객체 생성 이후!)
boards를 호출해서 객체로 변환 후 객체에 push 과정이 일어난 후 다시 문자열로 변환해서 로컬 스토리지에 다시 저장시켜주어야 함.
20. url에 index를 추가하여야 한다. index를 변수로 할당하고 12번 과정에 작성한 url에 index를 추가하면 됨. (undefined 계속 뜸..)
21. write.js가 바뀌었기 때문에 view.js에서도 수정 주어야 함.
22. location.search를 이용하면 쿼리 스트링 부분을 출력해준다. 출력받은 값을 split을 이용하면 설정한 구분자 기준으로 분해할 수 있다.(index구하기)
23. 분해한 데이터를 내가 원하는 부분을 추출해서 변수에 담는다.(인덱스)
그리고 형 변환한 객체의 인덱스 번호로 몇 번째 객체인지 알 수 있다.
24. list페이지에 저장한 데이터 보이기
25. list.html에서 tr Element를 thead로 묶고 thead 형제 요소로 tbody 만들기
26. tbody안에 넣을 element구조를 함수로 선언하여 함수의 매개변수로 저장되어있던 객체와 인덱스를 작성한다..
27. 리턴 값으로 Element구조에 값을 넣어준다. (tr, td)
28. for문으로 1개씩 배열 안의 객체를 tbody에 작성하여줌(innerHTML)
기존에 한 개라도 있었으면 기존에 것도 같이 작성하여야 하기 때문에
> tbody.innerHTML = tbody.innerHTML + template(boards[i],i );
i 는 인덱스
29. 이벤트가 제목으로 들어가는 이벤트도 있으니 두 번째 td는 a 태그를 이용해서 view로 가는 링크를 걸어준다. 링크에 인덱스도 표현해주어야 그 객체에 대한 view 페이지가 나온다.
return`
<tr>
<td>${index + 1}</td>
<td>< a href="/board/view.html?index=${index}">${item.subject}</a></td>
<td>${item.content}</td>
<td>${item.date}</td>
<td>${item.hit}</td>
<tr>
`
const boards= JSON.parse(item, index)
for(let i = boards.length -1 ; i>=0 ; i-- ){
tbody.innerHTML += template(boards[i],i)
}
객체를 생성할 때 instance에서 index를 넣어주어야 하는데 못 넣어줬다.
순서는 parse 후에 객체를 생성하면서 index를 부여해야 한다...
CSS는 안 했음.
코드 확인하기
↓스크롤 압박↓
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<a href="./index.html">로고</a>
</h1>
<a href="./board/list.html">게시판 리스트로 가기</a>
</body>
</html>list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<a href="/index.html">로고</a>
</h1>
<h2>게시판 리스트</h2>
<table border="1">
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>등록일</td>
<td>조회수</td>
</tr>
<tbody>
</tbody>
</table>
<a href="/board/write.html">글쓰기</a>
<script src="../public/js/list.js" type="text/javascript"></script>
</body>
</html>
list.js
//값이 있다면
const item = localStorage.getItem("boards")
//값이 없다면
if(item === null){
const intialState = []
const state = JSON.stringify(intialState)
localStorage.setItem("boards", state)
item = state
}
const tbody = document.querySelector("tbody")
function template(item, index){
return `
<tr>
<td>${index + 1}</td>
<td><a href="/board/view.html?index=${index}">${item.subject}</a></td>
<td>${item.content}</td>
<td>${item.date}</td>
<td>${item.hit}</td>
<tr>
`
}
const boards= JSON.parse(item)
for(let i = boards.length -1 ; i>=0 ; i-- ){
tbody.innerHTML += template(boards[i],i)
}
view.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<a href="/index.html">로고</a>
</h1>
<h2>게시판</h2>
<form id="viewFrm">
<div id="subject">
제목 : <span></span>
</div>
<div id="writer">
작성자 : <span></span>
</div>
<div id ="date">
작성일 : <span></span>
</div>
<div id="content">
내용 : <span></span>
</div>
<a href="./list.html">리스트 목록</a>
<a href="./write.html">뒤로가기</a>
</form>
<script src="../public/js/view.js" type="text/javascript"></script>
</body>
</html>
view.js
const item = window.localStorage.getItem("boards")
//스트링은 점표기법 안됨...!! 주의
const boards = JSON.parse(item) //parse를 사용하면 스트링에서 객체가 되었다.
//객체가 되었다는 것은 안에 있는 항목을 하나하나 점표기법을 이용해서 읽어 올 수 있다
const idx = location.search.split('=')
const index = idx[1]
const board = boards[index]
const viewFrm = document.querySelectorAll("#viewFrm > div")
for(let i = 0; i < viewFrm.length; i ++){
const id = viewFrm[i].id
const span = viewFrm[i].querySelector("span")
span.innerHTML = board[id]
}
write.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<a href="/index.html">로고</a>
</h1>
<h2>게시판 작성하기</h2>
<form id="writeFrm">
<div>
제목 :<input type="text" name="subject" >
</div>
<div>
작성자 : <input type="text" name="writer">
</div>
<div>
내용 :
<textarea name="content"></textarea>
</div>
<input type="submit" value="글작성">
</form>
<script src="../public/js/write.js" type="text/javascript"></script>
</body>
</html>
write.js
const writeFrm = document.querySelector("#writeFrm")
class Board{
constructor(subject, content, writer){
this.index = 0
this.subject = subject
this.content = content
this.writer = writer
this.date = "2022-11-17"
this.hit = 0
}
}
function submitHandler(e){
e.preventDefault()
const subject = e.target.subject.value
const content = e.target.content.value
const writer = e. target.writer.value
const instance = new Board(subject, content, writer)
const boards = JSON.parse(localStorage.getItem("boards"))
boards.push(instance)
const index = boards.length-1
const item = JSON.stringify(boards)
localStorage.setItem("boards", item)
// console.log(instance)
// const item = JSON.stringify(instance) //스트링 변환
e.target.reset()
window.location.href = '/board/view.html?index=' +index
}
writeFrm.addEventListener("submit", submitHandler)
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221121 Linux - 리눅스 기초 (1) | 2022.11.21 |
|---|---|
| 221118 실전예제 - CRUD 게시판 만들기 (2) (0) | 2022.11.19 |
| 221116 실전예제 - try_catch(), 데이터셋(dataset, data- ), CRUD 댓글창 만들기 (0) | 2022.11.17 |
| 221115 실전예제 - Counter 만들기, CRUD-댓글창 만들기 (0) | 2022.11.16 |
| 221114 실전예제 - 로또 번호 생성기 (0) | 2022.11.15 |
댓글