Javascript // 13일차 [댓글창]

댓글창 만들기.

 

1. 먼저 만드는 순서가 중요하다.

 

어떠한 변수가 필요하고 어떠한 인풋, 어떠한 아웃풋이 필요할지
어떤 이벤트가 필요한지 고민을 해야한다.
입력값이 무엇인지 ? 알아내는 것이 제일 중요하다

 

let, const 

 

= let은 수시로 변해야 하는 값, 원시데이터 값이 변한다 싶으면 let을 쓰는 것이 낫다.

const는 바뀔일이 없는 값에 넣어야한다. 변수값으로 무엇을 쓸지도 생각하면서 해야한다.

 

 

 

CRUD

 

C creat

 

 댓글 입력 폼에 입력 후 submit을 누르면 리스트에 추가 

    - 입력 폼 값을 추출해내기 e.target.content.value 값을 통해 입력 폼 입력만 추출 할 수 있다.

  만약 입력 폼이 비어있다면 경고 창을 띄운다 (이때 리스트에 추가되면 안된다.)

    - if문을 이용해 value 값이 비어있다 = true  > 알람, 이후 뭔가 실행되면 안되니 return을 이용해 빠져나오는 것도 괜찮음

  댓글이 성공적으로 리스트에 추가되면 입력폼을 다시 지우기

    -  e.target.reset()을 통해 form 을 모두 초기화 시켜버리면 가능.

 

    여기서 생성자 함수를 처리해야한다. 생성에서 같이 생각하기 x

    생성자 함수에 userid, content, date 등 생성되는 함수를 만들어둔다.

    content는 인자값을 받을 수 있으니 값을 집어넣어 놓는다.

    객체를 만들기 위해

    생성자 함수를 실행하기 위해 new 생성자 함수를  변수에 담아 생성한다.

    객체를 배열 안에 담기 위한 과정

    빈 배열을 만들고

    배열 안에 만들어진 객체를 넣는다. const list = []  // list.push(객체담은변수)

    이걸 화면에 뿌리면 read가 끝난다. // 까지 creat

 

R read

 

  댓글 내용은 "아이디"  "댓글내용"  "날짜" 로 표현한다.
  댓글 리스트는 최신순으로 나타낸다.
  댓글 총 갯수를 표현한다.
  삭제버튼이 존재

   배열 엘리먼트를 가지고 엘리먼트적으로 표현을 해서 html상으로 표현이 되게 해야한다.

   JS에서 creatElement를 이용해서 ul과 li를 생성해서 li를 ul 안에 넣어야함.

   == 넣어야 할 때 사용하는 메서드 = ul.append(li)

 

**creat 주의사항

const li1 = document.createElement(li)
const li2 = li1
const li3 = li1

==

const obj1 = {}
const obj2 = obj1
const obj3 = obj1

객체에서 다뤘던 주의사항이다. 대입연산자로 생성을 하게 되면, 같은 주소를 참조하기 때문에 변화값이 같이 변한다.

const ul = document.createElemnet("ul")
const li1 = document.createElement("li")
const li2 = document.createElement("li")
const li3 = document.createElement("li")

 이렇게 만들어야 한다.

 

U update

 

 댓글 리스트에서 내용을 **클릭하면 **inputbox** 로 변형된다
 input value 값을 클릭한 내용을 유지한다.
 unput 내용을 enter를 누르면 내용이 수정된다.

 아직

D delete

 

  해당 리스트의 삭제버튼을 "클릭"하면 안내창을 띄운다.
  안내창에서 확인버튼 누르면 삭제.
  안내창에서 취소버튼 누르면 아무련 변화를 하지 않는다.

안했지롱

 

완성본

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

const list = []
//생성자 함수부터 만들어라 why? 복사해서 넣어야 하기 때문에

function Comments(content){ 
    this.userid = "id"
    this.content = content
    this.date = "date"
    this.btn = "X"
} // 배열의 객체 안의 값
//붕어빵 틀, 객체를 만들기 위해 만드는 것. 생성자 함수이기 때문에 앞에 대문자

function counter(){
    total.innerHTML = `(${list.length})` // 탬플릿 리터럴 = 스트링 안에서도 자바스크립트 문법을 쓸 수 있게 된다.
}

function commentsub(userid, content, date){
    const ul = document.createElement("ul")
    const li1 = document.createElement("li")
    const li2 = document.createElement("li")
    const li3 = document.createElement("li")
    const btn = document.createElement("button")

    ul.append(li1)
    ul.append(li2)
    ul.append(li3)
    ul.append(btn)

    ul.setAttribute("class", 'comment-row')
    li1.setAttribute('class','comment-id')
    li2.setAttribute('class','comment-content')
    li3.setAttribute('class','comment-date')
    btn.setAttribute('class','delbtn')

    li1.innerHTML = userid //생각안난거 값들이 list에 있기 때문에 인자값을 받기 위해서 부여해준다.
    li2.innerHTML = content //생각안난거 
    li3.innerHTML = date //생각안난거 만들 때 한번에 내용까지 넣기 위해서 만들어둔다. 
    btn.innerHTML = "X"

    return ul //commentsub()했을 때 ul을 불러오기 때문에 다 불러 올 수 있다.
}
/*생각**/
function drawing (){
    commentList.innerHTML = "" // innerhtml의 모든 값들을 비워준다.
    for (let i = list.length-1 ; i >= 0; i--){
        const a = commentsub(list[i].userid, list[i].content, list[i].date) // 객체상태이기 때문에 . 표기법을 사용해서 값을 빼오는게 가능 , 로 구분하고 값을 준다.
        commentList.append(a) // 인자값을 받은 commentsub 함수의 return 값 ul로 가져와서 담을 수 있게 만든다.
    }
}

function formHandler(e){
    e.preventDefault() // summit 등을 막아주는 메서드
    
    const content = e.target.content 
    const instance = new Comments(content.value)
    
    if(content.value === ""){
        alert("내용선입력")
    } else {
        list.push(instance)
    }

    // const ulElement = commentsub(content.value) 나중에 수정, 삭제를 할 때 조금 귀찮아진다.
    // commentList.append(ulElement)
    
    counter() // 한 번 누를 때 마다 다시 실행되기 위해서 length가 추가되기 때문에 다시 
    drawing()
    e.target.reset()

    const del = document.querySelector(".delbtn") // submit을 눌러야 버튼이 생성되면서 class가 붙을 수 있기에 

    function delHandler (){
        alert("삭제하시겠습니까?")
    }
    
    del.addEventListener("click", delHandler)
}

form.addEventListener("submit", formHandler)

 

댓글 만들기

 

*CRUD

 

-submitHandler 의 역할
-state:[] 배열에 데이터를 쌓는 역할만 한다.

-inscance : object

-value = text를 입력 한 값

drawing()역할

state 배열 안에 있는 객체를
Elemetn로 바꿔주는 역할
얘가 제일 중요한역할

내가 화면에 무언가를 바꾸고 싶다.

state 변수에 있는 내용을 수정한다