7월 10일 월요일 TIL 회고록

게시글 조회 페이지 구현

---

최종 구현 페이지 (결과물)

---

1. html 전체 게시글 조회 구현

HTML에서 구현하려고 하니 딱히 구글링을 해도 안나와서 정말 애먹었고 고생했다. 

전부 jsp를 사용해서 JSTL을 사용해서 편하게 body부분에 forEach를 사용해서 구현했는데 나는 HTML이라 JSTL이 적용이 안되었다.

HTML 대신 jsp를 사용하려고 했으나 (새로 jsp 파일을 만들고 HTML에 있던 내용들을 전부 복붙) 막상 실행하고 jsp로 들어가면 들어가지지 않고 다운로드가 되서 포기했다.

그래서 생각한 방법은 ajax에서 반복문을 돌려서 구현하자고 생각을 했다.

처음에 for문을 사용해 반복문을 돌렸는데 작동은 잘 되나 최종 결과물처럼 예쁘게 나오지 않고 붙어나와서.. 멘붕이 왔다.

// 예시
for(var i = 0; i < response.content.length; i++) {
    $('#boardId').append('#response.content[i].id);
    $('#boardTitle').append('#response.content[i].title);
}

번호	제목	글쓴이	작성일	조회	추천
21	안녕제목	ttdangdoong	20230710~~	01	00

이런식으로 붙어나왔다.

 

그래서 구글링을 하고 생각해 본 결과 for문 대신 forEach문을 사용하면 될 것 같아 forEach문을 사용했다.

	var html = '';
        response.content.forEach(Element => {

            html += '<tr>';
            html += '	<td>'+Element.id+'</td>';
            html += '   <td>'+Element.title+'</td>';
            html += '   <td>'+Element.username+'</td>';
            html += '   <td>'+Element.createdAt+'</td>';
            html += '   <td>'+Element.views+'</td>';
            html += '   <td>'+Element.boardLike+'</td>';
            html += '</tr>';
            });
            $("#boardList").html(html);
        });

var html = ''; 을 선언한다.

그 후 html에 tr, td를 사용해 Element.id, tile, username,createdAt,views,boardLike를 html에 넣는다.

.html을 사용해 화면에 그려준다.

 

밑에 블로그를 참고하여 만들었다.

https://gamma86.tistory.com/13

스프링부트 게시판 조회하기

실행 결과는 맨 위에 결과 사진처럼 이쁘게 잘 조회된다.

---

2. 조회 기능 구현

조회 기능 구현을 어떻게 해야하나 생각을 많이 했다.

먼저 중복 조회는 막아야한다. (막지 않으면 f5로 여러번 새로고침하면 조회수가 오르고 서버 부하가 일어날 수 있음.)

그래서 조회수 중복 카운트를 방지하는 여러가지 방법이 있다.

1. IP 또는 Mac Address
2. 세션
3. 쿠키

1.IP 또는 Mac Address로 처리했을 때의 장단점

 

장점

1. 조작이 불가하다. (해킹하지 않는한)

단점

1. IP는 장소에 따라 유동적으로 변할 수 있는 문제점이 있다.
2. Mac Address는 같은 유저라도 다른 기기라면 다른 유저로 식변된다.
3. IP와 Mac Address는 값이 길기 때문에 수많은 유저와 수많은 게시글과 날짜를 함께 저장하기에는 문제점이 있다.

2.세션으로 처리했을 때의 장단점

세션은 사용자 정보를 서버에서 관리하는 것이 특징이다.

 

장점

1. 사용자 정보를 서버에 둔다는 뜻은 쿠키보다 보안에는 좋다는 것을 의미한다,.
2. 저장 데이터에 제한이 없다. (서버 성능이 무한히 좋다는 가정이 있을 시)

단점

1. 서버에 데이터를 저장하므로 서버의 리소스를 사용하기 때문에 세선양이 많아진다면 서버에 부하가 커진다. 
   1. 비용, 성능과 직결될 수 이는 문제가 발생할 수 있다.

 

