[JSP] 쿠키(Cookie)

이지현·2022년 4월 10일

[국비지원 공부하기]Jsp

목록 보기

9/9

📕 1. 쿠키(`Cookie`)란?

1-1. 쿠키(`Cookie`)란?

클라이언트의 상태 정보를 유지하기 위한 기술이다.

상태 정보를 클라이언트에 키와 값 형태로 저장했다가 다음 요청시 저장된 쿠키를 함께 전송한다
그러면 웹 서버는 브라우저가 전송한 쿠키로부터 필요한 데이터를 읽어올 수 있다.

_쿠키 표준에는 다음과 같은 제약이 있다고 한다. 아래를 확인해 보자!_

1. 3000개까지 만들 수 있다.
1. 쿠키 하나의 최대 크기는 4096 바이트 이다.
1. 하나의 호스트나 도메인에서 최대 50개까지 만들 수 있다.

📕 2. 쿠키의 동작 구조

1. 클라이언트가 서버에 요청을 보낸다.
1. 서버가 쿠키를 생성하여 HTTP 응답 헤더 에 실어 클라이언트에 전송한다.
1. 클라이언트는 쿠키를 받아 저장해둔다.
  (이 시점에는 쿠키가 클라이언트에만 저장된 상태이므로 서버는 아직 쿠키를 사용할 수 없다.)
1. 클라이언트는 다음번 요청 시 저장해둔 쿠키를 HTTP 요청 헤더에 실어 보낸다.
1. 서버는 쿠키의 정보를 읽어 필요한 작업을 수행한다.

📕 3. 쿠키의 구성

이름	설명
이름(name)	쿠키를 구별하는 이름
값(value)	쿠키에 저장할 실제 데이터
도메인(domain)	쿠키를 적용할 도메인
경로(path)	쿠키를 적용할 경로
유지 기간(max age)	쿠키를 유지할 기간

3-1. 쿠키의 저장API

이름	설명
void setValue(String value)	- 쿠키의 값을 설정한다. 문자열을 입력하면 되는데, 쉼표나 세미콜론 같은 문자는 포함할 수 없다.

이름	설명
void setDomain(String domain)	- 쿠키에 적용할 도메인을 설정한다.
	- 주 도메인만 적요하고 싶다면 "도메인" 형태로 기술한다.
	- 주 도메인 외에 서브 도메인에도 적용하고 싶다면 ".도메인" 형태로 기술한다.
	(예시: setDomain(".nnnn.co.kr")로 설정하면 www.nnnn.co.kr은 물론 mail.nnnn.co.kr에도 쿠키가 적용된다.)

이름	설명
void setPath(String path)	- 쿠키가 적용될 경로를 지정한다. 지정한 경로와 그 하위 경로에까지 적용된다.

이름	설명
void setMaxAge(int expire_seconds)	- 쿠키가 유지될 기간을 초 단위로 설정한다.
	- 기간을 설정하지 않으면 웹 브라우저가 닫힐 때 쿠키도 같이 삭제된다.

그런데 왜 쿠키의 이름 설정하는것은 없을까?

그 이유는 쿠키의 이름은 생성자를 통해 설정하고, 생성 후에는 더 이상 이름을 변경할 수 없기 때문이다.

생성자의 형태는 아래를 통해 확인하자!

이름	설명
쿠키의 생성자	new Cookie(String name, String value)
	이름과 값을 받아 새로운 쿠키를 생성한다.

3-2. 쿠키의 읽는API

이름	설명
String getName()	쿠키의 이름을 반환한다.
String getValue()	쿠키의 값을 반환한다.
String getDomain()	쿠키가 적용되는 도메인을 반환한다.
String getPath()	쿠키의 적용 경로를 반환한다. 단, setPath()로 설정한 적이 없다면 null을 반환한다.
ubt getMaxAge()	쿠키의 유지 기간을 반환한다. 단, setMaxAge()로 설정한 적이 없다면 -1을 반환한다.

📕 4. 쿠키의 기본 조작법

쿠키를 생성하고 기본 동작을 활인할 수 있는 간단한 예제를 보면서 배워보자!

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<head><title>Cookie</title></head>
<body>
    <h2>1. 쿠키(Cookie) 설정</h2>
    <%
	    Cookie cookie = new Cookie("myCookie", "쿠키맛나요");  // 쿠키 생성
	    cookie.setPath(request.getContextPath());			// 경로를 컨텍스트 루트로 설정
	    cookie.setMaxAge(3600);  							// 유지 기간을 1시간으로 설정
	    response.addCookie(cookie);  						// 응답 헤더에 쿠키 추가
    %>

    <h2>2. 쿠키 설정 직후 쿠키값 확인하기</h2>
    <%
	    Cookie[] cookies = request.getCookies();  // 요청 헤더의 모든 쿠키 얻기
	    if (cookies!=null) 
	    {
	        for (Cookie c : cookies) 
	        {  
	        	// 쿠키 각각의
	            String cookieName = c.getName();  	// 쿠키 이름 얻기
	            String cookieValue = c.getValue();  // 쿠키 값 얻기
	            
	            // 화면에 출력
	            out.println(String.format("%s : %s<br/>", cookieName, cookieValue));
	        }
	    }
    %>

    <h2>3. 페이지 이동 후 쿠키값 확인하기</h2>
    <a href="CookieResult.jsp">
        다음 페이지에서 쿠키값 확인하기
    </a>
