Spring - Cookie, Cookie를 이용하여 팝업창 30초동안 닫는 퀴즈 (2022-10-17)

Spring - Cookie, Cookie를 이용하여 팝업창 30초동안 닫는 퀴즈 (2022-10-17)

2022. 10. 18. 00:43ㆍ3층 1구역 - 개발의 장/Spring

1. 서론

쿠키를 생성하는 과정에 대해 알아보도록 하자.

2. 본론

CoockieController.java

package com.care.cs.cookie;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.GetMapping;


@Controller
public class CookieController {

//	http://localhost:8085/cs/index
	@GetMapping("index")
// 서버가 cookie를 만들어 줘야 하기 때문에 HttpServletResponse(서버가 클라이언트로 보내는 응답정보 처리)사용
	public String index(HttpServletResponse res) {
//		cookie변수로 새로운 Cookie를 선언한 후 쿠키의 이름("cookieName"), 쿠키값("쿠키즈")를 설정
		Cookie cookie = new Cookie("cookieName", "쿠키즈");
//		쿠키를 추가
		res.addCookie(cookie);
//		경로값 반환, 그래서 사용자는 index.jsp페이지를 들어왔을 때 부터
//		쿠키의 이름이 cookieName이며 쿠키의 값이 쿠키즈 인 쿠키를 하나 받게 됨.
		return "cookie/index";
	}
	
//	http://localhost:8085/cs/cookie/result
	@GetMapping("cookie/result")
//	클라이언트가 "나 내가 받은 쿠키가 뭔지 보고 싶어" 라고 말하며 자신이 받은 쿠키를 서버에게 들이밀며 확인 요청하기 
//	때문에 HttpServletRequest를 사용.
	public String result(HttpServletRequest req, Model model) {
//		받아온 쿠키를 cookies라는 변수로 Cookie변수에 넣음.
		Cookie[] cookies = req.getCookies();
//		for문을 돌려
		for(Cookie c : cookies) {
//			만약에 배열이 받은 쿠키의 이름이 cookieName이면
			if(c.getName().equals("cookieName")) {
//				Attribute로 쿠키이름 설정하고 쿠키값을 얻어온다.
				model.addAttribute("cookieName", c.getValue());
			}
		}
//		경로값 반환
		return "cookie/result";
	}
	
	@GetMapping("cookie/result2")
	public String result2(@CookieValue(value = "cookieName2", required = false) Cookie c, Model model) {
		//기본값은 무조건 쿠키가 있어야 하는데, required = false를 넣게 되면 쿠키가 있으면 주고, 없으면 null을 보여준다.
		
		if(c != null)
		model.addAttribute("cookieName", c.getValue());
		
		return "cookie/result";
	}
}

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
	<a href="cookie/result">쿠키 확인하러 가기</a>
</body>
</html>

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>result</title>
</head>
<body>
	<h3>쿠키의 값 출력하기</h3>
	<h4>${cookieName }</h4>
</body>
</html>

controller로 인해서 사용자가 index.jsp에 들어가는 순간 서버가 쿠키를 만들어 나에게 전달한다.

그 쿠키는 cookieName이란 이름을 갖고 있으며 value값은 쿠키즈 일 것이다.

한번 시도해보자!!

index.jsp에 들어오면서

이름이 cookieName이며 값이 쿠키즈 인 쿠키를 부여받았다.

'쿠키 확인하러 가기' 를 클릭하면?

값이 동일하다.

2-1. 팝업창 30초동안 안 보이게 하는 퀴즈

이번에 쿠키를 이용해서 팝업창에 체크박스에 표시했을 때 30초동안 닫히는 퀴즈를 하나 풀어보자.

CookieQuizController.java

package com.care.cs.cookie;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class CookieQuizController {
// 경로가 동일하기 때문에 return값을 부여할 필요 없음.
	@RequestMapping("cookie/cookie") public void cookie() {}
// 경로가 동일하기 때문에 return값을 부여할 필요 없음.
	@RequestMapping("cookie/popup") public void popup() {}
	@RequestMapping("cookie/make")
	public String make(HttpServletResponse response) {
		Cookie coo = new Cookie("quizName", "quizValue");
		coo.setMaxAge(30);
		response.addCookie(coo);
		
		return "redirect:popup";
	}
}

cookie.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cookie</title>
<c:if test="${empty cookie.quizName.value }">
	<script>
			window.open("popup", "", "width=500,height=300,top=300,left=500");
	</script>
</c:if>
</head>
<body>
	<h3>쿠키 페이지 입니다.</h3>
	${cookie.quizName.value }
</body>
</html>

위 코드에서 c:if로 만약 만들어진 쿠키가 없다면 팝업창을 띄우게 된다.

현재 쿠키가 존재하지 않기 때문에 팝업창이 띄워진걸 볼 수 있다.

체크박스에 체크하고 새로고침 하면 이렇게 쿠키가 만들어진다.

popup.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>popup</title>
<c:if test="${ cookie.quizName.value == 'quizValue'}">
	<script> window.close(); </script>
</c:if>
</head>
<body>
	
	<h3>팝업페이지</h3>
	<h4>광고 광고</h4>
	<br><br><br>
	<input type="checkbox" 
	onclick="location.href='make'">30초  동안 닫기
</body>
</html>

위 코드에서 체크박스에 체크하게 되면 make에 요청맵핑이 보내지며

요청을 받은 make는 Controller에서 30초 동안 유지가 될 쿠키를 만든다.

저작자표시

'3층 1구역 - 개발의 장 > Spring' 카테고리의 다른 글

Spring - 세션을 이용하여 로그인해보는 퀴즈(2022-10-18) (0)	2022.10.18
Spring - session (2022-10-17) (0)	2022.10.18
Spring - Member관련 모든 코드 (2022-10-17) (0)	2022.10.17
Spring - 회원가입 하여 회원목록 보여주는 퀴즈(2022-10-17) (0)	2022.10.17
Spring - return의 반환 종류와 출력 (2022-10-17) (0)	2022.10.17

상이태상의 도서관