오늘 내가 배운 것
1. Counter
2. CRUD
- CRUD란?
- 댓글창 만들기
- Create 영역
- Read 영역
1. Counter 만들기
코드 짜기 전 순서 생각해보기
1. 처음엔 value : 0으로 시작한다.
2. + 버튼 만들기, - 버튼만들기
3. + 버튼을 누르면 value 값이 1 증가한다.
4. - 버튼을 누르면 value 값이 1 감소한다.
5. CSS는 제외
5. 간단하게 구현 가능한 부분이라 외부 파일이 아닌 html 내부에서 script 태그에 작성할 예정이다.
<body>
<h1>
Value :
<span id="counter"></span>
</h1>
<button id="increment">+</button>
<button id="decrement">-</button>
<script type="text/javascript">
const display = document.querySelector("#counter")
const incrementBtn = document.querySelector("#increment")
const decrementBtn = document.querySelector("#decrement")
let num = 0
display.innerHTML = num
function handler(e){
console.log(e)
console.log(e.target.id)
if(e.target.id === "increment"){
// +
++num
} else {
// -
--num
}
display.innerHTML = num
}
incrementBtn.addEventListener("click", handler)
decrementBtn.addEventListener("click", handler)
</script>
</body>handler 함수 1개에 +와 -를 한 번에 표현했다.
e.target.id가 increment이면 true 영역에 +를 위한 코드를 작성하고,
increment가 아니면 else의 false 영역에 - 를 위한 코드를 작성해준다.
handler와 이벤트 추가하는 부분에 위에 코드 방법 말고 다른 방법도 있다.
<!--이벤트를 추가할 때 함수를 바로 작성하는 방법-->
const display = document.querySelector("#counter")
const incrementBtn = document.querySelector("#increment")
const decrementBtn = document.querySelector("#decrement")
let num = 0
display.innerHTML = num
incrementBtn.addEventListener("click", function(){
//+버튼을 눌렀을 때
++num
display.innerHTML = num
})
decrementBtn.addEventListener("click", function(){
//-버튼을 눌렀을 때
display.innerHTML = --num
})
2. CRUD
CRUD란?
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말
웹 CRUD - 댓글창 만들기
(오늘은 Create와 Read 구현,
아이디와 날짜 부분은 변수값을 받지 않고
고정값으로 설정 되어있음)
코드 짜기 전 순서 생각해보기
1. Create : 댓글을 입력할 수 있다.
- 댓글 입력 폼에 내용을 입력 한 뒤 `submit` 을 누르면 리스트에 추가된다.
- 만약 입력 폼에 내용이 비어 있는 상태에서 `submit`을 누르면 경고 팝업을 띄움(alert or model)
- 댓글이 성공적으로 처리가 되면 입력 폼을 `reset`한다.
2. Read : 댓글을 리스트로 볼 수 있다.
- 댓글 내용은 `아이디`, `댓글내용`, `날짜` 로 표현한다.
- 댓글 리스트는 최신순으로 나타낸다. // 아직 구현 못함.
- 댓글 총개수를 표현한다.
- 삭제 버튼이 존재한다.
3. Update : 댓글을 수정할 수 있다.
- 댓글 리스트에서 내용을 클릭 하면 input box로 변경된다.
- input value 값을 `클릭한 내용`을 유지한다.
- input 내용을 `enter`를 누르면 내용이 수정된다.
4. Delete : 댓글을 삭제할 수 있다.
- 해당 리스트의 삭제 버튼을 클릭하면 안내 창을 띄운다(alert or model)
- 안내 창에서 확인 버튼을 누르면 삭제를 진행
- 안내창에서 취소 버튼을 누르면 아무런 변화를 하지 않는다.
CRUD - HTML/CSS
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>
<link href="./public/css/comment.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>
<ul class="comment">
<li class="comment-form">
<form id="commentFrm">
<h4>
댓글쓰기
<span></span>
</h4>
<span class="px_box">
<input type="text" placeholder="댓글 내용을 입력하세요" name="content" class="int">
</span>
<input type="submit" class="btn" value="등록">
</form>
</li>
<li id="comment-list">
</li>
</ul>
</div>
<script src="./public/js/exam.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.comment {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
padding: 30px;
width: 600px;
height: 100vh;
margin: 0 auto;
}
.comment > li {
margin-top: 20px;
}
.comment > li:nth-child(1) {
margin: 0px;
}
.comment-row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.comment-row {
margin-top: 20px;
width: 100%;
}
.comment-row > li:nth-child(2) {
flex-shrink: 0;
flex-grow: 1;
padding-left: 25px;
z-index: 1;
width: 100%;
}
.comment-row > li:nth-child(2) {
width: 85px;
}
.comment-form > form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.comment-form > form > h4 {
width: 100%;
margin: 14px 0 14px 0;
}
.comment-content {
word-break: break-all;
padding-right: 25px;
}
.ps_box {
display: block;
position: relative;
width: 80%;
height: 51px;
border: solid 1px #dadada;
padding: 10px 14px 10px 14px;
background: #fff;
box-sizing: border-box;
}
.ps_box > input {
outline: none;
}
.int {
display: block;
position: relative;
width: 100%;
height: 29px;
padding-right: 25px;
line-height: 29px;
border: none;
background: #fff;
font-size: 15px;
box-sizing: border-box;
z-index: 10;
}
.btn {
width: 18%;
padding: 18px 0 16px;
text-align: center;
box-sizing: border-box;
text-decoration: none;
border: none;
background: #333;
color: #fff;
font-size: 14px;
}
Create 영역
기본적으로 CRUD에서 'C' 영역을 먼저 작업한다. Create는 R(read)와 연관성이 높다.
객체와 배열을 같이 써야 하는 상황이다.... 'Object[]' 를 이용한다.
리스트를 표현할 때는 배열이 좋고 하나의 댓글에 내용을 표현할 때는 객체가 좋기 때문에 'Object[]' 를 이용
Read 영역
createElement()
-동적으로 javascript에서 Element를 만드는 데 사용한다.
//기본 문법 예시
const 변수 = document.createElement("태그명")
append()
만들어 있는 요소를 Element 안에 삽입할 때 사용한다.
Element.append()
//앞의 Element 안에 자식요소로 ()안에 요소를 삽입한다.
//보통 createElement와 같이 쓰이기 때문에
//()안에는 createElement에서 할당한 변수명을 적어준다.
setAttribute()
-전에 getAttribute를 쓴 적이 있다. 'getAttribute(속성명)' 하면 그 속성명에 해당하는 속성 값을 반환했다.
setAttribute 도 비슷하다. set이니 값을 할당하여 주는 것이다. setAttribute("속성명", "속성값") 으로 작성하고, 문자열로 적어주면 속성과 속성 값이 할당된다.
//기본 문법
Element.setAttribute("속성", "속성값")
CRUD - JavaScript
const form = document.querySelector("#commentFrm")
const list = []
const total = document.querySelector("h4 > span")
const commentList = document.querySelector("#comment-list")
function Comment(content){
this.userId = "web7722"
this.content = content
this.date = "2022-11-15"
}
function totalRecord(){
total.innerHTML = `(${list.length})`
}
function createRow(userid, content, date){
const ul = document.createElement("ul")
const li1 = document.createElement("li")
const li2 = document.createElement("li")
const li3 = document.createElement("li")
ul.append(li1)
ul.append(li2)
ul.append(li3)
ul.setAttribute("class", "comment-row")
li1.setAttribute("class", "comment-id")
li2.setAttribute("class", "comment-content")
li3.setAttribute("class", "comment-date")
li1.innerHTML = userid
li2.innerHTML = content
li3.innerHTML = date
return ul
}
function submitHandler(e){
e.preventDefault()
const input = e.target.content
//console.log(input.vale) //input element object
if(input.value === ""){
alert("내용을 입력해주세요.")
return
}
const instance = new Comment(input.value)
list.push(instance)
const ulElement = createRow('web7722',input.value,'2022-10-22')
commentList.append(ulElement)
totalRecord()
e.target.reset()
}
totalRecord()
form.addEventListener("submit", submitHandler)'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221117 실전예제 - CRUD 게시판 만들기 (0) | 2022.11.18 |
|---|---|
| 221116 실전예제 - try_catch(), 데이터셋(dataset, data- ), CRUD 댓글창 만들기 (0) | 2022.11.17 |
| 221114 실전예제 - 로또 번호 생성기 (0) | 2022.11.15 |
| 221114 실전예제 - 웹페이지 MENU 만들기, 슬라이드 영역만들기 (0) | 2022.11.14 |
| 221111 실전예제 - 웹페이지 메인 이미지(Visual) 영역 만들기 (0) | 2022.11.13 |
댓글