</body>
</html>

이름이 "myCookie" 이고 값이 "쿠키 맛나요" 인 쿠키를 생성한 후, 경로와 유지 기간을 설정해 응답 헤더에 추가했다.
cookie.setPath(request.getContextPath()); 에서 설정한 경로는 request 내장 객체 의 getContextPath() 로 얻어온 컨텍스트 루트 이다. 이클립스에서는 프로젝트명이 컨텍스트 루트로 사용된다
즉, 웹 애플리케이션 전체에서 쿠키를 사용하겠다는 의미이다.
2. 쿠키 설정 직후 쿠키값 확인하기 부분은 요청 헤더에 담겨있는 쿠키를 모두 가져와서 확장 for문 을 이용해 이름 과 값 을 화면에 출력한다.
쿠키를 삭제할 때는 쿠키 를 빈 값 으로 설정하고 유지 기간을 0 으로 부여하면 된다.

📕 5. 쿠키의 사용 예제 (1)

쿠키를 활용하여 간단한 예제를 만들어보자 !

5-1. 레이어 팝업창 제어

📍 PopupMain.jsp 📍
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String popupMode = "on";
	
	Cookie[] cookies = request.getCookies();
	if (cookies != null) 
	{
	    for (Cookie c : cookies) 
	    {
	        String cookieName = c.getName();
	        String cookieValue = c.getValue();
	        
	        if (cookieName.equals("PopupClose")) 
	        {
	            popupMode = cookieValue; 
	        }
	    }
	} 
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키를 이용한 팝업 관리</title>
	<style>
	    div#popup {
	        position: absolute; top:100px; left:100px; color:yellow;  
	        width:300px; height:100px; background-color:gray;
	    }
	    div#popup>div {
	        position: relative; background-color:#ffffff; top:0px;
	        border:1px solid gray; padding:10px; color:black;
	    }
	</style>	
</head>
<body>
<h2>팝업 메인 페이지</h2>
<%
    for (int i = 1; i <= 10; i++) 
    {
        out.print("현재 팝업창은 " + popupMode + " 상태입니다.<br/>");
    }

    if (popupMode.equals("on")) 
    {
%>
    <div id="popup">
        <h2 align="center">공지사항 팝업입니다.</h2>
        <div align="right">
	        <form name="popFrm">
	            <input type="checkbox" id="inactiveToday" value="1" />하루 동안 열지 않음
	            <input type="button" value="닫기" id="closeBtn" />
	        </form>
        </div>
    </div>
<%
    }
%>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
	$(function() 
	{
	    $('#closeBtn').click(function() 
	    {
	        $('#popup').hide();
	        const chkVal = $("input:checkbox[id=inactiveToday]:checked").val();
	        
	        $.ajax
	        ({
	            url : './PopupCookie.jsp',
	            type : 'get',
	            data : 
	            {
	            	inactiveToday : chkVal
	            },
	            dataType : "text",
	            success : function(resData) 
	            {
	                if (resData != '') 
	                {
	                	location.reload();
	                }
	            }
	        });
	    });
	});
</script>
</body>
</html>

📍 PopupCookie.jsp 📍
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>

<%
	String chkVal = request.getParameter("inactiveToday");
	
	if (chkVal != null && chkVal.equals("1")) 
	{
	    Cookie cookie = new Cookie("PopupClose", "off");	// 쿠키 생성 
	    cookie.setPath(request.getContextPath());  			// 경로 설정
	    cookie.setMaxAge(60*60*24);							// 유지 기간 설정
	    response.addCookie(cookie);							// 응답 객체에 추가 
	    
	    out.println("쿠키 : 하루 동안 열지 않음");  
	}
%>

체크박스 폼값을 받는다. [오늘 하루 열지 않음] 체크박스를 체크했다면 이 값으로 "1" 이 전달된다.
그런 다음 값이 "1" 이면 이름이 "PopupClose" , 값이 "off" 로 저장되고
경로는 컨텍스트 루트, 유지 기간은 하루 인 쿠키를 생성해 응답 객체에 추가 한다.

📕 6. 크롬 브라우저에서 쿠키 삭제하기

