[clone project]Danstagram - js (Main page)

첫 클론 프로젝트  Danstagram★ 

 

[메인 페이지 - 필수 구현사항] 댓글 작성 후 '엔터키'를 누르거나, '게시'를 클릭하면 댓글 추가

 

✔️ 세 번째 버전 (Refactoring 후) - 소요시간 약 2.5h

"use strict";

const postComment = document.getElementById('post');
const inputComment = document.getElementById('newComment');
const btnComment = document.getElementById('btnPost');

// 새 코멘트 값 체크
function checkComment(){
  if(inputComment.value.length > 0){
    addComment(inputComment.value)
  }
}

// 새 코멘트 추가
function addComment(value){
  
  const listComments = document.getElementById('listComment');
  const newCommentLine = document.createElement('p');
  const newComment = `
  <p class="txt_comment">
      <span>
          <a href="#n" class="txt_id">follow ID</a>
          <span>${value}</span>
      </span>
      <button id="delete" type="button">X</button>
  </p>
  `;

  newCommentLine.innerHTML = newComment;
  listComments.appendChild(newCommentLine);
  
  // 코멘트 추가 후, 작성칸 비움 
  inputComment.value = '';
}

const init = () => {
    // 게시 버튼 클릭 시
    postComment.addEventListener('submit', (e)=>{
      e.preventDefault();
      checkComment();
    });
    // enter키 클릭 시
    inputComment.addEventListener('keyup', (e)=>{
      if (e.keyCode === 13 && ! e.shiftKey) {
        e.preventDefault();
        checkComment();
      }
    });
};

init();

• 코멘트 value를 체크하는 함수와 코멘트를 추가하는 함수를 따로 작성
• 이벤트 실행 시 페이지가 새로고침되는 현상이 있었다. preventDefalut()메서드를 사용해 이벤트 전파를 막도록 했다. (사실 잘 이해 못한부분.)
• 새로운 댓글 형식을 위해 innerHTML, createElement, append을 범벅했었는데, 템플릿 리터럴 사용으로 간편하게 끝냈다.

 

 

---

우당탕탕 과정🤯

 

✔️ 첫 번째 버전 ( Refactoring 전) - 소요시간 약 1h

// 댓글 input 창에 엔터치거나 
// "게시" 누르면
// 댓글 추가되도록 createElement로 요소 생성해서, input에 입력한 값이 추가 되어야합니다

const getComment = document.getElementById('list_comment');
const getNewComment = document.getElementById('new_comment');
const postComment = document.getElementById('btn_post');


postComment.addEventListener('click', ()=>{
    const listComment = document.getElementById('list_comment')
    
    event.preventDefault();
    // 새 코멘트 공간만들어서 코멘트 리스트에 추가
    const newCommentTxt = document.createElement('p');
    newCommentTxt.classList.add('txt_comment');

    //위치 중요)input에 적힌 값 할당
    const getNewCommentTxt = getNewComment.value;

    // 코멘트 안에 출력될 ID 공간
    newCommentTxt.innerHTML = '<a href="#n" class="txt_id">follow ID</a>';

    // 코멘트 안에 출력될 내용
    let span = document.createElement("span")
    newCommentTxt.append(span)
    newCommentTxt.lastChild.innerText = getNewCommentTxt;

    // 코멘트 리스트에 추가
    getComment.appendChild(newCommentTxt)
    console.log(getNewComment)

    // 코멘트 리스트에 추가되면 input비움
    getNewComment.value = ''
});



getNewComment.addEventListener('keyup', (e)=>{
    if (e.keyCode === 13) {
        const listComment = document.getElementById('list_comment')
    
        // 새 코멘트 공간만들어서 코멘트 리스트에 추가
        const newCommentTxt = document.createElement('p');
        newCommentTxt.classList.add('txt_comment');
    
        //위치 중요)input에 적힌 값 할당
        const getNewCommentTxt = getNewComment.value;
    
        // 코멘트 안에 출력될 ID 공간
        newCommentTxt.innerHTML = '<a href="#n" class="txt_id">follow ID</a>';
    
        // 코멘트 안에 출력될 내용
        let span = document.createElement("span")
        newCommentTxt.append(span)
        newCommentTxt.lastChild.innerText = getNewCommentTxt;
    
        // 코멘트 리스트에 추가
        getComment.appendChild(newCommentTxt)
        console.log(getNewComment)
    
        // 코멘트 리스트에 추가되면 input비움
        getNewComment.value = ''
    }  
});

클릭했을 때, 엔터키 눌렀을 때를 각각 따로 작성함.

똑같은 내용을 두 번 사용해두고 하나로 합치기로 함.

 

✔️ 두 번째 버전 ( Refactoring 전) - 소요시간 약 30min

const listComment = document.getElementById('listComment');
const getNewComment = document.getElementById('newComment');
const postComment = document.getElementById('btnPost');

postComment.addEventListener('click', addComment);
getNewComment.addEventListener("keyup", (e)=>{
  if (e.keyCode === 13 && ! e.shiftKey) {
     e.preventDefault();
     addComment()
  }
});

function addComment(){

  // 새 코멘트 공간만들어서 코멘트 리스트에 추가
  const newCommentTxt = document.createElement('p');
  newCommentTxt.classList.add('txt_comment');

  //input에 적힌 값 할당
  const getNewCommentTxt = getNewComment.value;

  // 코멘트 안에 출력될 ID 공간
  newCommentTxt.innerHTML = '<a href="#n" class="txt_id">follow ID</a>';

  // 코멘트 안에 출력될 내용
  let span = document.createElement("span")
  newCommentTxt.append(span)
  newCommentTxt.lastChild.innerText = getNewCommentTxt;

  // 코멘트 리스트에 추가
  listComment.appendChild(newCommentTxt)
  console.log(getNewComment)

  // 코멘트 리스트에 추가되면 input비움
  getNewComment.value = ''
}

• 코멘트를 추가하는 하나의 함수를 만들어서, 클릭와 엔터이벤트를 추가했다.
• 여러 줄을 작성할 수 있게 하기 위해, shift키와 동시에 누르지 않았을 경우의 조건으로 추가.

 

• 코멘트의 value값이 계속 빈 값으로 나오는 문제가 생겼다.
  • 폭풍 console.log확인!!
  • value값을 구하는 변수를 함수 밖에 선언했던게 문제였다.
    함수가 실행되기 전에 이미 값(빈값)을 가지고 있는 상태인데, 그걸 그대로 가져오게 한 것.
    그래서 함수 안에서 value값을 체크하도록 addComment함수 내부로 옮겼다.
• 아직 함수 이름짖는게 어렵다. 내가 지어 놓고도 무슨 값을 지정한 건지 몰라 계속 확인하게된다. 좀 더 직관적인 이름을 지을 수 있도록 계속 시도해야겠다.

 

 

문제를 하나 발견했다.😨

enter키 이벤트 시 영어로 입력하면 댓글이 제대로 등록되는데, 한글로 하면 두 줄이 입력된다.