프롬프트 AI&OpenAPI&공공데이터를 활용한 웹앱개발자 양성 과정 44일차

1. 강사님 코드 분석(조회수)

1. article 테이블에 hitCount 칼럼 추가. defaultValue는 0으로 설정.
2. url의 user/article/detail로 들어온 경우, increaseHitCount(id) 메소드 호출
3. increaseHitCount는 article 테이블의 id값이 일치하는 row의 hitcount칼럼값을 1증가시키는 메소드
4. hitCount 칼럼을 article vo에 추가하여, 리스트 화면이나, 디테일 화면에서 조회 가능하도록 변경
5. 시점상 조회수를 올려주는 처리가, detail의 row를 가져오는 처리보다 먼저 이루어져야한다.
6. 서비스의 increaseHitCount의 리턴 타입을 ResultData로 변경하고, 만약에 해당 게시물이 없었을 때는 에러 메시지를 반환하여, js 뷰로 이동하도록 변경.
7. url매핑을 hit카운트를 올려주고 해당 hit 카운트를 반환하는 doIncreaseHitCountRd과, 단순하게 hit카운트 증가없이 게시글을 보여주는 detail로 분리. -> (왜? 좋아요에 앞서서 ajax를 사용해보기 위해)
8. ajax 요청을 통해 doIncreaseHitCountRd 호출

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

개인의견 -> 이렇게 쓰면 약간 더 깔끔하지 않을까?

    $.get( "../article/doIncreaseHitCountRd", { id: params.id } )
      .done(function( result ) {
    	  $('.article-detail__hit-count').empty().html(result.data1);
      });

2. Ajax

정의:
Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법이다.

단순 예제:
$.ajax({
url: "script.php",
method: "POST",
data: { id : menuId }
}).done(function() {
$( this ).addClass( "done" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "complete" );
});

done-> 비동기 통신에 성공했을 때 처리.
fail-> 비동기 통신에 실패했을 때 처리.
always-> 어느 경우에든 처리.

3. 로컬스토리지

4. 과제 - 한번 본 게시글에 대한 조회수 체크 처리

처음 게시글에 들어왔을 때, localstorage에 'isAlradyHit + 게시글id' 의 조합으로 이루어진 데이터를 저장하고,
해당 데이터가 없는 경우에만, 조회수 업데이트 처리를 하도록 한다.