16주차 - Spring (5) 쿠키(cookie)를 사용해보자

2022. 10. 18. 19:30Spring framwork

이번의 목표

01. 쿠키(cookie)를 만들어보자.

02. 클라이언트에게서 쿠키를 받아보자.

03. 이를 응용하여 팝업창을 만들어보자.


이번 시간에는 쿠키를 생성하고 이를 응용하는 예제를 만들어보겠습니다.

 

01.쿠키(Cookie)를 만들어보자.

쿠키를 만드는 코드의 예시는 아래와 같습니다.

	@RequestMapping("cookie/make")
	public String popup(HttpServletResponse res) {
		Cookie cookie = new Cookie("cookieName", "cookieValue");
		cookie.setMaxAge(30);
		res.addCookie(cookie);
		return "redirect:popup";
	}

쿠키는 생명주기라는 것이 있어 이를 조절하여 쿠키의 유지 시간을 설정할 수 있습니다.

이때, 시간의 입력 단위는 초 입니다. 코드는 위에서 사용된 setMaxAge() 입니다.

이렇게 생성한 쿠키를 사용자에게 전달하기 위해 사용되는것이 HttpServletResponse 입니다.

HttpServletResponse에는 addCookie라는 메서드가 있어 이를 통해 클라이언트에게 쿠키가 제공됩니다.

 

02. 클라이언트에게 쿠키를 받아오자.

이렇게 생성된 쿠키를 사용하기 위해 클라이언트로부터 받아오는 방법은 크게 두가지가 있습니다.

 첫번째 방법은 클라이언트의 쿠키를 배열로 받아, 이중에서 필요한 쿠키를 찾아 사용하는 것입니다.

코드 예시는 아래와 같습니다.

public String result(HttpServletRequest req, Model model) {
		
		Cookie[] cookies = req.getCookies();
		for(Cookie c : cookies) {
			if(c.getName().equals("cookieName")) {
				model.addAttribute("cookieName", c.getValue());
			}
		}
		return "cookie/result";
	}

클라이언트가 가지고 있는 쿠키를 모두 받아와, 향상for문을 이용하여 원하는 쿠키값을 찾아내는 방법입니다.

 

두번째는 처음부터 원하는 이름의 쿠키를 찾아서 받아오는 방법입니다.

코드 예시는 아래와 같습니다.

public String result(
		@CookieValue(value = "cookieName", required = false)Cookie c, Model model) {
		if(c != null) {
			model.addAttribute("cookieName", c.getValue());
		}
		return "cookie/result";
	}

이때에는 @CookieValue 어노테이션을 이용하여 매개변수에 쿠키의 값을 저장해줘야합니다. 그리고 알아두어야할 것은 @CookieValue는 반드시 쿠키를 가져오려 하기 때문에 쿠키가 없는 상태에서 위의 메서드가 작동할 경우 에러가 발생합니다. 그렇기 때문에 required=false 속성을 이용하여 해당 쿠키가 반드시 필요한 것은 아님을 설정해야합니다.

 

이제 쿠키를 생성하고, 클라이언트로부터 쿠키를 받아오는 방법을 알았으니 이를 이용한 예제를 만들어보겠습니다.

 

01. 페이지 코드
02. 팝업 코드
03. 컨트롤러 코드

 

01. 페이지 코드

<!-- cookieName 이라는 이름의 쿠키의 값이 비어있는지 체크하여 없다면 팝업창 생성 -->
<c:if test="${empty cookie.cookieName.value }"> 
	<script type="text/javascript">window.open('popup','_blank','width=300 height=300 left=100 top=100')</script>
</c:if>
<body>
<h1>쿠키 페이지 입니다.</h1>
${cookie.cookieName.value }

02. 팝업 코드

<!-- 팝업이 생성되어 페이지로 돌아왔을때 쿠키가 있음을 체크후 팝업 종료 -->
<c:if test="${cookie.cookieName.value == 'cookieValue' }">
	<script type="text/javascript">window.close()</script>
</c:if>
<h1>팝업페이지</h1>
<h3>광고 광고</h3>
${cookie.cookieName.value }<br>
${cookie.cookieName}<br>
<input type="checkbox" name="chk" id="chk" onclick="location.href='make'">
<label for="chk">30초 동안 닫기</label>

03. 컨트롤러 코드

	//메인 페이지 이동 코드
	@GetMapping("cookie/cookie")
	public String cookie() {
		return "cookie/cookie";
	}
	
	//팝업 페이지 이동 코드
	@GetMapping("cookie/popup")
	public String popup() {
		return "cookie/popup";
	}

	// 쿠키 생성 코드
	@RequestMapping("cookie/make")
	public String popup(HttpServletResponse res) {
		Cookie cookie = new Cookie("cookieName", "cookieValue");
		cookie.setMaxAge(30);
		res.addCookie(cookie);
		return "redirect:popup";
	}

 

이때 체크할 것으로 쿠키가 생성된 후 return을 forward로 하게 되면 새로운 요청이 발생하지 않고 popup의 view만 출력하고 있는 상태이기 때문에 화면이 꺼지지 않습니다. 새로운 request가 발생하도록 하기 위해서는 redirect로 해야함을 체크하면 좋겠습니다.