Javascript // 14일차 [댓글수정]

1. 설계하기

2. 실제코드

 - 날짜

 -  try catch

 

---

1. 설계하기

 

Update

 

내가 수정하려는 아이가 몇 번째 아이인지 모른다.
우리는 creat read를 구현했을 때 array 에다가 데이터 보관
update 와 delete 는 해당 index 고유번호 key 값을 가져와야함 = read 할 떄 신경써줘야함

 

Create   고유한 번호를 만드는것 - index

 

Read    고유한 번호를 남기기 위해

 

date 셋

엘리먼트에다가 데이터를 저장하는 용도로 사용하는것
div id='header' data-index="5" = 데이타를 선언했다 = - 변수명은 5다.

const header = document.querySelector("#header")

console.log(heeader.dataset.index) // 5

중요한건 고유 값을 부여해서 수정 삭제를 시킬 수 있어야 하는것
개념을 정확하게 이해하는것보다 과정이 중요하다.

Delete

버튼을 클릭하면 해당 인덱스를 찾는다
해당 인덱스를 splice 만 진행하고
다시 그리기

const students = [ ]

const person1 = {
    name: ""
    age: 33
}
const person2 = {
    name: ""
    age: 33
}
const person3 = {
    name: ""
    age: 33
}

students.push(person1)
students.push(person2)
students.push(person3)

students.splice(0,1)

sudents[].age = ??

잘라내게 될 시 배열이 변하기 때문에 가변적이어야함

댓글 리스트에서 댓글 내용을 클릭 이벤트로 넣기

join = 배열에 담아있는것들을 그대로 꺼내준다
('') 을 쓰면 배열을 그대로
("-") 하이폰을 배열 사이사이에 넣어서

코드

const commentFrm = document.querySelector("#commentFrm")
const commentList = document.querySelector("#comment-list")
const total = document.querySelector("h4 > span")

const state = []

class Comment {
    constructor(content) {
        this.userid = "id"
        this.Content = content
        // this.date = "2022.11.16"
        this.update = false // 기본값 false 값을 반환
        this.now = new Date()
    }
    set Content(value){
        if (value.length === 0){
            throw new Error("content가 비워있음") // 무조건 에러가 나게 하는 것 
        }
        this.content = value
    } // setter 해당 인스턴스에서 값을 넣을 때 Content를 부를 때 set 함수를 호출 대입연산자 옆이 있는 content 가 value로 들어간다. 
    // getter 값을 불러 올 때 
    getToday(separator = "-"){
        const date = this.now
        let mm = date.getMonth() +1
        let dd = date.getDate()
        let yy = date.getFullYear()
        const arr = [yy, mm ,dd]
        return arr.join(separator)
    }
}

function totalreview (){
    total.innerHTML = `(${state.length})`
}

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].update){
        trueValue()
    } else {
        falseValue()
    }

    function trueValue (){
        const input = document.createElement("input")
        input.addEventListener("keyup", function (e){
            if (e.keyCode !== 13) return // ketcode = 키보드 고유 코드 13=enter 코드이다. 아래쪽이 13일때만 쓰는 코드가 됨
            state[index].content = e.target.value
            state[index].update = false
            drawing()
        })
        input.setAttribute('class', 'comment-update-input')
        input.value = state[index].content
        li2.append(input) // on off 처럼 생각하면 편하다 true 일 때 input 박스가 on false 일땐 input 박스가 오프 되며 입력값을 전달
    }

    function falseValue(){
        li2.innerHTML = state[index].content
        li2.append(deleteBtn)
    }

    li3.innerHTML = state[index].getToday(".")
    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 // 자식 요소 중에서 name, 혹은 id가 content인 아이를 찾는것

    try {
        const instance = new Comment(value)
        addComment(instance)
        drawing()
    } catch (error) {
        alert(error.message)
    }
    form.reset()
    totalreview()
}

function clickHandler(e) {
    if(e.target.className === "comment-content"){
        const index = e.target.parentNode.dataset.index // string
        state[index].update = !state[index].update // 반대속성으로 바꿔주는 것 false > true
        drawing()

    } else if (e.target.className === "comment-delete-btn"){
        const index = e.target.parentNode.parentNode.dataset.index // string
        state.splice(index,1)
        drawing()
        totalreview()
    }

    if (e.target.className !== "comment-content") return 
}

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

생성자 함수를 사용할 경우가 있으면 웬만하며 class를 쓰는 것이 낫다. function 키워드는 역할이 2가지라 헷갈릴 위험 존재
calss는 호이스팅도 일어나지 않기 때문에도 좋다.
class라는 것을 실행하기 전에 빈칸을 체크해주는 것이 좋지 않나 ?
실행을 시키기 전에 비어있으면 실행이 되지 않게 하는것이 낫다.

getToday(separator = "-"){
        const date = this.now
        let mm = date.getMonth() +1
        let dd = date.getDate()
        let yy = date.getFullYear()
        const arr = [yy, mm ,dd]
        return arr.join(separator)
    }

날짜를 가져오는 부분이다. 달, 일, 연 을 가져와서 변수에 담아 준 후
그 변수들을 배열로 묶었다. join은 배열들을 꺼내와서 나열한다고 보는것이 좋다. join(-) 을 붙이면 yy-mm-dd 로 표시된다.
하지만 지금은 separator 을 기본값을 줬고 위에서 - 하이폰으로 값을 바꿨다.

 

state[index].update = !state[index].update // 반대속성으로 바꿔준다 스위치 on off 마냥

 

***함수를 썻으면 return 값 부터 생각하고 쓰자. 내가 이 함수로부터 무슨 값을 받으려 했는지.

 

**Try catch //

try {
 코드를 실행할 영역
} catch (e) {
 에러가 날 경우 실행
}

try문이 ture 일때만 발생하고 false일 때는 catch문이 실행된다
기본적으로 if문이랑 비슷하다.
try 안쪽문만 신경써서 읽으면 해석하기 편하다

 

예시 코드

 function a(){
    throw new Error("나 에러났음")
 } // throw 던진다는 의미 강제로 에러를 발생시킨다.
 // 에러객체를 만들면 몇번째 줄에서 에러가 났는지도 알 수 있다.

 try {
    a()
    console.log("나 실행됨")
} catch(e){  // error 의 악자
    console.log(e)
}
// try 도 코드블럭이라서 변수를 안에서 선언해야한다.
//  a()에서 멈춰버림 에러가 나면 에러났음 이라는 console 로그가 실행됨 그리고

function checkName(value) {
    if (value !== "ingoo"){
        throw new Error("에러났음")
    }

    return true
}

try {
    let name = "ingo"
    checkName(name)

    console.log("실행됨")
} catch (e) {
    console.log(e)
}