📝 인스타그램 클론 코딩 (댓글창 )

오늘은 인스타그램의 댓글창을 클론 코딩을 하며 써본 eventlistenr 에 대해 복습해보겠다!

EventListener

---

이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.

이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.

EventListener 형태

---

요소.addEventListener(이벤트종류, function() {
 //이벤트가 일어났을 때 실행할 내용
});

appendchild(추가)

---

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킨다.

📝 댓글창 코딩 복습

const commentIn = document.querySelector(".commentIn");
const commentOut = document.querySelector(".commentOut");
/
/
/
commentIn.addEventListener('keydown',function () {
    if (event.keyCode==13){
        event.preventDefault(); //기본 이벤트 발생을 막아주는 메소드
        const comment = document.createElement("p");
        const comment99 = commentIn.value;
        comment.innerHTML=comment99;
        commentOut.appendChild(comment);
     }
  })

⚙ 코드 동작원리

---

1. querySelector 를 통해 코멘트 입력,출력 에 해당하는 클래스 호출해서 변수에 담기

2. 코멘트 입력 박스에서 엔터키(keyCode13)를 "keydown"하는 것이 조건인 이벤트 리스너 생성

3. 조건 충족시 p태그 생성 후 코멘트 입력창에 입력되어 있던 값을 변수에 저장 하고 그 변수를 innerHTML을 통해 p태그에 저장한다

4. 생성한 p태그를 appendChild를 통해 코멘트 출력 박스에 표시!

---

이렇게 구현하는데 까지 거의 2시간은 걸렸던 것 같다...
무엇이 문제였을까...

❗문제 : eventlistener 엔터 키

---

eventlistener 의 종류는 'keydown' 그리고 그 조건을 조건문을 통해 코멘트 입력창에서 enter키를 입력해야 발동되도록 했다.

그래서 if문의 조건으로 'keyCode ==13'을 주어서 엔터키를 키 다운 했을때 실행되게 하고싶었다..
하지만 결과는 계속 입력이 되자마자 새로고침 되는것이였다 ㅜ ㅜ

⭕해결법 : event.preventDefault();

---

keyCode==13(엔터키)를 누르게 되면 창이 새로고침하여 실행된다.
preventDefault 를 통해 이러한 동작을 막아줄 수 있다.

엄청나게 뿌듯허다!!! 😆 😆 😆 😆