[JS] 소셜웹페이지 - 메인화면

오른쪽 공간은 추후 프로필도 넣을 공간이라 띄워져있음

HTMLCollection

메인 페이지를 만들면서 가장 큰 문제는 HTMLCollection의 사용이었다. 댓글 기능을 구현하면서 document.getElementClassName() 으로 요소를 가져와 forEach문으로 순회했다. 댓글을 쓰면 이전 댓글을 덮어쓴다거나, 1번 피드에 댓글을 달면 2번 피드에 있던 댓글이 지워지는 시행착오를 겪었다. 받아오는 거야 배열로 받기만 하면 되니 괜찮았지만 반복문에서 계속 해결 못했다. 결국 억지로 억지로 작동은 하게 만들었지만 추후에 fetch 함수를 연결하거나 댓글 좋아요 기능 등을 넣게 되면 오류가 날 게 뻔했기 때문에 리팩토링을 하기로 했다.

1. form으로 입력받기

앞전에는 그냥 div 박스 안에서 input과 button 태그로 동작하고, HTMLCollection도 여기서 바로 받아와 사용했다. 그렇게 해도 물론 방법은 있겠지만 input.value를 받기 복잡한 과정을 거쳐야 했다. 그래서 form 태그로 감싼 후 form에서 데이터는 물론 이벤트까지 한 번에 해결할 수 있었다.

const [...commentsForm] = document.getElementsByClassName("commentsForm");  //[0:input 1:button]
commentsForm.forEach((form) => {
  
  form.addEventListener("input",getComment);
  form[1].addEventListener("click",postComment);
})

 

콘솔창에 띄워보면 사진과 같다.

0번 인덱스에서 Input.value를, 1번 인덱스에서 button 입력을 받아오면 된다. 따로 input과 button의 객체를 가져오지 않고 한 번에 사용할 수 있다.

2.insertAdjacentElement()

텍스트 노드를 만들어주는 방법으로 이번에 알게 됐다. innerHTML의 성능 문제, 위치 지정이 불가한 점 등 단점을 보완한 방법으로 적용 속도도 innerHTML보다 빠르다고 한다.

  commentsWrapper[index]
    .insertAdjacentElement('beforeend', newCommentList)
    .insertAdjacentElement('afterbegin', newCommentID)
    .insertAdjacentElement('afterend', newComment)
    .insertAdjacentElement('afterend', newCommentHeart)

위에서부터 순서대로 beforeend는 새 댓글(<li>)이 원 댓글 아래로 생기게 하고, <li> 안에서 아이디, 댓글 내용, 댓글 좋아요 버튼 순으로 오게 했다.

3. 버튼 비활성화

const getComment = (e) => {
  let formText = e.target.value;
  let formBtn = e.target.form[1];
  if (formText) {
    formBtn.disabled = false;
    formBtn.style.color = "#0096f6";
  } else {
    formBtn.disabled = true;
    formBtn.style.color = "#9fcdea";
  }
}

인풋 창에 input이벤트가 있는 경우에만 '게시'버튼이 켜지도록 했다. 색을 바꿔서 구분해주었고, disabled 속성을 사용했다. 색상 변경을 자바스크립트에서 직접 했는데 CSS에 속성 값을 저장해 두고 class로 가져오는 편이 더 깔끔했을 것 같다.

---

자바스크립트 리팩토링에 시간을 너무 많이 쓴 감이 있어서 포스팅이 많이 늦은 듯하다. HTMLCollection 문제도 해결하고 과정을 촘촘히 포스팅했어야 하는데 아쉬운 작업 기간이었다. 이제 fetch를 사용해서 목업 데이터로 피드 자체를 받아올 수 있게 하고, 좋아요나 프로필 같은 기능도 하나씩 추가해야겠다.