1. 개요

Westagram의 두 번째 페이지인 main.html 과 그와 관련된 .css, .js 파일을 작성하였다. 아직 레이아웃 작업이 조금 남아 있지만 필수 구현 사항이었던 댓글 달기 기능을 우선 구현하였다.

댓글 달기 기능은 인스타그램의 게시물에 댓글을 달고 삭제를 할 수 있는 기능이다. 조건은 아래와 같다.

1. 댓글 창에 댓글 입력 후 이벤트 리스너로 감지 하여 게시 버튼 활성화
2. 입력된 댓글을 댓글 목록에 추가
3. 댓글 창에 남아 있는 값 초기화
4. 추가된 댓글 삭제

2. 코드

1차 Js 코드

위의 조건 중 1번 조건은 이미 로그인 페이지에서 구현을 해보았기 때문에 큰 어려움 없이 작성할 수 있었다.
문제는 2~4번 조건이었다. 세션을 들으며 코드를 참고하여 만들어본 코드이며 여기에 내가 필요한 함수나 요소 등은 재구성 하여 짜게 되었다.
하지만 제대로 기능이 작동하지 않았다.

addComment(value) 함수에 파라미터 값을 넣어도 외부에서 해당 함수를 호출하지 않기 때문에 파라미터 값도 넣어줄 필요가 없었다.
그리고 addComment(value) 함수 내부에서 선언된 변수인 newComment 의 값으로 들어가는 고정 태그와 달러 싸인 ($) 중괄호 안으로 들어가는 사용자 입력 값에서 사용자 입력 값을 정확하게 선언해주지 않았다.
또한 댓글 게시 버튼 클릭 이벤트마다 화면이 스크롤 위치 그대로 머물러 있는 것이 아니라 화면 최상단으로 이동하는 현상도 일어났다.

"use strict";
const postBtn = document.getElementsByClassName("comment__post__btn")[0];
const commentInput = document.getElementsByClassName("comment__input")[0];

commentInput.addEventListener("input", function() {
  const commentPost = commentInput.value;
  commentPost.length > 0 ?
  postBtn.disabled = false :
  postBtn.disabled = true;
});

// 1. 댓글 창에 댓글 입력 후 이벤트 리스너로 감지 하여 게시 버튼 활성화

function addComment(value) {
  const commentLists = document.getElementsByClassName("text__commentlists")[0];
  const newCommentList = document.createElement("li");
  newCommentList.className = "comment__info";
  const newComment = '<span class="comment__author">irreplaceavle</span><span class="comment__content">${value}</span><button class="comment__delete__btn">x</button>';

  newCommentList.innerHTML = newComment;
  deleteComment(newCommentList);
  commentLists.appendChild(newCommentList);

// 2. 입력된 댓글을 댓글 목록에 추가

  commentInput.value = "";

// 3. 댓글 창에 남아 있는 값 초기화

function deleteComment(newCommentList) {
  const deleteBtn = newCommentList.querySelector(".comment__delete__btn");
  deleteBtn.addEventListener("click", () => newCommentList.remove());
}

// 4. 추가된 댓글 삭제

const init = () => {
  postBtn.addEventListener("click", () => addComment());
};
init();

// init() 초기화 함수로 가장 먼저 실행하도록 함

2차 Js 코드 (변경된 부분)

addComment() 함수의 파라미터 값을 비워주었다. 해당 함수의 내부의 변수인 newComment 값에 들어가는 댓글 창의 사용자 입력 값 또한 상단에서 전역 변수로 선언해준
const commentInput = document.getElementsByClassName("comment__input")[0]; 의 변수 값을 취해준다. 또한 게시 버튼 클릭 이벤트에도 스크롤 창이 이동하지 않고 현재 보고있는 창 위치 그대로를 유지해주기 위해 event.preventDefault(); 이벤트 인터페이스를 사용하였다.
그리고 newComment의 할당된 변수 값을 묶어주는 부호가 따옴표가 아니라 백틱이었다. 따옴표로 착각하고 묶어주어서 제대로 된 값이 나오지 못했다.

function addComment() {
  const commentLists = document.getElementsByClassName("text__commentlists")[0];
  const newCommentList = document.createElement("li");
  newCommentList.className = "comment__info";
  const newComment = `<span class="comment__author">irreplaceavle</span><span class="comment__content">${commentInput.value}</span><button class="comment__delete__btn">x</button>`;

  newCommentList.innerHTML = newComment;
  deleteComment(newCommentList);
  commentLists.appendChild(newCommentList);

  commentInput.value = "";

  event.preventDefault();
}

3. 결과