댓글

댓글 생성 기능 만들기

이미지

avatar.png

1.9 KiB

가이드 문서

직접 따라하며 자바스크립트의 DOM 조작 개념을 익혀보세요.

이 문서는 댓글 작성 UI에 사용자가 입력한 데이터를 바탕으로 댓글 카드를 추가하는 기능을 구현하기 위한 가이드입니다.

1. 기본 목표

사용자가 입력한 작성자 이름과 댓글 내용을 이용해

•

아바타 이미지

•

작성자명

•

날짜

•

내용

이 포함된 댓글 카드를 목록 가장 아래에 추가하는 기능을 만들어봅니다.

2. 필요한 DOM 요소 선택하기

댓글을 작성하려면 다음 요소들을 JS에서 선택해야 합니다.

•

작성자 input (#writer)

•

내용 textarea (#content)

•

댓글 리스트 (#commentList)

•

작성 버튼 (#commentBtn)

힌트

→ document.getElementById() 또는 querySelector() 활용

3. 이벤트 등록하기

작성 버튼을 누르면 addComment() 함수(직접 만드세요)가 실행되도록 해야 합니다.

•

클릭 이벤트 등록: addEventListener("click", …)

•

입력창의 값 가져오기: .value

힌트

→ “작성” 버튼을 누르면 함수가 호출되어야 한다.

4. 오늘 날짜 가져오기

댓글에는 등록된 날짜가 들어가야 합니다.

Date 객체로 오늘 날짜를 구해 문자열 형태로 변환합니다.

목표 결과 예시

Plain Text
복사

힌트

→ new Date() → toISOString() → .slice(0,10)

5. 댓글 카드 만들기

여기서부터는 DOM 조작을 직접 구현합니다.

댓글 한 개의 구조는 다음과 같습니다.

<div class="comment-card">
    <div class="title"> ... </div>
    <div class="content-box">
        <p class="content">내용</p>
    </div>
</div>
Plain Text
복사

힌트

→ 문자열로 만들어(innerHTML) 넣을 수도 있고

→ createElement() 로 요소를 하나하나 생성할 수도 있다.

이번 예제에서는 문자열 템플릿 사용을 추천합니다.

6. 카드 요소를 실제 DOM에 추가하기

HTML 문자열로 구성한 카드 코드를 실제 요소로 만들어 리스트에 넣습니다.

힌트

•

document.createElement("div")

•

div.innerHTML = "..."

•

commentList.appendChild(div)

7. 입력창 초기화하기

댓글 추가 후 입력창을 비워야 합니다.

힌트

→ input.value = ''

8. 최종 구현 흐름 예시(로직만)

아래는 “전체 로직의 흐름”만 알려주는 힌트입니다.

코드는 직접 작성해보세요!

1.

입력값 가져오기

2.

오늘 날짜 생성하기

3.

댓글 카드 HTML 문자열 만들기

4.

부모 div 생성

5.

부모 div에 innerHTML 주입

6.

댓글 리스트에 appendChild로 추가

7.

입력창 초기화

학습 목표 체크리스트

아래 항목을 모두 달성하면 구현 성공입니다!

클릭 이벤트 등록했다

입력된 값 가져올 수 있다

오늘 날짜가 표시된다

템플릿 문자열을 이용해 HTML 구성했다

createElement + innerHTML 사용했다

댓글이 화면 아래에 추가된다

입력창이 초기화된다