[게시판] 조회수

게시판의 기본 CRUD 기능은 끝났으니 이제 부가적인 기능을 넣어보겠습니다.

부가적인 기능으로는 조회수, 좋아요, 댓글, 대댓글 정도를 구현해 볼 생각이구요.

먼저 조회수 기능부터 추가해보겠습니다.

 

---

 

 [ 클라이언트 ] 

BoardList.js 

 

BoardView.js

 

조회수를 출력해줄수있는 부분을 작성해줍니다.

 

 

---

 

 

 [ 서버 ]  

BoardEntity.java

• columnDefinition = "integer default 0”
  조회수의 기본값은 0 이라는 코드를 추가해줍니다.

BoardDTO.java

추가 X

 

BoardRepository.java

package com.example.demo.repository;

import com.example.demo.entity.BoardEntity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

@Repository
public interface BoardRepository extends JpaRepository<BoardEntity, Long> {

    @Modifying
    @Transactional
    @Query("update board b set b.views = b.views + 1 where b.id = :id")
    int updateView(@Param("id") Long id);

}

이 메서드는 JpaRepository 인터페이스에 정의된 기본 메서드가 아니므로 직접 구현해줍니다.

• @Modifying: 이 어노테이션은 해당 쿼리가 데이터를 수정하는 작업임을 나타냅니다. Spring Data JPA는 기본적으로 읽기 전용 쿼리를 실행하므로, 데이터를 수정하는 작업에는 @Modifying 어노테이션을 추가해야 합니다.
• @Transactional: 이 어노테이션은 해당 메서드가 트랜잭션 내에서 실행됨을 나타냅니다. JPA의 경우 데이터베이스 트랜잭션 내에서 쿼리를 실행해야 합니다. 
• @Query("update board b set b.views = b.views + 1 where b.id = :id"): 이 어노테이션은 JPQL(Java Persistence Query Language) 쿼리를 사용하여 데이터베이스 엔티티를 업데이트하는 쿼리를 정의합니다. 여기서 update 키워드를 사용하여 board 엔티티의 views 필드를 1씩 증가시키는 쿼리를 정의하고 있습니다. 
• int updateView(@Param("id") Long id):  @Query 어노테이션에 정의된 JPQL 쿼리를 실행합니다. 이 메서드는 주어진 게시글 ID에 해당하는 게시글의 조회수를 1 증가시키는 쿼리를 실행합니다.

 

BoardService.java

	// 조회수
	public int updateView(Long id) {
		return boardRepository.updateView(id);
	}

BoardRepository 인터페이스의 updateView 메서드를 호출하여 조회수를 업데이트합니다.

 

BoardController.java

	/**
	 기능 : 게시글 목록 및 상세보기
	 url : /board
	 request data : id (optional)
	 response data : 게시글 목록 또는 특정 게시글 상세정보
	 */
	@GetMapping("/board")
	public Object board(@RequestParam(name = "id", required = false) Long id) {
		if (id == null) {
			// 게시글 목록 반환
			return boardService.board();
		} else {
			// 특정 게시글 상세 정보 반환 및 조회수 증가
			boardService.updateView(id);
			return boardService.boardDetail(id);
		}
	}

• boardService.updateView(id);
  특정 게시글을 상세조회 했을 때 서비스단의 updateView 메서드를 실행하여 조회수가 업데이트 될 수 있도록 합니다.

 

---

💻 [ 결과 ]  

특정 게시글을 조회했을 때 조회수가 증가는 되지만, +1 이 아닌 +2씩 되는 문제점이 있습니다.

 

 

---

 

 

💣 [ 트러블 슈팅 ]  조회수가 +2씩 증가되는 이슈 

문제

 

특정 게시글을 조회했을 때 조회수가 +2씩 증가되는 문제가 있습니다.

콘솔창을 보니 애초에 두번씩 렌더링 되는 것을 확인할 수 있었습니다.

 

원인

먼저 useEffect가 몇 번씩 호출되나 확인해보려고 로그를 찍어봤습니다.

 

확인해본 결과 useEffect는 한 번씩 잘 호출되고 있습니다.

그럼 무엇이 원인일까요..

구글링을 하여 해결할 수 있었는데 원인은 React Strict Mode 였습니다!

React Strict Mode는 개발 중에 잠재적인 문제를 발견하기 위해 일부 라이프사이클 메서드를 두 번 호출합니다. 이를 해결하기 위해 Strict Mode를 제거하거나, 배포 환경에서 확인할 수 있다고 합니다.

 

해결

• Strict Mode 비활성화: Strict Mode를 제거하여 두 번 렌더링되는 문제를 해결할 수 있습니다.
• 배포 환경에서 확인: 배포 환경에서는 Strict Mode가 비활성화되므로, 두 번 호출되는 문제가 발생하지 않습니다.

일단 개발 모드이기 때문에 index.js에서 Strict Mode를 주석처리 해주었습니다.

 

 

💻 [ 결과 ]  

+1 씩 증가되는 것을 확인할 수 있습니다.