이건 댓글 추가하는 기능까지 구현한 코드다...  급하신 분들은 코드만 확인하셔도... 이 밑에는 내가 어떻게 생각했나에 대한 TMI와 몰랐던 개념정리다. 코드 보고 이해가 안가신 분들은 밑에 예제 따라해보세용~

// HTML addCommentText : input tag
// HTML addCommentButton : button tag
// HTML feedPostOthersComment : div tage

// input을 선택하는 변수
const ADD_COMMENT_TEXT = document.querySelector('#addCommentText');
// input 옆에 버튼을 선택하는 변수
const ADD_COMMENT_BUTTON = document.querySelector('#addCommentButton');
// 댓글이 추가될 부모 요소
const FEED_POST_OTHERS_COMMENT = document.querySelector('.feedPostOthersComment');

// onAdd라는 함수리터럴 생성
const onAdd = () => {
  //input에 입력된 값을 INPUT에 저장
  const INPUT = ADD_COMMENT_TEXT.value;

  // p 태그를 생성해서 TEXT에 저장
  const TEXT = document.createElement('p');
  // p 태그에 className 'comment'를 부여함
  TEXT.setAttribute('class', 'comment');
  // 입력된 값을 출력
  TEXT.innerHTML = INPUT;

  // feedPostOthersComment라는 부모요소의 자식요소로 TEXT를 넣어줌
  FEED_POST_OTHERS_COMMENT.appendChild(TEXT);
  // input 초기화
  ADD_COMMENT_TEXT.value = '';
  // input에 포커스
  ADD_COMMENT_TEXT.focus();
}

// 버튼을 클릭했을 때 onAdd 함수 리터럴 실행
ADD_COMMENT_BUTTON.addEventListener('click', () => {
  onAdd();
});

// 버튼을 클릭했을 떄 초기화인가
//

 

댓글 기능 구현에 대한 tmi

 1시간 정도 이게 무엇인가.. 고민을 했다. 10분 고민한거나 1시간 고민한거나 같은 것 같은데 이건 내 착각일까....😅

 

결국 내가 도달해야할 목표는 무엇일까?

댓글을 추가하는 것이다.

댓글은 무엇일까?

HTML의 요소다.

- JS로 HTML의 요소를 어떻게 추가하지?

구글링해보니 createElement('태그')이다.

 

 

먼저 간단하게 HTML을 작성해보자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="1.js" async ></script>
</head>
<body>
  <!-- 댓글이 추가될 공간 -->
  <div class="commentBox">
    <p class="comment">여기 바로 밑에 댓글 추가하고 싶음</p>
  </div>
  
</body>
</html>

 우리가 사용할 클래스 이름을 잘 기억해두자. 은근히 햇갈리게 하더라 연습할때는 이름 간단하게 하는 것 추천한다... 이름 복잡하면 어렵다.

.commentBox : 댓글 요소가 추가될 컨테이너 내부 

 

 HTML 작성도 마쳤으니 이제 DOM을 써서 HTML의 요소를 셀렉트 해보자.

 DOM이 무엇인지 모른다면 넘어가자. document.querySelector('')가 무엇인지만 알면 된다. 의미를 나열해보자면 document는 HTML 문서를 말하고. (dot)은 ~의 라고 해석한다. querySelector는 css의 셀렉터라고 생각하면 편해진다. 괄호 안에는 작은 따옴표 안에 클래스면 클래스, 아이디면 아이디를 작성한다. 정리하면 HTML 문서의 ' ' 클래스(또는 아이디 또는 태그) 이름을 가지고 있는 아이를 선택한다 이다.

 

// 댓글을 추가하고 싶은 부모 요소 .commentBox

// HTML 요소에 접근할 수 있는 변수
const COMMENT_BOX = document.querySelector('.commentBox');

밑의 더보기는 위에 있는 코드에 대한 해석이다. 보고싶은 사람만 보기

더보기

const COMMENT_BOX = document.querySelector('.commentBox');

-> HTML 문서의 .commentBox라는 클래스 이름을 가진 요소를 선택해서 COMMENT_BOX라는 변수에 할당해 초기화한다.

 

 그 다음은 요소를 추가해보자. 하지만 추가하기 전에 createElement가 무엇인지 알 필요가 있다. 이 아이는 요소만 생성해준다. 생성 이라는 단어를 기억하자.그리고 여기서 이상함을 느낀 사람? 손 ?  🤗 

둘의 차이는??

 

 위에 있는 것은 안에 내용이 없다. 어떤 태그라도 내용이 없다면 요소가 생성되어 있다 하더라도 사용자가 눈으로 볼 수 없다. 요소 안에 내용을 체워줘야한다. 그 역할을 하는 것이 innerHTML이다. 요소 안에 내용을 적을 수 있다.

