이번에는 웹 페이지끼리 정보를 공유하는 기능 중 쿠키를 이용하는 기능에 대해 알아보자.
쿠키(Cookie)란 웹 페이지들 사이의 공유 정보를 클라이언트 PC에 저장해 놓고 필요할 때 여러 웹 페이지들이 공유해서 사용할 수 있도록 매개 역할을 하는 방법이다.
쿠키의 특징은 다음과 같습니다.
• 정보가 클라이언트 PC에 저장됩니다.
• 저장 정보 용량에 제한이 있습니다(파일 용량은 4kb).
• 보안이 취약합니다.
• 클라이언트 브라우저에서 사용 유무를 설정할 수 있습니다.
• 도메인당 쿠키가 만들어집니다(웹 사이트당 하나의 쿠키가 만들어집니다).
쿠키는 클라이언트 PC에 정보를 저장해서 사용하므로 보안에 취약합니다. 따라서 쿠키를 이용한 방법은 주로 보안과 무관한 경우에 한해 사용합니다. 예를 들어 우리가 웹 페이지를 방문했을 때 어떤 팝업창이 나타나면 ‘오늘은 더 이상 보지 않기’를 체크하는데, 이처럼 팝업창이 나타나지 않게 하는 경우 등에 사용합니다.
쿠키는 다음과 같이 두 종류로 나눌 수 있습니다.
Persistence 쿠키는 클라이언트에 파일로 정보를 저장하는 기능을 합니다. 파일로 생성된 쿠키는 사용자가 만료 시간을 지정할 수 있는 반면에 Session 쿠키는 브라우저가 사용하는 메모리에 생성되는 쿠키입니다. 브라우저가 종료되면 메모리의 Session 쿠키도 자동으로 소멸됩니다. Session 쿠키는 다음 절에서 배우는 Session 기능과 같이 사용됩니다.
그럼 실제로 클라이언트 PC에서 쿠키 파일이 생성되는 위치를 확인해 보자. 이미 여러 웹 사이트에서 사용하는 쿠키가 생성된 것을 볼 수 있을 것이다.
1. 윈도 탐색기를 열고 C:\Users\사용자\AppData\Local\Google\Chrome\User Data\Default\Cache로 이동하면 크롬에서 사용하는 쿠키 파일이 보일 것이다.
9.3.1 쿠키 기능 실행 과정
클라이언트 브라우저가 웹 서버에 요청하면 어떻게 쿠키가 생성되는지 살펴보겠다.
그림 9-14를 보면 브라우저에서 웹 사이트(www.jweb.com)에 최초 접속하면 웹 서버에서 쿠키를 생성해 클라이언트로 전송한다. 그리고 브라우저는 쿠키를 파일로 저장한다. 이후 다시 접속해 서버가 브라우저에게 쿠키 전송을 요청하면 브라우저는 쿠키 정보를 서버에 전송하고 서버는 쿠키 정보를 이용해서 작업을 한다.
➊ 브라우저로 사이트에 접속합니다.
➋ 서버는 정보를 저장한 쿠키를 생성합니다.
➌ 생성된 쿠키를 브라우저로 전송합니다.
➍ 브라우저는 서버로부터 받은 쿠키 정보를 쿠키 파일에 저장합니다.
➎ 브라우저가 다시 접속해 서버가 브라우저에게 쿠키 전송을 요청하면 브라우저는 쿠키 정보를 서버에 넘겨줍니다.
➏ 서버는 쿠키 정보를 이용해 작업을 합니다.
9.3.2 쿠키 API
실제로 서블릿에서 쿠키 기능 사용 시 이와 관련된 API에 대해 알아보겠다. 쿠키는 Cookie 클래스 객체를 생성하여 정보를 저장한 후 서버에서 클라이언트로 전송해 파일로 저장된다. 쿠키 관련 API의 특징은 다음과 같다.
• javax.servlet.http.Cookie를 이용합니다.
• HttpServletResponse의 addCookie() 메서드를 이용해 클라이언트 브라우저에 쿠키를 전송한 후 저장합니다.
• HttpServletRequest의 getCookie() 메서드를 이용해 쿠키를 서버로 가져옵니다.
표 9-2는 Cookie 클래스에서 제공하는 여러 가지 메서드의 기능을 정리한 것이다.
쿠키 생성 시 setMaxAge() 메서드 인자 값의 종류를 지정해서 파일에 저장하는 Persistence 쿠키를 만들거나 메모리에만 저장하는 Session 쿠키를 만들 수 있다.
즉, setMaxAge() 메서드를 이용한 쿠키 저장 방식은 다음 두 가지로 나눌 수 있다.
인자 값으로 음수나 setMaxAge() 메서드를 사용하지 않고 쿠키를 만들면 Session 쿠키로 저장된다.
인자 값으로 양수를 지정하면 Persistence 쿠키로 저장된다.
9.3.3 서블릿에서 쿠키 사용하기
서블릿에서 쿠키 API를 이용해 직접 쿠키를 만들어 보겠다.
1. GetCookieValue, SetCookieValue 클래스 파일을 준비한다.
2. SetCookieValue 클래스를 다음과 같이 작성한다. Cookie 객체를 생성한 후 쿠키 이름을 cookieTest로 값을 저장한다. 그리고 setMaxAge() 메서드에 쿠키 유효 시간을 24시간으로 설정한다. 그런 다음 response의 addCookie() 메서드를 이용해 생성된 쿠키를 브라우저로 전송한다.
➊ Cookie 객체를 생성한 후 cookieTest 이름으로 한글 정보를 인코딩해서 쿠키에 저장합니다.
➋ 유효 기간을 설정합니다.
➌ 생성된 쿠키를 브라우저로 전송합니다.
3. GetCookieValue 클래스를 다음과 같이 작성한다. 두 번째 서블릿 요청 시에는 request의 getCookies() 메서드를 호출해 브라우저로부터 쿠키를 전달받는다. 그리고 전달된 쿠키에서 저장할 때 사용한 이름인 cookieTest로 검색해 값을 가져온다.
➊ request의 getCookies() 메서드를 호출해 브라우저에게 쿠키 정보를 요청한 후 쿠키 정보를 배열로 가져옵니다.
➋ 배열에서 저장할 때 사용한 쿠키 이름인 cookieTest로 검색해 쿠키 값을 가져옵니다.
4. 우선 set으로 첫 번째 서블릿을 요청한다. 쿠키에 cookieTest 이름으로 문자열을 저장한다.
5. get으로 두 번째 서블릿을 요청하여 cookieTest로 쿠키 값을 가져와 브라우저에 출력한다.
Note = 쿠키 생성 상태 확인하기
다음은 클라이언트 쿠키의 생성 상태를 크롬에서 확인하는 방법이다.
1. 크롬 브라우저를 실행하고 F12 를 눌러 디버그창을 나타낸다. 그리고 상단 메뉴 바에서 Application을 클릭한다.
2. 왼쪽 메뉴에서 Cookies를 선택한 후 하위에 있는 http://localhost:8090을 클릭한다.
3. 현재 애플리케이션에서 사용하고 있는 쿠키 정보가 표시됩니다.
9.3.4 세션 쿠키 사용하기
다음은 쿠키를 파일에 저장하는 것이 아닌, 브라우저가 사용하는 메모리에 저장하는 Session 쿠키를 만들어 보겠다.
1. 다음과 같이 Cookie의 setMaxAge() 메서드를 이용해 유효 시간을 -1로 설정하면 세션 쿠키가 생성된다.
➊ 주석 처리합니다.
➋ 유효 시간을 음수로 지정하여 Session 쿠키를 만듭니다.
2. 톰캣을 재실행한다. 출력 결과는 앞의 쿠키 예제(9.3.3절)와 같다. (만료시간이 달라짐)
9.3.5 쿠키 이용해 팝업창 제한하기
쿠키를 이용해 팝업창을 제한하는 기능을 구현해 보겠다. 팝업창 제어는 서버에서 쿠키를 다루지 않고 자바스크립트를 이용해 쿠키에 직접 접근한다.
1. popUp.html, popupTest.html 이렇게 두 개의 html 파일을 준비한다.
2. 먼저 popupTest.html을 다음과 같이 작성한다. 웹 페이지가 브라우저에 로드될 때 pageLoad() 함수를 호출한 후 쿠키에 접근해 팝업창 관련 정보를 가져온다. getCookieValue() 함수를 호출하여 쿠키 이름 notShowPop의 값이 true가 아니면 팝업창을 나타내고, notShowPop의 값이 true면 팝업창을 나타내지 않는다.
3. popUp.html에서는 오늘 더 이상 팝업창 띄우지 않기에 체크하면 자바스크립트 함수인 setPopUpStart() 함수를 호출해 notShowPop의 값을 true로 설정하여 재접속 시 팝업창을 나타내지 않도록 설정한다.
4. 브라우저에 최초 접속 시 팝업창을 나타낸다.
5. 오늘 더 이상 팝업창 띄우지 않기에 체크하고 재요청하면 더 이상 팝업창이 나타나지 않는다.
6. 쿠키삭제를 클릭한 후 재요청하면 다시 팝업창이 나타난다.
'스프링 부트 > 자바 웹을 다루는 기술' 카테고리의 다른 글
| 9.5 encodeURL() 사용법 (0) | 2024.01.24 |
|---|---|
| 9.4 세션을 이용한 웹 페이지 연동 기능 (0) | 2024.01.22 |
| 9.2 <hidden> 태그와 URL Rewriting 이용해 웹 페이지 연동하기 (0) | 2024.01.21 |
| 9장 쿠키와 세션 알아보기 _ 9.1 웹 페이지 연결 기능 (0) | 2024.01.21 |
| 8.5 ServletContext와 ServletConfig 사용법 (0) | 2024.01.21 |
