2024-02-13(44일차) - Spring

민짱·2024년 2월 13일

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

목록 보기

44/85

📅2024. 02.13 44일차

🎬2024_01_Spring_AM

조회수 구현

게시글 조회수 구현

ArticleController의 showDatil에 Service로 넘길 수 있도록 만든다.

articleService.increaseHitCount(id);

Service에서 Repository로 넘긴다.

public void increaseHitCount(int id) {
		articleRepository.increaseHitCount(id);
	}

조회수를 증가시키는 쿼리문을 만든다.

@Update("""
			UPDATE article
			SET hitCount = hitCount + 1
			WHERE id = #{id}
			""")
	public void increaseHitCount(int id);

Article vo에 private int hitCount; 추가하고 조회수가 나오게 끔 list.jsp에 조회수를 추가한다.

문제점

없는 글에 대한 처리가 없다.

해결방법

ArticleController에서 ResultDate로 바꾼다.

ResultData increaseHitCountRd = articleService.increaseHitCount(id);

		if (increaseHitCountRd.isFail()) {
			return rq.historyBackOnView(increaseHitCountRd.getMsg());
		}

ArticleService에서 없는 글에 대한 처리를 해준다.

public ResultData increaseHitCount(int id) {
		int affectedRow = articleRepository.increaseHitCount(id);

		if (affectedRow == 0) {
			return ResultData.from("F-1", "해당 게시물 없음", "id", id);
		}

		return ResultData.from("S-1", "해당 게시물 조회수 증가", "id", id);

	}

게시물 상세보기 페이지에서 조회수 증가를 ajax로 처리

<script>
	function ArticleDetail__doIncreaseHitCount() {
		$.get('../article/doIncreaseHitCountRd', {
			id : params.id,
			ajaxMode : 'Y'
		}, function(data) {
			$('.article-detail__hit-count').empty().html(data.data1);
		}, 'json');
	}
	
	$(function() {
		// 실전코드
		//ArticleDetail__increaseHitCount();
		// 연습코드
		setTimeout(ArticleDetail__increaseHitCount, 2000);
	})
</script>

jQuery에서 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드사용
../article/doIncreaseHitCountRd해당 uri는 이동시 조회수 증가를 시킴
$('.article-detail__hit-count').empty().html(data.data1) :
class가 article-detail__hit-count인 태그의 값을 비우고 data.data1로 채움
data는 doIncreaseHitCountRd uri로 이동시 반환받는 resultData타입의 객체를 json형식으로 받아옴
서버에 요청하여 받은 data가선택
$(function(){ ArticleDetailincreaseHitCount() }) : DOM객체가 생성되는 시점에 ArticleDetailincreaseHitCount() 실행

조회수 증가 성공에 따른 결과에 Id 정보 추가

@RequestMapping("/usr/article/doIncreaseHitCountRd")
	@ResponseBody
	public ResultData doIncreaseHitCountRd(int id) {

		ResultData increaseHitCountRd = articleService.increaseHitCount(id);

		if (increaseHitCountRd.isFail()) {
			return increaseHitCountRd;
		}

		ResultData rd = ResultData.newData(increaseHitCountRd, "hitCount", articleService.getArticleHitCount(id));

		rd.setData2("id", id);

		return rd;

	}

increaseHitCountRd : 조회수 증가에대한 결과
조회수 증가 성공시 결과에 rd.setData2("id",id)메소드를 통해 id를 추가

ResultData.class

	@Getter
	private Object data2;
	@Getter
	private String data2Name;
	
    ~~~@생략@~~~
    
	public void setData2(String data2Name, Object data2) {
		this.data2Name = data2Name;
		this.data2 = data2;
	}

data2 , data2Name 필드 추가
setData2 : data2, data2Name을 초기화 하는 메소드

조회수 중복 증가 제거

localStorage를 이용해서 중복 증가를 막자.

function ArticleDetail__doIncreaseHitCount() {
		const localStorageKey = 'article__' + params.id + '__alreadyView';
		
		if(localStorage.getItem(localStorageKey)){
			return;
		}
		
		localStorage.setItem(localStorageKey,true);

같은 브라우저에서 상세보기 페이지 새로고침시 조회수가 증가되는 것을 방지 하기위해 로컬스토리지에 정보를 남김

오늘의 개념

Ajax

Ajax는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 다만 요즘은 XML보다는 JSON을 주로 사용한다.
브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고도 페이지 일부만을 변경할 수 있도록 javascript를 실행해 서버에 데이터만을 별도로 요청하는 기법이다.
HTTP 프로토콜을 이용한 비동기 통신이며 브라우저는 정적 HTML 파일과 CSS파일, 데이터를 어떻게 요청하면 되는지를 설명한 javascript를 통해 HTML,CSS를 이용해 골격을 먼저 형성하고 ajax 실행 부가 담긴 javascript 영역을 실행하여 데이터를 별도로 가져와 적절한 방법으로 데이터를 끼워 넣은 후 페이지를 로딩한다.

자주 쓰이는 설정값

메소드 종류

GET : 데이터를 읽거나 검색할 때 주로 사용되는 메소드
POST : 새로운 리소스를 생성할 때 주로 사용되는 메소드
PUT : 리소스를 생성/업데이트 할 때 주로 사용되는 메소드
DELTE : 지정된 리소스를 삭제할 때 주로 사용되는 메소드

웹 스토리지(web storage)

클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술

로컬 스토리지(localStorage)

웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
local storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 이 로컬스토리지를 사용하면, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있다.
이 로컬 스토리지는 보통 사용자의 로그인 정보나 설정 등을 저장하기 위해 사용된다.
한 번 본 게시물에 대한 조회수 처리