크롬의 경우 우측 상단의 [더 보기] 메뉴 에서 [설정] 을 클릭한다.
[개인정보 및 보안] 영역에서 [인터넷 사용 기록 삭제] 를 클릭한다.
[기본] 탭과 [고급] 탭에 보면 다양한 옵션이 있는데, 가장 최근의 쿠키만 삭제하려면 기간은 '지난 1시간' 으로 제한하고, '쿠키 및 기타 사이트 데이터' 항목을 체크한 후 [인터넷 사용 기록 삭제] 버튼을 클릭하면 된다.

📕 7. 쿠키의 사용 예제 (2)

7-1 로그인 아이디 저장

쿠키를 이용한 아이디 저장 시나리오는 다음과 같다!

로그인에 성공한 경우에만 쿠키를 생성 및 삭제한다.
쿠키에 저장된 아이디가 있으면 로그인 페이지에서는 아이디가 자동 입력된다.
[아이디 저장하기] 체크박스를 해제하고 로그인에 성공하면 쿠키가 삭제된다

로그인 페이지를 보기 전에 JSP에서 자바스크립트를 사용하기 위한 클래스를 먼저 작성하도록 하자!

이번 절에는 메시지 알림창을 띄운 후 다음 페이지나 이전 페이지로 이동하는 자바스크립트 코드가 필요하다

script 코드를 쓰게되면 소스가 지저분해지고 반복되는 코드가 많아지기에 별도의 도우미 클래스를 만들어 놓자!

📍 별도의 도우미 클래스: JSFunction.java 📍
package utils;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;
import javax.servlet.jsp.JspWriter;

public class JSFunction {
	
    // 메시지 알림창을 띄운 후 명시한 URL로 이동합니다.
    public static void alertLocation(String msg, String url, JspWriter out) 
    {  	
        try 
        {
            String script = ""  // 삽입할 자바스크립트 코드
                          + "<script>"
                          + "    alert('" + msg + "');"
                          + "    location.href='" + url + "';"
                          + "</script>";
            out.println(script);  // 자바스크립트 코드를 out 내장 객체로 출력(삽입)
        }
        catch (Exception e) {}
    }

    // 메시지 알림창을 띄운 후 이전 페이지로 돌아갑니다.
    public static void alertBack(String msg, JspWriter out) 
    {
        try 
        {
            String script = ""
                          + "<script>"
                          + "    alert('" + msg + "');"
                          + "    history.back();"
                          + "</script>";
            out.println(script);
        }
        catch (Exception e) {}
    }

    // 메시지 알림창을 띄운 후 명시한 URL로 이동합니다.
    public static void alertLocation(HttpServletResponse resp, String msg, String url) 
    {
        try 
        {
            resp.setContentType("text/html;charset=UTF-8");
            PrintWriter writer = resp.getWriter();
            String script = ""
                          + "<script>"
                          + "    alert('" + msg + "');"
                          + "    location.href='" + url + "';"
                          + "</script>";
            writer.print(script);
        }
        catch (Exception e) {}
    }

    // 메시지 알림창을 띄운 후 이전 페이지로 돌아갑니다.
    public static void alertBack(HttpServletResponse resp, String msg) {
        try {
            resp.setContentType("text/html;charset=UTF-8");
            PrintWriter writer = resp.getWriter();
            String script = ""
                          + "<script>"
                          + "    alert('" + msg + "');"
                          + "    history.back();"
                          + "</script>";
            writer.print(script);
        }
        catch (Exception e) {}
    }
}

msg : 알림창에서 띄울 메시지
url : 알림창을 닫은 후 이동할 페이지의 URL
out : .자바스크립트 코드를 삽입할 출력 스트림(JSP의 out 내장 객체)

이제 쿠키를 사용하기 전에 쿠키도 편리하게 사용할 수 있도록 클래스로 만들어보자 !

📍 CookieManager.java 📍
package utils;

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

public class CookieManager 
{
    // 명시한 이름, 값, 유지 기간 조건으로 새로운 쿠키를 생성합니다.
    public static void makeCookie(HttpServletResponse response, String cName, String cValue, int cTime) 
    {
        Cookie cookie = new Cookie(cName, cValue);	// 쿠키 생성
        cookie.setPath("/");         				// 경로 설정
        cookie.setMaxAge(cTime);     				// 유지 기간 설정
        
        response.addCookie(cookie);  				// 응답 객체에 추가
    }

    // 명시한 이름의 쿠키를 찾아 그 값을 반환합니다.
    public static String readCookie(HttpServletRequest request, String cName) 
    {
        String cookieValue = "";  // 반환 값

        Cookie[] cookies = request.getCookies();
        if (cookies != null) 
        {
            for (Cookie c : cookies) 
            {
                String cookieName = c.getName();
                if (cookieName.equals(cName)) 
                {
                    cookieValue = c.getValue();  // 반환 값 갱신
                }
            }
        }
        return cookieValue;
    }