// p 태그를 생성해서 변수 TEXT에 저장한다.
const TEXT = document.createElement('p');
// 생성한 p 태그에 'hi'라는 값을 대입한다.
TEXT.innerHTML = 'hi';

 하지만 라이브 서버를 새로고침해도 나의 댓글은 추가되지 않는다. 그 전에 지금까지의 진행 상황을 다시 되짚어 보자. HTML에 요소를 생성했고 안에 내용을 추가했다. 그 다음은?

요소를 어떤 태그와 인접한 위치로 이동을 시켜줘야한다.

 그 역할을 하는 것이 appendChild()라는 함수다. 요소를 이동시키는 함수는 이 함수 외에도 여러가지가 있다. 참조를 달아놓겠다. 이 appendChild()라는 함수는 내가 선택한 요소 안에 자식 요소를 추가한다. 더 풀이하자면 부모 요소 아래의 맨 뒤에 자식 요소를 추가한다.

// COMMENT_BOX의 자식 요소로 TEXT 변수에 저장된 요소를 추가하겠다!
COMMENT_BOX.appendChild(TEXT);

 새로 고침하면? 내가 생성한 요소가 추가되었다.

전

후

 그래서 이걸 가지고 인풋 태그에 내가 입력한 값 버튼 눌러서 어떻게 추가 해줄건데? 하시는 분들은 이 다음을 진행해보자.

 

 HTML에 인풋과 버튼을 추가하자. 위와 연관되는 내용이기 때문에 위의 HTML에서 댓글이 추가되는 공간 밑에 태그를 작성하면 된다. addTextContainer라는 클래스는 기억속에서 잊어버리자. 인풋과 버튼을 묶어주기 위해서만 사용했다.

<!-- 댓글이 추가되는 공간 -->

<!-- 댓글을 입력할 공간 -->
  <div class="addTextContainer">
    <input class="input" type="text">
    <button class="button">버튼</button>
  </div>

 또한 JS에 HTML의 인풋과 버튼에 대한 변수를 선언해주자.

const INPUT = document.querySelector('.input');
const BUTTON = document.querySelector('.button');
.INPUT : 댓글 입력할 인풋
.BUTTON : 입력한 댓글을 올릴 버튼

 

 

 진행상황을 체크 하겠습니당 접은 글에 적힌 코드와 같이 되었는지 확인하세용

더보기

HTML

<!-- 댓글이 추가될 공간 -->
  <div class="commentBox">
    <p>여기 바로 밑에 댓글 추가하고 싶음</p>
  </div>

  <!-- 댓글을 입력할 공간 -->
  <div class="addTextContainer">
    <input class="input" type="text">
    <button class="button">버튼</button>
  </div>


JS

const COMMENT_BOX = document.querySelector('.commentBox');
const INPUT = document.querySelector('.input');
const BUTTON = document.querySelector('.button');

const TEXT = document.createElement('p');
TEXT.innerHTML = 'hi';

COMMENT_BOX.appendChild(TEXT);

그다음 진행해야할 문제를 해결해보자.

목표 : 댓글을 입력하고 버튼을 클릭했을 때 댓글창에 댓글이 입력

댓글이 입력되고 버튼을 클릭했을 때가 뭔데?
이벤트리스너

 버튼을 클릭했을 때 어떤 행동이 실행되도록 해보자.

BUTTON.addEventListener('click', INTERFACE_BUTTON);

위의 코드를 해석해보자면 버튼을 '클릭'했을 때 INTERFACE_BUTTON함수를 실행해줘 라는 의미이다.

INTERFACE_BUTTON 함수는 인풋과 연결되어있는지 확인할 때 쓸 것이며, 우리의 댓글을 추가해줄 함수이다.

 

 인풋과 연결되었는지 확인 해줄 변수 같은 함수를 선언해주자. 이상한 기호  같은건 신경쓸 필요 전혀 없다. 그냥 아 변수에 함수를 담았구나 생각하면 편하다. 즉 INTERFACE_BUTTON이라는 변수에 이름이 없는 함수를 정의해서 할당한 것이다. 함수의 실행 내용으로는 console.log함수를 적어서 개발자도구에서 연결됬는지 확인해볼 것이다.

const INTERFACE_BUTTON = () => {
  console.log('찍혔냐');
};

1. HTML 문서에서 라이브 서버를 열자.

2. 내 페이지에서 개발자 도구를 열고 ( 마우스 우클릭 -> 검사 )

3. 개발자도구 창을 보면 Console 이라는 패널이 있다.

3. 그다음 이런 아이콘을 클릭하자

4. 아이콘을 클릭해서 내가 댓글을 입력할 input창을 클릭한다.

5. 아무 텍스트나 입력해서 버튼을 눌러보자.

