📅 2024-02-13, 44일차

---

조회수 구현

Ajax

• Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
• Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능
  -TCP School

쉽게말해, 부분 새로고침!

• 상세보기 내의 조회수 증가를 Ajax로 처리가 가능하다

---

<iframe src ="url" frameborder="0"> </iframe>

---

localStorage

• 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해준다.
• 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있는다.
  • 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않고 쿠키보다 더 많은 자료를 보관할 수 있다.
  • 로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당된다.
• 오직 문자형(string) 데이터 타입만 지원한다.
  • object와 integer는 string으로 자동 변환

localStorage 사용방법

var cat = localStorage.getItem('myCat'); //조회
localStorage.setItem('myCat', 'Tom'); //추가
localStorage.removeItem('myCat'); //삭제
localStorage.clear(); // 전체삭제

조회수 기능에서의 문제상황 :

• 이미 본 게시물을 새로고침 할 때마다 조회수가 올라감

• localStorage를 활용하여,

  한번 본 게시물에 대한 조회수 처리

  내가 시도한 방법

<script>

	function ArticleDetail__doIncreaseHitCount() {
		
///////////////////////////나의 시도///////////////////////////////
		const hitId = localStorage.getItem("hitId");
		const id = ${article.id};
		const hitCount = localStorage.getItem("hitCount");

		// 새로고침 여부 확인
		if (hitId == id && hitCount == 1) {
			return;
		}

		// localStorage에 현재 url 저장
		localStorage.setItem("hitId", id);
		localStorage.setItem("hitCount", 1);
  
  ///////////////////////////나의 시도///////////////////////////////

  		// Ajax - 게시물 클릭 시 조회수 증가 
		$.get('../article/doIncreaseHitCountRd', {
			id : params.id,
			ajaxMode : 'Y'
		}, function(data) {
			$('.article-detail__hit-count').empty().html(data.data1);
		}, 'json');
	}

	$(function() {
		// ArticleDetail__doIncreaseHitCount();
		setTimeout(ArticleDetail__doIncreaseHitCount, 2000);
        //2초 후 ArticleDetail__doIncreaseHitCount() 실행(조회수 증가)
	})
</script>

강사님의 방법

<script>
	function ArticleDetail__doIncreaseHitCount() {
  
  ///////////////////////////강사님///////////////////////////////
		
		const localStorageKey = 'article__' + params.id + '__alreadyView';

		if (localStorage.getItem(localStorageKey)) {
			return;
		}

		localStorage.setItem(localStorageKey, true);
  
 ///////////////////////////강사님///////////////////////////////

		$.get('../article/doIncreaseHitCountRd', {
			id : params.id,
			ajaxMode : 'Y'
		}, function(data) {
			$('.article-detail__hit-count').empty().html(data.data1);
		}, 'json');
	}

	$(function() {
		// 		ArticleDetail__doIncreaseHitCount();
		setTimeout(ArticleDetail__doIncreaseHitCount, 2000);
	})
</script>

---

좋아요 구현

• 디테일jsp에서 좋아요 버튼을 클릭 하면
  컨트롤러로 요청
• 좋아요 메서드가 따로 있어야 하나?
• 조회수 증가 한 방식과 비슷하게?
• jsp에 먼저 보여지게 구현해보자

문제상황:
-> 좋아요 클릭 시 +1 증가하지만, 누를때마다 증가 됨
-> 좋아요 클릭 후, detail페이지로 돌아가지 못함

---

DB에 좋아요 테이블 구현

• id
• boardId
• memberId
• likeCount (default 0)

Article에 likeCount컬럼 추가 o

1. 게시글 조회
2. 좋아요버튼 클릭
   (로그인 체크 -> 좋아요 기능 구현 후 추후에 처리)
3. 좋아요 클릭 +1 처리
4. 싫어요 클릭 -1 처리