    // 명시한 이름의 쿠키를 삭제합니다.
    public static void deleteCookie(HttpServletResponse response, String cName) 
    {
        makeCookie(response, cName, "", 0);
    }
    
}//////////////// class

쿠키 클래스까지 다 만들었으니 본격적으로 쿠키를 통해 로그인 아이디를 저장하는 기능을 만들어보자!

📍 로그인 페이지 : IdSaveMain.jsp 📍
<%@ page import="utils.CookieManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String loginId = CookieManager.readCookie(request, "loginId");
	
	String cookieCheck = "";
	if (!loginId.equals("")) 
	{
	    cookieCheck = "checked";
	}
%>

<html>
<head><title>Cookie - 아이디 저장하기</title></head>
<body>
	<h2>로그인 페이지</h2>
	<form action="IdSaveProcess.jsp" method="post">
		아이디 :	<input type="text" name="user_id" value="<%= loginId %>" />  
        		<input type="checkbox" name="save_check" value="Y" <%= cookieCheck %> />아이디 저장하기 <br />
    	패스워드 : <input type="text" name="user_pw" /><br />
    			<input type="submit" value="로그인하기" />
    </form>
</body>
</html>

📍 IdSaveProcess.jsp 📍
<%@ page import="utils.CookieManager"%>
<%@ page import="utils.JSFunction"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  

<%
	String user_id = request.getParameter("user_id"); 
	String user_pw = request.getParameter("user_pw");
	String save_check = request.getParameter("save_check");  
	
	if ("must".equals(user_id) && "1234".equals(user_pw)) 
	{ 
	    // 로그인 성공
	    if (save_check != null && save_check.equals("Y")) 
	    { 
	        CookieManager.makeCookie(response, "loginId", user_id, 86400); 
	    } 
	    else 
	    {
	        CookieManager.deleteCookie(response, "loginId"); 
	    }
	    
	    JSFunction.alertLocation("로그인에 성공했습니다.", "IdSaveMain.jsp", out); 
	}
	else 
	{
	    // 로그인 실패
	    JSFunction.alertBack("로그인에 실패했습니다.", out);  
	}
%>

아이디와 비밀번호를 입력 후 로그인 버튼을 누르게 되면 IdSaveProcess.jsp 페이지로 이동하게 된다.
위 예제에서는 편의 상 아이디는 "must" 로 하고, 비밀번호는 "1234" 라고 지정하였다.

📕 8. 핵심 요약

쿠키는 생성자를 통해서만 생성할 수 있다.
생성 후 쿠키값은 변경할 수 있으나 쿠키명은 변경할 수 없다.
setPath() 메서드로 적용할 경로를 설정한다.
setMaxAge() 메서드로 쿠키의 유지 기간을 설정한다.
response 내장 객체의 addCookie() 메서드로 클라이언트에 쿠키를 저장한다.
쿠키는 생성 직후 바로 사용할 수는 없다. 클라이언트가 재요청을 했을 때부터 사용할 수 있다.

이지현

개발 공부 중인 지현이

이전 포스트

[JSP] 쿠키(Cookie)

[국비지원 공부하기]Jsp

📕 1. 쿠키(`Cookie`)란?

1-1. 쿠키(`Cookie`)란?

📕 2. 쿠키의 동작 구조

📕 3. 쿠키의 구성

3-1. 쿠키의 저장API

3-2. 쿠키의 읽는API

📕 4. 쿠키의 기본 조작법

📕 5. 쿠키의 사용 예제 (1)

5-1. 레이어 팝업창 제어

📕 6. 크롬 브라우저에서 쿠키 삭제하기

📕 7. 쿠키의 사용 예제 (2)

7-1 로그인 아이디 저장

📕 8. 핵심 요약

[JSP] 내장 객체 영역

0개의 댓글

[JSP] 쿠키(Cookie)

[국비지원 공부하기]Jsp

📕 1. 쿠키(Cookie)란?

1-1. 쿠키(Cookie)란?

📕 2. 쿠키의 동작 구조

📕 3. 쿠키의 구성

3-1. 쿠키의 저장API

3-2. 쿠키의 읽는API

📕 4. 쿠키의 기본 조작법

📕 5. 쿠키의 사용 예제 (1)

5-1. 레이어 팝업창 제어

📕 6. 크롬 브라우저에서 쿠키 삭제하기

📕 7. 쿠키의 사용 예제 (2)

7-1 로그인 아이디 저장

📕 8. 핵심 요약

[JSP] 내장 객체 영역

0개의 댓글

📕 1. 쿠키(`Cookie`)란?

1-1. 쿠키(`Cookie`)란?