221116 실전예제 - try_catch(), 데이터셋(dataset, data- ), CRUD 댓글창 만들기

오늘 내가 배운 것

1. try-catch()

2. 데이터셋

3. CRUD - update 영역, delete 영역

 

 

 

 

 

---

코드 진행 순서

1. Creat : 댓글을 입력할 수 있다
    - 댓글 입력 폼에 내용을 입력 한 뒤 `submit` 을 누르면 리스트에 추가된다.
    - 만약 입력 폼에 내용이 비어 있는 상태에서 `submit`을 누르면 경고 팝업을 띄움(alert or model)
    - 댓글이 성공적으로 처리가 되면 입력 폼을 `reset`한다.

데이터를 저장하는 영역까지가 creat로 생각하자.

2. Read : 댓글을 리스트로 볼 수 있다.
    - 댓글 내용은 `아이디`, `댓글내용`, `날짜` 로 표현한다.
    - 댓글 리스트는 최신순으로 나타낸다.
    - 댓글 총 갯수를 표현한다.
    - 삭제 버튼이 존재한다. 

3. Update : 댓글을 수정할 수 있다.
    - 댓글 리스트에서 내용을 클릭하면 input box로 변경된다.
    - input value 값을 `클릭한 내용`을 유지한다.
    - input 내용을 `enter`를 누르면 내용이 수정된다.

4. Delete : 댓글을 삭제할 수 있다.
    - 해당 리스트의 삭제 버튼을 클릭하면 안내창을 띄운다(alert or model)
    - 안내창에서 확인 버튼을 누르면 삭제를 진행
    - 안내창에서 취소 버튼을 누르면 아무런 변화를 하지 않는다.

---

1. try - catch()

 

try 안에 함수를 체크해서 에러가 나는지 안 나는지 확인하고, 에러가 나지 않는다면 함수를 계속 실행하고 에러가 발생하면 catch() 블럭 안을 실행한다.

 

//기본문법
function a(value){


    throw new Error
}

try{
    //코드를 실행하는 영역
a()
    consol.log("실행")
}catch(error){
    //에러가 날 경우 실행하는 영역
    console.log(error)
}



//예제문제
//객체 인스턴스 생성하는 과정에서 
class Comment{
    constructor(content){
        this.userid="baek"
        this.Content = content
        this.date = "2022-11-16"
        this.updated = false
    }

    set Content(value){
        if(value.length === 0) {
            throw new Error("content가 비어있음")
        }
        this.content = value
    }
}

function submitHandler(e){
    e.preventDefault()
    const form = e.target
    const value = form.content.value
    
    try{
        const instance = new Comment(value)
        addComment(instance)
        drawing()
    }catch(error){
        console.log(error)
        alert(error.message)
    }
}

 

위에 내용은 처음 try에서 인스턴스를 생성하는 함수를 만나 값을 받아서 생성하는데 set을 처리하는 과정에서 length가 0 이면 error 객체가 생성되면서 throw 하면서 catch 블럭을 실행하게 된다

 

 

2. HTML - 데이터셋

 

내가 수정하려는 인덱스(고유번호 , key 값)가 몇번인지를 알아야 한다.

업데이트에서 가장 중요한 것은 내가 어떤 댓글을 수정할지 알아야 한다.
 'create'와 'read'를 구현했을 때 array에 데이터를 보관하고 있기 때문에 인덱스를 이용하여 호출할 수 있다.

 

주의사항

const students=[]

const person1 = [
    name : "john",
    age : 32,
]

const person2 ={
    name : "mike",
    age : 30,
}

const person3 ={
    name : "tom",
    age : 28
}
students.push(person1)
students.push(person2)
students.push(person3)

student. splice (0,1) //앞에 있는 인덱스가 지워졌을 때

students[0].age = 27//splice로 인해 student[1].age = 27의 index가 0으로 바뀌어야한다.

삭제될 경우 인덱스를 하나씩 고쳐줄 수 없기 때문에 각 요소에 고유한 index값을 할당해주어야 한다.  그 방법이 데이터셋을 이용하는 방법이다.

 

데이터셋(dataset)

<div id="header" data-index ="5"></div>

