[Instagram_Clone] Main Page by VanilaJS

1. JavaScript로 구현하려는 기능

• 유저가 댓글창에 입력하면 원하는 댓글 창에 댓글이 저장되면서 화면에 출력된다.
• className 유의해서 위치와 의미를 명확하게 표현하려고 노력하자.

const close_input = document.querySelector("#thread_input");
    // 유저 입력 값 접근

const btn = document.querySelector('#thread_btn');
    // 누르면 간다아아아

function comment_add(e) {
  const comment = document.querySelector('.thread_mid_container');
    //댓글 추가위치

  const add_div = document.createElement('div');
  add_div.className = "new_div";
    // div 생성 - 클넴생성

  const add_span = document.createElement('span');
  add_span.innerHTML = close_input.value;
    // span 생성 - 클넴생성 - 유저 입력 값이 들어가

  const add_a = document.createElement('a');
  add_a.innerHTML = "offdutybyblo &nbsp";
    // 위와 같음 - 유저넴

  comment.appendChild(add_div);
  add_div.appendChild(add_a);
  add_div.appendChild(add_span);
    // 부모님과 조우

  close_input.value = "";
    // 깡깡깡깡깡통
}


close_input.addEventListener("keydown", function(e){
 	// 'keydown' 이벤트가 발생 시 아래 함수를 실행
  if(e.keyCode === 13){
    // 만약 키 코드가 13(enter)인 키가 입려되면
    e.preventDefault();
    // 페이지를 리로드하는 이벤트를 막아줌
    comment_add();
    // 댓글을 추가해주는 함수 실행
  }
})

btn.addEventListener("click", function(e){
  // 마우스 클릭 이벤트가 발생하면 아래 함수를 실행
  e.preventDefault();
  comment_add();
  // 댓글을 추가해주는 함수 실행
})

2. 발전하자

• 기본적인 개념을 알고 접근해서 이전의 로그인 페이지 구현 보다는 조금 쉽게 작업했다.
• 멘토님의 조언을 수용하여 클래스명을 좀 더 신경써서 진행, 클래스명이 길어지는 것은 경계
• appendchild와 innerHTML 부분은 좀 더 공부가 필요하다.
• DOM에 대한 정리가 필요하다.