기능구현

  • 회원가입(주소API연동, 이메일 인증, ajax를 사용하여 아이디 중복검사)
  • 관리자 페이지(인터셉터 적용, 상품관리, 회원관리)
  • 업로드(이미지 등록, 수정, 삭제)
  • 검색
  • 페이징
  • 구매(장바구니, 포인트사용)
  • 댓글(등록,수정,삭제)
  • 중간에 막혔거나 에러 해결 못하겠으면 yoonbitnara@gmail.com 으로 문의


gnb영역에서 로그인한 상황에서 나타나는 로그아웃 버튼의 기능 구현을 목표로 한다.
저번 포스팅에서 구현한 로그아웃 버튼과 같이 세션을 제거하는 것이 핵심이다.
이번 포스팅에선 세션 제거를 요청하는 방식을 비동기 방식으로 구현하고자 한다.


순서

  • 전체 흐름
  • Javascript 처리
  • 서버 메서드 작성(MemberController.java)
  • 테스트


전체 흐름

  • 저번 포스팅에서 구현했던 로그아웃 메서드의 경우 메서드 작업이 완료된 뒤 지정된 특정 화면으로만 이동되도록 하였다.
  • 로그아웃 버튼의 경우 거의 모든 페이지에 삽입되어야 하는데 이럴경우 페이지가 많아지면 그 페이지수만큼 그에 맞는 로그아웃 메서드를 작성해야 한다.
  • 이번에 구현하고자 하는 로그아웃은 특정 화면으로 이동없이 현 페이지가 새로고침 됨으로써 화면의 구성이 바뀌도록 하는 것이 목표이다.
  • 전체적인 흐름은 로그아웃 버튼을 자바스크립트를 통해 동작하게 만들고 ajax를 통해 서버에 로그아웃 메서드를 요청하도록 할 것이다.
  • 로그아웃 메서드가 수행이 완료되면 다른 화면으로 이동 없이 요청한 페이지에서 새로고침 되어 로그아웃 되었을 때의 화면 구성으로 변환 되도록 작성할 것이다.


로그아웃 버튼 클릭 -> 자바스크립트 버튼 메서드 작동 -> ajax 통해 로그아웃 요청
-> 서버 로그아웃 수행 - 화면 이동없이 새로고침을 통해 화면 변환


Javascript 처리

  • 제이쿼리르 사용할 것이기 때문에 메인 페이지 상단에 먼저 제이쿼리 url 스크립트 태그를 추가한다.


<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>



  • 먼저 gnb영역의 로그아웃 문구를 a태그로 감싼다. 단 a태그는 url경로를 추가해주는 것이 아니라 단순히 id속성만 부여한다.


<a id="gnb_logout_button">로그아웃</a>



  • 로그아웃 버튼을 동작하는 메서드 코드를 작성하여 해당 메서드가 작동을 하는지 테스트를 해본다.




  • 로그아웃을 POST방식으로 요청하는 ajax코드를 아래와 같이 작성한다.
  • 로그아웃을 요청하는 url 메서드는 다음순서에서 작성한다. success 옵션에서 해당 요청이 정상적으로 수행되었는지 확인하기 위해 alert창이 뜨도록 작성하였고 현재의 페이지가 새로고침 되도록 작성했다.
    • 새로고침을 해주어야 세션의 변경사항이 화면에 반영되기 때문


<script>
/* gnb_area 로그아웃 버튼 */
$("#gnb_logout_button").click(function () {
	//alert("버튼 클릭함");
	$.ajax({
		type:"POST",
		url:"/member/logout.do",
		success:function(data){
			alert("로그아웃 하였습니다.");
			document.location.reload();
		}
	}); // ajax
});

</script>


서버 메서드 작성(MemberController.java)

  • MemberController.java에 뷰에서 요청하는 url의 메서드를 작성한다.
  • 주의할 점은 ajax를 통해 서버에 요청을 하는 방식이기 때문에 해당 메서드에 반드시 @ResponseBody어노테이션을 붙여주어야 한다는 점이다.
  • 뷰에 특정 데이터를 전달해야 할 경우 반환 방식을 String으로 하면 되지만 메서드의 작업만 수행하면 되기 때문에 메서드의 반환 방식은 void로 하였다.
  • 메서드 구현부는 지난번 포스팅에서의 로그아웃 메서드 구현부와 같이 단순히 세션의 정보를 제거해주는 코드를 작성하였다.


	/* 비동기방식 로그아웃 메서드 */
	@ResponseBody
	@RequestMapping(value = "logout.do", method = RequestMethod.POST)
	public void logoutPOST(HttpServletRequest request) throws Exception {
		
		logger.info(">>>>>>>>>>>>>>>>>>>>>>>>> 비동기 로그아웃 메서드 진입");
		
		HttpSession session = request.getSession();
		
		session.invalidate();
	}


TEST

  • 기능이 정상적으로 작동하는지 테스트를 합니다.(로그확인)





Leave a comment