const header = document.querySelector("#header")
console.log(header.dataset.index)  // 5

`data-`  는 변수를 선언했다는 뜻 (js의 let, const 같은 느낌?)

update, delete과정에서 호출해서 쓰기 위해 인덱스의 흔적을 남겨놔야 한다.

 

 

데이터셋 설정 방법

1. 대입연산자를 이용 : ul.dataset.index = index
2. Attribute를 이용 : setAttribute("data-index", index)

 

3. CRUD - update 영역, delete 영역

 

update 영역과 delete 영역 구현

최근순으로 정렬되어 있는  항목중 4번자리에 5번으로 잘못 되어 있는 것을 수정함.

4번을 삭제함.

 

 

 

 

 

 

HTML / CSS 는 이전 글을 확인해주세요.

https://baekspace.tistory.com/60

221115 실전예제 - Counter 만들기, CRUD-댓글창 만들기

 

JavaScript

const commentFrm = document.querySelector("#commentFrm")
const commentList = document.querySelector("#comment-list")
const state = []

class Comment{
    constructor(content){
        this.userid="baek"
        this.Content = content
        this.date = "2022-11-16"
        this.updated = false
    }

    set Content(value){
        if(value.length === 0) {
            throw new Error("content가 비어있음")
        }
        this. content = value
    }
}

function addComment(instance){
    state.push(instance)
}


function createRow(index){
    const ul = document.createElement('ul')
    const li1 = document.createElement('li')
    const li2 = document.createElement('li')
    const li3 = document.createElement('li')
    const deleteBtn = document.createElement("span")

    ul.append(li1)
    ul.append(li2)
    ul.append(li3)
    
    ul.setAttribute('class', 'comment-row')
    ul.dataset.index = index
    ul.setAttribute("data-index" ,index)
    li1.setAttribute("class", 'comment-id')
    li2.setAttribute("class", 'comment-content')
    li3.setAttribute("class", 'comment-date')
    deleteBtn.setAttribute("class", "comment-delete-btn")

    deleteBtn.innerHTML = "❌"    
    li1.innerHTML = state[index].userid
    // li2.innerHTML = state[index].content
    if(state[index].updated){
        const input = document.createElement('input')
        input.addEventListener("keyup", function(e){
            if(e.keyCode !== 13) return 
            state[index].content = e.target.value
            state[index].updated = false
            drawing()
        })
        input.setAttribute("class", "comment-update-input")
        input.value = state[index].content
        li2.append(input)
    }else {
        li2.innerHTML = state[index].content
        li2.append(deleteBtn)
    }
    li3.innerHTML = state[index].date
   
    return ul
}

function drawing(){  
    commentList.innerHTML = ""
    for(let i = state.length-1 ; i >=0; i--){
        const row = createRow(i)
        commentList.append(row)
    }
}

function submitHandler(e){
    e.preventDefault()
    const form = e.target
    const value = form.content.value
    
    try{
        const instance = new Comment(value)
        addComment(instance)
        drawing()
    }catch(error){
        console.log(error)
        alert(error.message)
    }
    console.log(state)
    form.content.focus() // 다시 input박스에 포커스
    e.target.reset() // input박스를 비워줌
}

function clickHandler(e){
    console.log(e.target)

    if(e.target.className === "comment-content"){
        const index = parseInt(e.target.parentNode.dataset.index)
        const value = e.target.innerHTML
        state[index].updated = true
        drawing()
    }else if (e.target.className === "comment-delete-btn") {
        const check = confirm("정말로 삭제 하시겠습니까?")
        if (check === true){
            const index = e.target.parentNode.parentNode.dataset.index
            state.splice(index, 1)
            drawing()
        }
    }
    if(e.target.className !== "comment-content")return
}


commentList.addEventListener("click" , clickHandler)
commentFrm.addEventListener("submit", submitHandler)

 

코드가 깨끗하지 않다..

좀 더 익숙해지면 줄일 건 줄이고, 들여 쓰기가 심한 부분도 함수로 빼가면서 잘 정리할 수 있을 것 같다.

 

일단 흐름에 맞게 구현하는걸 잘, 탄탄하게 연습하자