230925 (월)

<댓글 처리 - 브라우저>

1. 상세 보기에 댓글 인터페이스

- 댓글 작성 인터페이스

* 로그인 안 한 경우라면 로그인해야 사용 가능함 알림

* 로그인 한 경우 본인 글이 아닌 경우 출력

 

- 댓글 목록 인터페이스

* ajax를 통해 기존 목록을 불러와서 처리

* 수정/삭제 인터페이스 - 본인이 작성한 경우에만 출력

 

 

2. js/comment.js 에 코드 추가 시 주의사항

3. 댓글 생성하기

- 입력한 글을 바탕으로 서버에 등록

- 등록된 정보를 바탕으로 목록 보기의 제일 앞에 추가

- 페이지 소스보기 클릭 시 댓글 안보임.

<!-- 새 댓글 작성 / 코멘트 추가 / 작성자가 아닌 경우에만 보여주기 -->
<c:if test="${username != board.writer }">
	<div class="bg-light p-2 rounded my-5">
		<div>${username == null ? '댓글을 작성하려면 먼저 로그인하세요' : '댓글 작성' }</div>
		<div>
			<textarea class="form-control new-comment-content" rows="3"
				${username == null ? 'disabled' : '' }></textarea>
			<div class="text-right">
				<button class="btn btn-primary btn-sm my-2 comment-add-btn"
					${username == null ? 'disabled' : '' }>
					<i class="fa-regular fa-comment"></i> 확인
				</button>
			</div>
		</div>
	</div>
</c:if>

- ${username == null ? '댓글을 작성하려면 먼저 로그인하세요' : '댓글 작성'} : el 로그인 여부

- new-comment-content, comment-add-btn : 이벤트 처리용 class

 

4. 목록에서의 수정/삭제/확인/취소 버튼 처리

- 자식 먼저 처리 -> 마지막으로 부모가 처리 : 이벤트 버블링

- 부모 먼저 처리 -> 마지막으로 자식이 처리 : 캡처링

- .on 함수를 쓰는 경우 : 부모가 비동기여서 이벤트 핸들러를 직접 걸 수가 없는 경우에 사용함.