댓글 더보기 기능 구현하기

댓글 수가 많아지면 그만큼 페이지가 길어지게 되고 외관상 보기 좋지가 않다.
그래서 댓글의 최대 갯수를 15개만 보여주고, 더보기 버튼을 생성해서 15씩 점점 늘어나도록 설정을 하기로 했다.

<input type="hidden" id="block" value="1">
<div id="morebtn" style="text-align:center; line-height:50px;">
	<button type="button" id="more">더보기</button>
</div>

1. 우선 boardContents.jsp파일로 가서 바디 태그 맨 아래로 가서commentListView 아래에 input태그와 div태그로 더보기 버튼 하나 만들어준다.

코드 설명

• <input type="hidden" id="block" value="1"> : 타입을 hidden으로 설정해서 사용자가 볼 수 없도록 페이지의 데이터를 숨겨놓는다.
  id속성은 JavaScript나 CSS에서 해당 입력 요소를 참조하기 위한 고유 식별자.
  value 값은 현재 block의 초기 값을 나타낸다. 댓글을 한 번에 몇 개씩 로딩할지, 어떤 페이지에서 데이터를 불러올지를 결정하는 데 사용된다. value=1로 첫 번째 블록을 나타낸다.

• <input> : block이라는 숨겨진 입력 필드는 댓글 목록을 페이지별로 불러오기 위해 사용되며, 초기값은 1. block 값은 페이지가 바뀔 때마다 증가해서 서버에 요청을 보내 더 많은 데이터를 불러오는 데 사용된다.

• #morebtn : 전체 더보기 버튼이 포함된 div로 JavaScript를 통해 이 div 자체를 숨기거나 표시할 수 있다.

• #more : 더보기 기능을 수행하는 button 자체로 click 이벤트를 이 button에만 연결해 댓글을 추가로 로드하는 작업을 수행하게 한다.

2. 위에 있는 boardCommentList 가서 block 변수 설정.

코드 설명

let block = $("#block").val(); : #block이라는 id를 가진 input 태그의 value 값을 가져와 block 변수에 저장한다. 이 값은 현재 페이지의 댓글 블록 위치를 나타내고 더보기 버튼 클릭 시 댓글 페이지를 관리하는 데 사용됩니다.

block 변수는 요청할 댓글 페이지의 위치를 의미합니다.

이때 각 페이지에 어떤 댓글들이 보여져야 할지를 결정하는 값이 바로 block입니다.

서버에서는 block 값에 따라 어떤 페이지의 댓글을 반환해야 하는지 계산하여 클라이언트에게 전달합니다. 예를 들어 한 페이지에 15개의 댓글을 표시하고, block=1이면 첫 번째 15개의 댓글을, block=2이면 16번째부터 30번째까지의 댓글을 반환합니다.

3. 컨트롤러에 리스트로 가서 블럭 추가해주기

@RequestMapping(value="/{bidx}/{block}/commentList.aws")는 Spring에서 URL 경로에 매핑된 메서드를 정의하는 방법입니다. 이 경우 URL 패턴은 {bidx}와 {block}이라는 두 개의 변수로 구성되어 있으며, 이 변수들은 각각 URL 경로에서 동적으로 추출됩니다.

의미:
/{bidx}: URL 경로에서 bidx라는 값을 추출하여 메서드의 매개변수로 전달합니다. 이 값은 게시글 번호나 기타 고유 ID일 수 있습니다.
/{block}: URL 경로에서 block이라는 값을 추출하여 메서드의 매개변수로 전달합니다. 이 값은 페이지 블록 번호나 기타 관련 값일 수 있습니다.
/commentList.aws: 이 부분은 URL 경로의 고정된 부분으로, commentList.aws라는 형식을 갖는 경로로 요청을 받습니다.
예시:
URL 예시: /123/5/commentList.aws

이 URL에서:

{bidx}는 123이 되고,
{block}은 5가 됩니다.
이 값들은 @PathVariable을 사용해 메서드의 파라미터로 전달됩니다.

@PathVariable은 Spring Framework에서 사용하는 어노테이션입니다. 주로 @RequestMapping 또는 @GetMapping, @PostMapping과 같은 요청 처리 메서드에서 URL 경로에 포함된 값을 메서드의 매개변수로 전달할 때 사용됩니다.

예를 들어, @PathVariable은 URL 경로에서 특정 변수를 추출하여 메서드의 파라미터로 전달할 수 있게 해줍니다.

예시:
java
코드 복사
@GetMapping("/post/{bidx}")
public String getPost(@PathVariable("bidx") int bidx) {
// bidx는 URL 경로에서 추출된 값
System.out.println("게시글 번호: " + bidx);
return "postDetail";
}
위 코드에서 @PathVariable("bidx")는 URL에서 {bidx} 부분을 추출하여 메서드 파라미터 bidx에 값을 할당합니다. 예를 들어, 사용자가 /post/10과 같은 URL로 요청을 보내면, bidx는 10이 됩니다.

주요 특징:
@PathVariable의 값은 URL 경로에서 동적으로 추출됩니다.
메서드 파라미터와 URL 경로의 변수명이 동일하면 @PathVariable에 변수명을 생략할 수 있습니다.

4.서비스에 블럭 추가해주기

5. impl에도 넘겁쥑

이렇게 값이 두개인데, 타입이 같으면 해쉬맵으로 넘기지 않고 다른 방법으로 해볼거다

6. 코맨트 매퍼로 가서 똑가이 자성

7. IMPL에 가서

  <!-- 게시글 목록 조회 쿼리 -->
<select id="commentSelectAll" parameterType="int" resultType="cv">
select * from comment where delyn='N' and bidx=#{0} order by cidx desc limit #{1},15
</select>

7. 매퍼,xml로 가서 뒤에 limit를 넣는다. 하지만 같은 타입의 값을두개를 넘겼기 때문에 이걸 이름으로 부를 수 없고 배열 처럼 번호로 넘겨주면 되ㅏㄴ디.

해쉬맵을 권장하지만 타입이 같으면 배열 처럼 번호로 붙여서 써라, 라고 할 수도 있다/

---

갯수 뽑야낙

1. 컨트롤러에 추가하기

   public int commentTotalCnt(int bidx);

2. 사비스 가서 메서드 만들기

   public int commentTotalCnt(int bidx);

3. 매퓨ㅓ에더 똑같ㅊ이

   	@Override
   		public int commentTotalCnt(int bidx) {
   			int cnt = cm.commentTotalCnt(bidx);
   			return cnt;
   		}

4. impl로 가서 메서드 ㅏ만즐기

   <select id="commentTotalCnt" parameterType="int" resultType="int">
   select count(*) as cnt from comment where delyn='N' and bidx = #{bidx}
   </select>

5. 매퍼 xml가서 쿼리 머ㅏㄴ들기

6. 컨트롤러에서 수정

7. 보드 컨텐츠 가서 추가 작성ㅎ라기

8. 컨트롤러로 가서 넥스트 블럭 추가해죽;

9. 보드 컨텐츠로 돌아와서 또 추가//

10. 컨트롤러 또 수정..

11. 마지막에 이걸 해야 더보기 버튼을 눌렀을 때 다시 리스트가 호출되면서 가능해진다.

12. 그리고 댓글을 새로 작성했을 때 댓글이 15개에서 30개로 늘어나는것을 볼 수가 있는데, 이건 value를 다시 1로 설정을하면 15개만 보여지게 된다.