6. 그럼 찍혔냐 라고 console창에 뜰 거다. 그럼 인풋이랑 연결된거라고 보면 되겠다.

인풋창과 연결된걸 확인했으니 다음 스텝을 진행하자. 현재까지 한다면 우리는 모든 스텝을 밟아 온 것이다 라고 말할 수 있다. 이제 내용을 합치기만 하면 완성이다. 댓글을 추가하는 바로 그것.. 그것은 아까 했었다. 그것을 INTERFACE_BUTTON이라는 변수에 저장된 함수의 내용으로 넣어주자.

 

이 아래 코드블럭 기억나겠져? 우리가 아까 작성한 것들이다. 이것을 인풋창과 연결되는지 확인했던 그곳에 넣는다.

const TEXT = document.createElement('p');
TEXT.innerHTML = 'hi';

COMMENT_BOX.appendChild(TEXT);

어떻게?

이렇게

const INTERFACE_BUTTON = () => {
  const TEXT = document.createElement('p');
  TEXT.innerHTML = 'hi';

  COMMENT_BOX.appendChild(TEXT);
};

 알맞게 넣었다면 라이브서버로 들어가서 댓글을 추가해보자. 댓글이 올라간다면 성공... 안올라가면 뭔가 안따라하거나 오타나지 않았을까 찾아보자.

 

 이번에는 내가 수동으로 입력한 값을 추가 하는 것이 아니라. input에 입력된 값을 추가해야한다.

즉 이부분을 수정해야한다. 이전에는 내가 입력한 값이 댓글로 추가되는 것이 아니라 버튼을 눌렀을 때 'hi'라는 댓글만 추가되었을 것이다.

내가 입력한 값이 올라가도록 수정해보자.

TEXT.innerHTML = 'hi';

 인풋의 값을 받아오는 변수를 함수 안에 선언해보자.

const INPUT_CHECK = INPUT.value;

 INPUT이라는 변수는 HTML의 인풋창을 셀렉트하는 변수였었다. 그 변수에 접근해서 값을 얻어올때 사용하는 것이 value다. 즉 위의 코드는 이렇게 선언한 것가 같다. INPUT_CHECK라는 변수에 인풋의 값을 저장해주세요. 마무리로.. 이 선언한 변수를 innerHTML이 작성된 곳에 대입하면 된다. TEXT.innerHTML = 'hi'라고 적혀있던 곳에 'hi'를 제거하고 위에서 선언한 변수를 넣어주자.

TEXT.innerHTML = INPUT_CHECK;

 여기까지 잘 따라왔다면 내가 입력한 값이 댓글 다는 것처럼 추가되는 것을 확인 할 수 있을 것이다. 역시 되지 않는다면 오타가 났는지 빼먹은 점은 없는지 확인하자. 잘 모르겠다면 내 코드를 복사해서 붙여넣기 해보자. 그리고 다시 따라해보고 자신 만의 글로 기록해보자 그럼 당신은 댓글을 다는 원리에 대해 이해할 수 있게 될 것이다.

밑의 더보기를 클릭하면 완성된 코드가 나온다.

더보기 
const COMMENT_BOX = document.querySelector('.commentBox');
const INPUT = document.querySelector('.input');
const BUTTON = document.querySelector('.button');

const INTERFACE_BUTTON = () => {
  const INPUT_CHECK = INPUT.value;

  const TEXT = document.createElement('p');
  TEXT.innerHTML = INPUT_CHECK;

  COMMENT_BOX.appendChild(TEXT);
};

BUTTON.addEventListener('click', INTERFACE_BUTTON);

 

응용은 스스로 해보자.. 여기까지 따라했다면 어떤 원리인지 파악했을 것이라 믿는다.. 파악하지 못했더라도 자책할 필요 없다. 밑의 참조글을 읽어보시는 것을 추천한다. 나보다 훨씬 더 설명 잘했다...

 

참조

1. 내 글 보다 더 잘 설명해놓은 곳

https://velog.io/@eommoonjoo/JavaScript-%EB%8C%93%EA%B8%80-%EC%B6%94%EA%B0%80-%EC%82%AD%EC%A0%9C-%EA%B8%B0%EB%8A%A5

 

2. appendChild()외에도 여러가지 함수

https://velog.io/@dnjswn123/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%9A%94%EC%86%8C-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-createElement-appendChild

'Language > Javascript' 카테고리의 다른 글

Javascript default export와 named export  (0) 2023.05.11
Javascript filter 메소드를 이용한 데이터 핸들링  (0) 2022.09.26
Javascript 특정 문자열을 찾아 제거한 다음 나머지를 반환하기  (0) 2022.05.29
Javascript 함수  (0) 2022.05.26
Javascript 부정연산자  (0) 2022.05.08

+ Recent posts

티스토리툴바