3. 쿠키로 처리했을 때의 장단점

쿠키는 웹사이트에 접속할 때 생성되는 정보를 담은 임시 파일이다.

쿠키의 데이터 형태는 Key와 Value로 구성되고 String 형태로 이루어져있다.

 

장점

1. 서버의 공간을 절약할 수 있다.

단점

1. 개인의 정보가 기록된다면 사생활을 침해할 소지가 있다.
2. 서버가 가지고 있는 것이 아니라 사용자에게 저장되기 때문에 임의로 고치거나 지울 수 있고, 가로채기도 쉬워 보안에 취약하다. 이는 곧 조회수를 조작할 수 있다는 것을 의미한다.

 

구글링을 하여 무엇을 적용할지 고민했는데, 지금 프로젝트는 레디스를 사용하고 있으므로, 레디스를 사용한 캐싱을 사용해보려고 한다.

Redis는 인메모리 데이터베이스로 I/O가 많이 발생하는 데이터를 처리할때 많은 이점을 얻어갈 수 있다. 예를 들어, 조회수와 같은 경우도 게시글이 조회될때마다, 빠른 시간안에 DB에 계속 query가 들어가며 계속해서 업데이트 해줘야 한다.

이런 경우, 서버에는 당연히 무리가 갈 것이고 이를 인메모리에 저장하여 성능에 이점을 챙겨갈 수 있다.

 

하지만 아직 레디스를 사용하진 않았다. 먼저 조회수 기능을 구현하였다.

 

먼저 Board 엔티티에 정수형 views 를 선언했다.

 

Board.class

  @Column(columnDefinition = "integer default 0", nullable = false)
  private int views;

 

BasicBoardRepository에 호출될 시 +1 카운트하는 쿼리문을 작성했다.

 

BasicBoardRepository.interface

  @Modifying(clearAutomatically = true, flushAutomatically = true)
  @Query("UPDATE Board b SET b.views = b.views + 1 WHERE b.id = :id")
  int updateView(@Param("id") Long id);

 

서비스단에서 선택 조회를 할 시 updateView를 호출해 조회수가 1 오르게 만들었다.

 

BasicBoardServiceImpl.class

  /* Views Counting */
  @Override
  @Transactional
  public int updateView(Long id) {
    return boardRepository.updateView(id);
  }

// 게시글 선택 조회
  @Override
  @Transactional(readOnly = true)
  public BasicBoardResponse getSelectBasicBoards(Long basicBoardId, User user) {
    BasicBoard basicBoard = getBasicBoardAndCheck(basicBoardId);
    boolean hasLike = boardLikeService.existLikesBoardIdAndUserId(basicBoardId, user.getId());

    int view = updateView(basicBoardId);

    // 이미지 찾기
    List<BoardImage> boardImages = boardImageRepository.findAllByBoardId(basicBoardId);

    List<String> imagePath = new ArrayList<>();

    for (BoardImage boardImage : boardImages) {
      imagePath.add(boardImage.getImagePath());
    }

    return new BasicBoardResponse(basicBoard, basicBoard.getUsername(), countLike(basicBoardId),
        hasLike, imagePath, view);

  }

 

실행 결과는 맨위에 사진처럼 조회수 카운트가 잘 된다.

내일 레디스를 사용해서 게시글 조회수를 구현하고, 프론트 부분도 기능을 더 구현해야겠다.

---

출처 :

https://dev-coco.tistory.com/113

Spring Boot JPA 게시판 조회수 기능 추가

https://velog.io/@hwsa1004/Spring-Redis-Redis-%EC%82%AC%EC%9A%A9-%EB%B0%8F-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%A1%B0%ED%9A%8C%EC%88%98-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[Spring + Redis] Redis 사용 및 활용하여 게시글 조회수 구현하기

https://velog.io/@korea3611/Spring-Boot게시글-조회수-증가-중복방지-기능-만들기

[Spring Boot]게시글 조회수 증가, 중복방지 기능 만들기