(79)[Web]15일차: ((JSP))■ 쿠키(Cookie)와 세션 ■, F_WebApp13, F_WebApp14, F_WebApp15, ■ Emmet(에밋) ■, F

1. 2023.12.15(금)

■ 쿠키(Cookie)와 세션 ■

○ 쿠키(Cookie)

- 쿠키는 클라이언트에 대한 정보를 클라이언트의 하드디스크에 작은 파일 형태로 저장한 것으로 서버에서 사용자에게 편리한 기능을 제공하기 위해 많이 사용되고, 이 쿠키는 웹 브라우저에 의해 관리된다.

- 쿠키는 텍스트 형태로 저장되기 때문에 변조나 복사등이 가능하여 보안성이 없고 클라이언트에... 예전에는 총 300

개 까지 저장 가능했으며,
각 도메인 당 갯수 제한(20개)이나 크기 제한(4096Byte)은 사실상 무의미해져 가고있다.

- 저장되는 위치는 시스템(운영체제)이나 브라우저에 따라 다르며 일반적인 형식(계정명@도메인)도 꾸준히 바뀌어 가고 있다.

    - 쿠키는 웹 브라우저가 거쳐간 웹사이트 및 개인의 정보가 기록되기 때문에 개인의 사생활을 침해할 소지가 있으며, 이로 인해 웹 브라우저 자체에 쿠키 거부 기능이 포함되어 있다.
    하지만, 쿠키 거부 기능을 설정하게 되면 웹 브라우저와의 연결을 지속시키지 못하기 때문에 문제가 발생하게 된다.
    (사실상 거부하는 의미가 없음... 반 강제적)

- 쿠키의 동작 방식

쿠키의 동작 방식은 웹 서버와 웹 브라우저 간의 상호 협력으로 이루어진다. 웹 서버가 외부 브라우저의 요청에 응답할 때 HTTP 프로토콜에 있는 HTTP 헤더 쿠키 정보를 포함시켜 클라이언트 쪽으로 보낸다.
그리고, 웹 브라우저가 웹 서버에 존재하는 페이지를 요구할 때 그 전에 자신이 방문했을 때 해당 페이지에 대해 웹 서버가 웹 브라우저 쪽으로 심어놓았던 쿠키를 웹 서버로 다시 건네 주어서 이전상태를 웹 서버가 알 수 있도록 한다.

- 쿠키(객체)의 파라미터(속성)

·name=value
: 쿠키는 반드시 이름을 포함해야 한다. 이름은 변수명과 같은 목적으로 사용한다.

        ·expires=date
        : 유효기간을 지정한다.
        날짜를 생략할 경우 브라우저 종료 시점까지 쿠키가 남아있게 된다. 유효기간 설정은 그리니치 표준시(Wdy, DD-Mon-TT HH:MM:SS GNT)로 설정하게 된다.

        ·path=path
        : 웹 서버에서 쿠키 값이 디렉터리 간에 유효한 범위를 설정하는 것으로 path 값은 웹 서버의 document root 를 기준으로 설정한다.
        예를 들어... path 가 『/』이면 (『"Path=/;"』) 도메인의 루트(/)에서 시작하는 모든 곳을 접속할 때 해당 쿠키의 갑을 적용할 수 있다.
        생략할 경우 현재 문서의 위치와 디렉터리와 하위 디렉터리가 쿠키의 범위가 된다.

·domain=domain
: 한사이트에서 만든 쿠키가 다른 사이트에 영향을 주지 않기 때문에 도메인 항목이 필요하다. 도메인은 자동으로 사이트의 기본 도메인으로 설정된다.

·secure
: 데이터의 전송에 보안이 요구되는 지를 지정한다. true는 브라우저가 안전하다고 판단하는 서버만 나타나게 된다. 기본값(default)은 false 이다.

- 쿠키의 기본 설정

① Cooke 객체 생성
Cookie c = new Cookie("쿠키이름","쿠키값");

② Cooke 객체 설정

c.setMaxAge(쿠키유효시간 초 단위 설정)

③ Cookie 객체 등록(추가)

response.addCookie(c);

- JSP 에서 쿠키를 설정하는 방법은 두 가지가 있다.

첫 번째 방법은

『response』객체에 『setHeader()』 메소드를 이용하여 쿠키를 설정하는 것이다.

하지만, 권장하지 않는다.

ex) response.setHeader("set_cookie","name=value, expirese=value, ...");

//-- 이 방법은...
// Header 에 key 와 값, key 와 값, .... 을 String Type 으로 넘기는 것이기 때문에 엄밀히 말하자면 쿠키라는 객체를 넘기는 것이 아니다. 과거에는 쿠키라는 클래스가 존재하지 않있기 때문에 이 방법을 사용했었다.

두 번째 방법은

『Cookie』 클래스를 이용하는 방법이다.

· String getCommet()

: 쿠키에 대한 설명을 가져온다.

· String getDomatin()

: 쿠키가 유효한 도메인 정보를 가져온다.

· int getMaxAge()

: 쿠키의 유효한 시간 정보를 가져온다.

· String getName()

: 쿠키의 이름을 가져온다.

· String getPath()

: 쿠키의 유효한 디렉터리 정보를 가져온다.

· String getSecure()

: 쿠키의 보안 설정을 가져온다.

· String getValue()

: 쿠키의 해당 값을 가져온다.

· int getVersion()

: 쿠키의 버전 값을 가져온다.

· void setcomment(string purpose)
: 쿠키에 대한 설명을 설정한다.

· void setDomain(String Pattern)

: 쿠키가 유효한 도메인 정보를 설정한다.

· void setMaxAge(int expiry)

: 쿠키가 유효한 시간 정보를 설정한다.

· void setSecure(string url)

: 쿠키의 보안 설정값을 구성한다.

· void setValue(String newValue)

: 쿠키의 해당 값을 설정한다.

· void setVersion(int V)

: 쿠키의 버전 값을 설정한다.

- JSP 에서 쿠키(Cookie) 유효시간 설정

『setMaxAge(int expiry)』 메소드를 통해 유효시간을 설정한

· 『expiry』가 『음수』일 때
: 브라우저가 종료되면 쿠키가 제거된다.

· 『expiry』가 『0』일 때

: 생성과 동시에 쿠키가 제거된다.

· 『expiry』가 『양수』일 때

: 초 단위로 해당 시간만큼 쿠키가 유지된다.

· 『setMaxAge()』 메소드를 통해 유효시간을 설정하지 (명시하지)않은 경우 기본적으로 음시가 설정되어 브라우저가 종료될 때까지 쿠키가 유지된다.

○ 세션(Session)

- 쿠키의 경우 브라우저에 상태를 유지하기 위한 정보를 저장하지만(즉, 로컬 PC의 하드디스크에 저장) 세션은 서버의 웹 컨테이너의 상태를 유지하기 위한 정보를 저장하는것으로

『javax.servvlet.http』 패키지의 『HttpSession』 인터페이스를 통해 세션을 사용하게 된다.

또한 세션은 서버와 관련된 정보를 노출하지 않기 떄문에 쿠키를 사용하는 것보다 『HttpSession』 인터페이스의 세션

을 통한 관리가 보다 안정적(보안성 향상)이라 할 수 있다.

- Session 생성

Session 을 생성하기 위해서는 페이지 디렉티브(page directive)의 session 속성을 ture 로 설정한다.
(별도로 설정하지 않아도 자동으로 기본값 적용. 즉, 사용하지 않을 경우만 false 설정.)

ex) <%@ page session="true"%>

- Session 내장 객체의 주요 메소드

· String getId()

: (『세션아이디』라고 한다. 세션 고유 ID를 문자열 형태로 반환한다.)

· long getCreationTime()

: 세션의 생성된 시간을 구한다.

(시간은 1970년 1월 1일 이후 흘러간 시간을 의미한다.)

· long getLastAccessedTime()

: 웹 브라우저가 가장 마지막에 세션에 접근한 시간을 구한다.

· int getMaxInactiveInerval()

: 세션 유지 시간을 초로 반환한다. 기본값은 30분으로 지정된다.

· void setMaxInactiveInerval(int interval)

: 세션을 유지할 시간을 interval 에 설정된 초 값으로 설정한다.

· void invalidate()

: 현재 세션을 종료한다. 세션과 관련된 모든 값을 삭제한다.

· boolean isNew()

: 클라이언트 『세션아이디』를 할당하지 않은 경우 『true』값을 반환한다.

새로운 세션인지의 여부를 확인할 때 사용한다.

· void setAttribue(String key, Objec value)

: 주어진 key 속성의 값을 value 로 지정한다.

· Object getAttribute(String key)

: 주어진 key 속성의 값을 얻어낸다.

· void removeAttribue(String key)

: 주어진 key 속성의 값을 제거한다.

- 한번 생성된 세션은 종료하기 전까지 지속적으로 유지된다. (중간에 사라지지 않음)

단, 은행 인터넷 뱅킹과 같은 서비스 이용 시 일정 시간 동안 사용하지 않으면 로크인 이 풀리는 것 같은 이유는
임의로 설정을 해두었기 때문이며, 이렇게 임의로 세션을 종료하기 전까지는 지속적으로 유지된다.

이와 같은 성격으로 웹 어플리케이션을 실행하는 동안 지속적으로 사용하는 데이터의 저장 장소로는 세션이 적합(적당)한다.

※ 참고

- 스코프(scope) -> 대부분의 교재에서 life cycle (생명주기)로 설명함.

웹 어플리케이션은 page, request, session, application 이라는 4개의 객체의 영역은 객체의 유효기간이라고도 불리며, 객체를 누구와 공요할 것이가를 나타낸다.

· page 영역

한 번의 웹 브라우저(클라이언트)의 요청에 대해 하나의 JSp 페이지가 호출 되며 웹 브라우저의 요청이 들어오면 이

때... 단 한개의 페이지만 대응된다.

· request 영역

한 번의 웹 브라우저(클라이언트)의 요청에 대해 같은 요청을 공유하는 페이지가 대응되며 웹르라우저의 한 번의 요

청이 단지 한 개의 페이지만 요청될 수 있고 같은 request 영역이며 두 개의 페이지가 같은 요청을 공유한다.

(include 액션 태그, forward 액션 태그 사용 시)

· seession 영역

하나의 웹 브라우저 당 한개의 Session 객체가 생성된다. 같은 웹 브라우저 내에서는 요청되는 페이지들이 같은 객

체를 공유한다.

· applicaiton 영역

하나의 웹 어플리케이션 당 한 개의 application 객체가 생성된다. 대부분의 환경 설정에서 사용된다. 같은 웹 어플리

케이션에서 요청되는 페이지들은 같은 객체를 공유한다.

F_WebApp13: 세션처리-로그인

ㄴ/WebApp13/WebContent

ㄴㄴTestSession01.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 최초 요청일 경우... 아무것도 없지만...
	// TEstSession01_ok.jsp 페이지에서
	// 로그인 성공 후에 요청된 페이지라면...
	// session의 userId에 superman 을 
	//			 userName 에 문정환을 담아서 보낸 상황
	
	String userId = (String)session.getAttribute("userId");		// "superman"
	String userName = (String)session.getAttribute("userName"); // "문정환"
	//-- 『session.getAttribute("userId");』는
	//	Object 타입을 반환하므로
	//	String 타입으로 반환하는 과정 필요(다운 캐스팅)
	
	// 추가~!!!
	// 세션 활성화 시간 변경 -----------------------------------------------------------
	
	// ※ 세션 기본(default) 시간은 1800초.
	
	session.setMaxInactiveInterval(10);
	//--- 세션이 유지되는 시간을 10초로 설정한 상태.
	//	이로 인해...
	//	로그인 후 10 초 동안 아무 액션도 없는 상태에서...
	//	다시 기능을 이용하려 하거나, 페이지 새로고침을 수행하면
	//	로그아웃 처리된 것을 확인할 수 있다.
	
	// ------------------------------------------------------------세션 활성화 시간 변경
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestSession01</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/MemberScore.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
	/* .btnMenu{border: 1px solid gray;border-radius: 3px;font-size: 8px;width: 60px;height: 20px;} */
	.btn_box [type="button"], .btn_box [type="reset"], .btn{min-width: 80px;}
</style>
<script type="text/javascript">
function sendIt()
{
	// 확인
	//alert("함수 호출");
	
	var f = document.myForm;
	
	if(!f.userId.value)
	{
		alert("아이디를 입력해야 합니다~!!!");
		f.userId.focus();
		return;
	}
	
	if(!f.userPwd.value)
	{
		alert("패스워드를 입력해야 합니다~!!!");
		f.userPwd.focus();
		return;
	}
	f.submit();	
}
</script>
</head>
<body class="section">
<!-- **Session은 서버쪽 자원이므로 먼저 볼 것** -->
<div>
	<h1>세션 처리 - 로그인</h1>
</div>

<div class="layout">
	<div class="tbl_box">
		<table>
			<tr>
				<td class="btn_box" style="display:flex;align-items: center;">
					<a href="">
						<button type="button" class="btnMenu btn01">게시판</button>
					</a> |
					<%
					if(userId == null)
					{
					%>
					<a href="">
						<button type="button" class="btnMenu btn02">일정관리</button>
					</a> |
					<a href="">
						<button type="button" class="btnMenu btn02">친구관리</button>
					</a> |...
					<%
					}
					else
					{
					%>
					<a href="Sca.jsp">
						<button type="button" class="btnMenu btn01">일정관리</button>
					</a> |
					<a href="Fir.jsp">
						<button type="button" class="btnMenu btn01">친구관리</button>
					</a> |...
					<%
					}
					%>
				</td>
			</tr>
		</table>
	</div>
	<div class="tbl_box">
		<%
		if(userId == null)
		{
		%>
		<form action="TestSession01_ok.jsp" method="post" name="myForm">
			<table>
				<tr>
					<th>아이디</th>
					<td>
						<input type="text" name="userId" class="txt">
					</td>
				</tr>
				<tr>
					<th>패스워드</th>
					<td>
						<!-- <input type="text"> -->
						<input type="text" name="userPwd" class="txt">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="button" class="btn" style="width:100%;" onclick="sendIt();">로그인</button>
					</td>
				</tr>
			</table>
		</form>
		<%
		}
		else
		{
		%>
		<h2><%=userName %>(<%=userId %>)님, 환영합니다.</h2>
		<p>이제, 일정관리와 친구관리 서비스를 이용할 수 있습니다.</p>
		<p class="btn_box">
			<a href="Logout.jsp">
				<button type="button" class="btnMenu btn01">로그아웃</button>
			</a>
		</p>
		<%
		}
		%>
	</div>
</div>

</body>
</html>

ㄴㄴTestSession01_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// TestSession01_ok.jsp
	
	// 이전 페이지(TestSession01.jsp)로 부터 넘어온 데이터 수신
	// -> userId, userPwd
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
	
	// DB 활용 -> dao 로그인 처리 -> dao 활용
	// -> 로그인 관련 테이블 데이터와 비교 -> 최종적으로 로그인 액션 처리
	
	String memberId = "superman";
	String memberPwd = "1234567";
	String memberName = "문정환";
	
	if(userId.equals(memberId) && userPwd.equals(memberPwd))
	{
		// 로그인 액션 처리
		session.setAttribute("userId", userId);			//-- session 의 userId -> superman 
		session.setAttribute("userName", memberName);	//-- session 의 userName -> 문정환
		
		// 클라이언트가 페이지를 다시 요청할 수 있도록 안내
		response.sendRedirect("TestSession01.jsp");
		
	}
	
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestSession01_ok.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div class="layout">
	<h1>로그인 실패~!!!</h1>
	<hr>
</div>

<a href="TestSession01.jsp">▶ 로그인 페이지로 돌아가기</a>

</body>
</html>

ㄴㄴLogout.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// Logout.jsp
	//-- 세션의 내용을 없애 로그아웃 처리
	//	 이후 ... 클라이언트가 다시 요청할 페이지 안내
	
	session.removeAttribute("userId");
	session.removeAttribute("userName");
	// 세션의 사용자아이디와 이름 삭제
	
	// 기존 세션에 저장되어 있는 모든 항목을 제거하고 센션을 초기화
	session.invalidate();
	
	// 클라이언트에게 다시 로그인 페이지를 요청할 수 있도록 안내
	response.sendRedirect("TestSession01.jsp");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Logout.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div class="layout">
	<h1>안전하게~!로그아웃 처리되었습니다~!!!</h1>
</div>

</body>
</html>

F_WebApp14: 회원가입01-03(이름,전화번호)(아이디,패스워드),(이름,전화번호,아이디, 패스워드 출력)

ㄴ/WebApp14/WebContent

ㄴㄴTestSession01.jsp_회원가입01 (이름, 전화번호)

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestSession01.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<!-- 
	○ TestSession01.jsp 에서 TestSession02.jsp 페이지로 
		이름과 전화번호를 입력받아 전송
		
		TestSession02.jsp에서 TestSession03.jsp 페이지로
		아이디와 패스워드를 입력받고
		앞에서 전달받은 이름과 전화번호를 함께 전송
		
		TestSession03.jsp 에서 전달받은 이름, 전화번호, 아이디, 패스워드 출력
		
		01 ---------------- 02 ----------------- 03
		이름, 전화			아이디, 패스워드	이름, 전화, 아이디, 패스워드
		입력				입력				출력
		
							-getParameter		- getAttribute
		
	※ 즉, 01에서 02로 넘겨받을 땐 getParameter
		02에서 03으로 넘겨받을 땐 getParmeter 와 getAttribute 로 세션 활용
		01에서 03으로 직접 넘겨줄 수 없기 때문에 세션(session)에 저장
		
	※ session 외에 input 태그 hidden 속성을 이용한 정보 전달 가능~!!!
 -->

<div>
	<!-- <h1>TestSession01.jsp -> TestSession02.jsp -> TestSession03.jsp</h1> -->
	<h2>회원가입01 (이름, 전화번호)</h2>
	<h2>(TestSession01.jsp)</h2>
	<hr>
</div>

<div class="layout">
	<div class="tbl_box">
		<form action="TestSession02.jsp" method="post" name="form01">
			<table>
				<tr>
					<th>이름</th>
					<td><input type="text" id="userName" name="userName"></td>
				</tr>
				<tr>
					<th>전화</th>
					<td><input type="text" id="userTel" name="userTel"></td>
				</tr>
				<tr class="btn_box" style="display: contents;">
					<td colspan="2">
						<a href="javascript:formCheck01();"><button type="button" style="width: 100%;">입력</button></a>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script type="text/javascript">
function formCheck01()
{
	//alert("확인");
	
	var f = document.form01;
	
	if(!f.userName.value)
	{
		alert("이름을 입력해주세요.");
		f.userName.focus();
		return;
	}
	
	if(!f.userTel.value)
	{
		alert("전화번호를 입력해주세요.");
		f.userTel.focus();
		return;
	}
	
	f.submit();
}
</script>
</body>
</html>

ㄴㄴTestSession02.jsp_회원가입02 (아이디, 패스워드)

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 이전 페이지(TestSession01.jsp)로 부터 넘어온 데이터 수신
	// -> userName, userTel

	request.setCharacterEncoding("UTF-8");

	String name = request.getParameter("userName");
	String tel = request.getParameter("userTel");
	
	// check~!!
	// 추가
	// 세선으로 값 보내기
	session.setAttribute("userName", name);
	session.setAttribute("userTel", tel);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestSession02.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h2>회원가입02 (아이디, 패스워드)</h2>
	<h2>(TestSession02.jsp)</h2>
	<hr>
</div>

<div class="layout">
	<div class="tbl_box">
		<form action="TestSession03.jsp" method="post" name="form02">
			<table>
				<tr>
					<th>아이디</th>
					<td><input type="text" id="userId" name="userId"></td>
				</tr>
				<tr>
					<th>패스워드</th>
					<td><input type="text" id="userPwd" name="userPwd"></td>
				</tr>
				<tr class="btn_box" style="display: contents;">
					<td colspan="2">
						<a href="javascript:formCheck02();"><button type="button" style="width: 100%;">입력</button></a>
					</td>
				</tr>
			</table>
			<%-- <input type="text" id="userName" name="userName" value="<%=name%>">
			<input type="text" id="userTel" name="userTel" value="<%=tel%>"> --%>
		</form>
	</div>
</div>
<script type="text/javascript">
function formCheck02()
{
	//alert("확인");
	
	var f = document.form02;
	
	if(!f.userId.value)
	{
		alert("아이디를 입력해주세요.");
		f.userName.focus();
		return;
	}
	
	if(!f.userPwd.value)
	{
		alert("전화번호를 입력해주세요.");
		f.userPwd.focus();
		return;
	}
	
	f.submit();
}
</script>
</body>
</html>

ㄴㄴTestSession03.jsp_이름, 전화번호, 아이디, 패스워드 출력

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 이전 페이지(TestSession02.jsp)로 부터 넘어온 데이터 수신
	// -> userId, userPwd

	request.setCharacterEncoding("UTF-8");

	String id = request.getParameter("userId");
	String pwd = request.getParameter("userPwd");
	
	//String name = request.getParameter("userName");
	//String tel = request.getParameter("userTel");
	
	// 세션에서 값 가져오기
	String name = (String)session.getAttribute("userName");
	String tel = (String)session.getAttribute("userTel");
	
	session.removeAttribute("userName");
	session.removeAttribute("userTel");
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestSession03.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h2>이름, 전화번호, 아이디, 패스워드 출력</h2>
	<h2>(TestSession03.jsp)</h2>
	<hr>
</div>

<div class="layout">
	<div class="tbl_box">
		<form action="TestSession03.jsp" method="post" name="form02">
			<table>
				<tr>
					<th>이름</th>
					<td><%=name %></td>
				</tr>
				<tr>
					<th>전화</th>
					<td><%=tel %></td>
				</tr>
				<tr>
					<th>아이디</th>
					<td><%=id%></td>
				</tr>
				<tr>
					<th>패스워드</th>
					<td><%=pwd%></td>
				</tr>
			</table>
		</form>
	</div>
</div>

</body>
</html>

F_WebApp15: 쿠키 설정 및 추가, 쿠키 정보 얻어내기, 쿠키 정보 삭제/ Application을 활용한 접속자 수 체크

ㄴ/WebApp15/WebContent

ㄴㄴTestSetCookie.jsp_쿠키 정보 얻어내기

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");

	Cookie[] ck = request.getCookies();
	
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestGetCookie.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">
	
<div>
	<h1>쿠키 정보 얻어내기</h1>
	<hr>
</div>

<div class="layout">
	<div class="tbl_box">
		<table class="table">
			<tr>
				<th style="width: 120px;">쿠키 이름</th>
				<th>쿠키 값</th>
			</tr>
			<%
			for (Cookie c : ck)
			{
			%>
			<tr>
				<td><%= c.getName() %></td>
				<td><%= c.getValue() %></td>
			</tr>
			<%
			}
			%>
		</table>
	</div>
	
	<div class="layout">
		<a href="TestSetCookie.jsp"><button type="button" class="btn">쿠키 정보 설정</button></a>
		<a href="TestRemoveCookie.jsp"><button type="button" class="btn">쿠키 정보 삭제</button></a>
	</div>
</div>

</body>
</html>

ㄴㄴTestRemoveCookie.jsp_쿠키 정보 삭제하기

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");

	/* **
	쿠키는 제거가 따로 없음. -> 비어있는 쿠키로 덮어씀
	** */
	
	// 비어있는 내용으로 기존의 쿠키를 덮어쓰기하는 개념
	Cookie killCookie = new Cookie("cookie_test",  "");	// 제거 하고자 하는 쿠키 이름과 같아야 함
	
	killCookie.setMaxAge(0);
	response.addCookie(killCookie);
	// 처음 쿠키를 구성할 때에도 『addCookie()』로 처리하였기 때문에
	//	삭제할 ㄱ때도  같은 이름의 쿠키를 『addCookie()』로 처리해야 안정적으로 삭제.
	//	즉, 내용이 포함된 쿠키를 심었다가..
	//	이번에는 내용이 비어있는 쿠키를 심는 개념.
	
	//※ 여기서 쿠키 삭제는 클라이언트 입장에서의 삭제이다.
	// 한 명의 클라이언트가 쿠키를 삭제했다고 해서
	// 다른 클라이언트들의 쿠키도 삭제되면 안되기 때문에
	// 이 쿠키의 정보는 로컬 PC에서 컨트롤 하게 된다.(브라우저가...)
	
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestRemoveCookie.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">
	
<div>
	<h1>쿠키 정보 삭제하기</h1>
	<hr>
</div>

<div class="layout">
	<h2>성공적으로 쿠키를 제거했습니다~!!!</h2>

	<div class="btn_box">
		<a href="TestSetCookie.jsp"><button type="button" class="btn">쿠키 정보 설정</button></a>
		<a href="TestGetCookie.jsp"><button type="button" class="btn">쿠키 정보 확인</button></a>
	</div>
</div>

</body>
</html>

ㄴㄴTestSetCookie.jsp_쿠키 설정 및 추가

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");

	// 쿠키 생성(서버에 생성된 쿠키)
	Cookie c = new Cookie("cookie_test", "studyCookie");
	/* **쿠키는 서블릿컨테이너(서버)에 만들어짐** */
	
	// 쿠키 설정 (서버에 생성된 쿠키에 대한 설정)
	c.setMaxAge(3600);		// 쿠키 1시간 유지
	
	// 쿠키 추가 (서버에서 생성되고 설정된 쿠키를 클라이언트에 전달(심기))
	response.addCookie(c);
	
	
	
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestSetCookie.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>쿠키 설정 및 추가</h1>
	<hr>
</div>

<div class="layout">
	<div class="btn_box">
		<a href="TestGetCookie.jsp"><button type="button" class="btn">쿠키 정보 확인</button></a>
		<a href="TestRemoveCookie.jsp"><button type="button" class="btn">쿠키 정보 삭제</button></a>
	</div>
</div>

</body>
</html>

ㄴㄴ TestApplication.jsp_Application을 활용한 접속자 수 체크

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	// 접속자 수
	int n = 0;

	String count =(String)application.getAttribute("count");
	
	if(count != null)
		n = Integer.parseInt(count);
	n++;
	
	application.setAttribute("count", Integer.toString(n));
	
	String realPath = application.getRealPath("/");
	application.log("접속자: "+request.getRemoteAddr());
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TestApplication.jsp</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">
	
<div>
	<h1>Application을 활용한 접속자 수 체크</h1>
	<hr>
</div>

<div class="layout">
	<h2>총 접속자: <%=n %></h2>
	<h2 style="word-wrap:break-word;">웹 서버 실제 경로<%=realPath %></h2>
</div>
	
</body>
</html>

■■■ Emmet(에밋) ■■■

/* ** html 생산성 향상 도구** */

○ 개요

- 기존에는 Zen Coding(젠코딩) 이라는 이름으로 사용되었다.

- 이후... Goolge에서 이 도구를 수용하면서 emmet 이라는 이름으로 변경되었다.

- HTML 생산성 향상 도구(HTML 코딩을 빠르게 하기 위한 플러그인)

- CSS 선택자 사용(CSS3 지원)

-> HTML 을 CSS 선택자를 통해 검색하는 방법 대신

CSS 선택자를 통해 HTML 을 생성하도록 하는 개념.

○ 환경 설정

- 대부분의 툴에서 지원하고 있음

(※ 그리고 대부분의 편집기 내에서의 액션 키: Ctrl + E)

- https://emmet.io/

① 메인 페이지 좌측에 있는 Download 메뉴 클릭

-> https://emmet.io/download/ 페이지로 이동

② Download 리스트들 중 본인이 사용할 편집툴의 메뉴 클릭

③ Installation 항목에서 제시한 순서대로 진행

※ 특이사항

    Emmet 플러그인 설치 이후 이클립스 기본 단축키와 중복되는 항목이 존재함.

                            ------------------
                                Ctrl + D
    ==> 단축키 재설정
        (이클립스 > 윈도우 > 설정 > General > keys)

F_EmmetApp

ㄴ/EmmetApp/WebContent

ㄴㄴEmmetTest01.html_※ 기능 적용 액션 키 -> Ctrl + E

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EmmetTest01.html</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="section">

<div>
	<h1>※ 기능 적용 액션 키 -> Ctrl + E</h1>
	<hr>
</div>

<div class="layout">

<ul>
	<li>
		<h2>1. 태그 선택자</h2>

		div
		<xmp>
			<div></div>
		</xmp>
		
		div{넣을내용}
		<xmp>
			<div>넣을내용</div>
		</xmp>
		
		<h3>emmet으로 만들고 속성값 사이를 'tab'으로 이동가능</h3>
		a
		<a href="http://www.naver.com">네이버</a>
		
		img
		<xmp><img src="" alt="" /></xmp>
		
		table
		<xmp>
			<table></table>
		</xmp>
		
		span
		<xmp><span></span></xmp>
		
		p
		<xmp>
			<p></p>
		</xmp>
	</li>
	<li>
		<h2>2. 아이디 선택자</h2>
		
		div#box
		<xmp>
			<div id="box"></div>
		</xmp>
		
		div#box{kkk}
		<xmp>
			<div id="box">kkk</div>
		</xmp>
		
		div#box.happy{kkk}
		<xmp>
			<div id="box" class="happy">kkk</div>
		</xmp>
		
		<h3>-> div는 별도의 작성없이도 div로 구성됨</h3>
		#box
		<xmp>
			<div id="box"></div>
		</xmp>
		
		#box{1234}
		<xmp>
			<div id="box">1234</div>
		</xmp>

	</li>
	<li>
		<h2>3. 클래스 선택자</h2>
		
		div.items
		<xmp>
			<div class="items"></div>
		</xmp>
		
		div.items{aaa}
		<xmp>
			<div class="items">aaa</div>
		</xmp>
		
		.items
		<xmp>
			<div class="items"></div>
		</xmp>
		
		.items{bbb}
		<xmp>
			<div class="items">bbb</div>
		</xmp>
	</li>
	<li>
		<h2>4. 조합</h2>		
		
		div#box.items
		<xmp>
			<div id="box" class="items"></div>
		</xmp>
		
		div#box.items.unit.control
		<xmp>
			<div id="box" class="items unit control"></div>
		</xmp>
		
		div#box.items.unit{aaa}
		<xmp>
			<div id="box" class="items unit">aaa</div>
		</xmp>
		
		div.items.unit{bbb}
		<xmp>
			<div class="items unit">bbb</div>
		</xmp>
	</li>
	<li>
		<h2>5. 속성 선택자</h2>
		
		div[title]
		<xmp>
			<div title=""></div>
		</xmp>
		
		div[title='test']
		<xmp>
			<div title="test"></div>
		</xmp>
		
		a[href='www.naver.com' title='네이버']
		<xmp><a href="www.naver.com" title="네이버"></a></xmp>
	
		a[href='www.naver.com' title='네이버']{사이트로 이동}
		<xmp><a href="www.naver.com" title="네이버">사이트로 이동</a></xmp>
	</li>
	<li>
		<h2>6. PCDATA</h2>		
		
		div{박스}
		<xmp>
			<div>박스</div>
		</xmp>
		
		a{홈페이지로 이동}
		<xmp><a href="">홈페이지로 이동</a></xmp>
		
		p{문단내용기술}
		<xmp>
			<p>문단내용기술</p>
		</xmp>
	</li>
	<li>
		<h2>반복 생성</h2>
		
		div*5
		<xmp>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</xmp>
		
		img[src=images/dog.jpg]*5
		<xmp>
			<img src="images/dog.jpg" alt="" />
			<img src="images/dog.jpg" alt="" />
			<img src="images/dog.jpg" alt="" />
			<img src="images/dog.jpg" alt="" />
			<img src="images/dog.jpg" alt="" />
		</xmp>

		.box*5
		<xmp>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</xmp>
		
		.box{content}*5
		<xmp>
			<div class="box">content</div>
			<div class="box">content</div>
			<div class="box">content</div>
			<div class="box">content</div>
			<div class="box">content</div>
		</xmp>
		
		<h3>$ -> 항목 번호 매기기</h3>
		#box$.box{content}*5
		<xmp>
			<div id="box1" class="box">content</div>
			<div id="box2" class="box">content</div>
			<div id="box3" class="box">content</div>
			<div id="box4" class="box">content</div>
			<div id="box5" class="box">content</div>
		</xmp>
		
		img[src=images.obj$.jpg]*5
		<xmp>
			<img src="images.obj1.jpg" alt="" />
			<img src="images.obj2.jpg" alt="" />
			<img src="images.obj3.jpg" alt="" />
			<img src="images.obj4.jpg" alt="" />
			<img src="images.obj5.jpg" alt="" />
		</xmp>
		
		h1*6
		<xmp>
			<h1></h1>
			<h1></h1>
			<h1></h1>
			<h1></h1>
			<h1></h1>
			<h1></h1>
		</xmp>
		
		h$*6
		<xmp>
			<h1></h1>
			<h2></h2>
			<h3></h3>
			<h4></h4>
			<h5></h5>
			<h6></h6>
		</xmp>
		
		h${제목$}*6
		<xmp>
			<h1>제목1</h1>
			<h2>제목2</h2>
			<h3>제목3</h3>
			<h4>제목4</h4>
			<h5>제목5</h5>
			<h6>제목6</h6>
		</xmp>
	</li>
	<li>
		<h2>8. 연속 생성</h2>
		
		div+p
		<xmp>
			<div></div>
			<p></p>
		</xmp>
		
		
		h1{제목}+p{내용}*5
		<xmp>
			<h1>제목</h1>
			<p>내용</p>
			<p>내용</p>
			<p>내용</p>
			<p>내용</p>
			<p>내용</p>
		</xmp>
		
		(h1{제목}+p{내용}*2)*5
		<xmp>
			<h1>제목</h1>
			<p>내용</p>
			<p>내용</p>
			<h1>제목</h1>
			<p>내용</p>
			<p>내용</p>
			<h1>제목</h1>
			<p>내용</p>
			<p>내용</p>
			<h1>제목</h1>
			<p>내용</p>
			<p>내용</p>
			<h1>제목</h1>
			<p>내용</p>
			<p>내용</p>
		</xmp>
		
		div+a+div+p+div+img
		<xmp>
			<div></div>
			<a href=""></a>
			<div></div>
			<p></p>
			<div></div>
			<img src="" alt="" />
		</xmp>
	</li>
	<li>
		<h2>9. 하위 생성</h2>
		
		table+	
		<xmp>
			<table>
				<tr>
					<td></td>
				</tr>
			</table>
		</xmp>
		
		ul+
		<xmp>
			<ul>
				<li></li>
			</ul>
		</xmp>
		
		ol+
		<xmp>
			<ol>
				<li></li>
			</ol>
		</xmp>
		
		select+	
		<xmp><select name="" id="">
				<option value=""></option>
			</select></xmp>
	</li>
	<li>
		<h2>10. 자식생성</h2>
		
		div>p
		<xmp>
			<div>
				<p></p>
			</div>
		</xmp>
		
		div>p*5		
		<xmp>
			<div>
				<p></p>
				<p></p>
				<p></p>
				<p></p>
				<p></p>
			</div>
		</xmp>	
		
		(div>p*2)*5		
		<xmp>
			<div>
				<p></p>
				<p></p>
			</div>
			<div>
				<p></p>
				<p></p>
			</div>
			<div>
				<p></p>
				<p></p>
			</div>
			<div>
				<p></p>
				<p></p>
			</div>
			<div>
				<p></p>
				<p></p>
			</div>
		</xmp>		
		
		table#tbl>tr*5>td*3		
		<xmp>
			<table id="tbl">
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</xmp>	
		
		table#tbl>tr*3>td.label+td.content		
		<xmp>
			<table id="tbl">
				<tr>
					<td class="label"></td>
					<td class="content"></td>
				</tr>
				<tr>
					<td class="label"></td>
					<td class="content"></td>
				</tr>
				<tr>
					<td class="label"></td>
					<td class="content"></td>
				</tr>
			</table>
		</xmp>	
		
		table#tbl>tr*3>td#label$+td.content
		<xmp>
			<table id="tbl">
				<tr>
					<td id="label1"></td>
					<td class="content"></td>
				</tr>
				<tr>
					<td id="label2"></td>
					<td class="content"></td>
				</tr>
				<tr>
					<td id="label3"></td>
					<td class="content"></td>
				</tr>
			</table>
		</xmp>
				
		table#tbl>(tr>th*3)+((tr>td*3)*5)
		<xmp>
			<table id="tbl">
				<tr>
					<th></th>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</xmp>
		
		
	</li>
	<li>
		<h2>11. 더미 키워드</h2>
		
		lorem
		<xmp>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe quaerat modi totam temporibus voluptas vero exercitationem voluptate alias facilis quis quia deserunt adipisci debitis cumque maiores. Minus aliquam doloribus dolore.
		</xmp>
		
		<h3>lorem을 태그사이에 넣으면 실행되지 않음</h3>
		<p>ㄴ 방법1) lorem뒤에 커서두고 실행</p>
		table>(tr>th*2)+(tr>(td{word}+td{lorem}))*3
		<xmp>
			<table>
				<tr>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<td>word</td>
					<td>lorem</td>
				</tr>
				<tr>
					<td>word</td>
					<td>lorem</td>
				</tr>
				<tr>
					<td>word</td>
					<td>lorem</td>
				</tr>
			</table>
		</xmp>
		
		<p>ㄴlorem을 함수처럼 사용</p>
		table>(tr>th*2)+(tr>(td{word}+lorem(td{desc})))*3
		<xmp>
			<table>
				<tr>
					<th></th>
					<th></th>
				</tr>
				<tr>
					<td>word</td>
					<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati exercitationem sed enim nam tempora aperiam magni aut. Minus eos beatae odio officia expedita fugit nesciunt molestiae eveniet error amet repellendus.</td>
				</tr>
				<tr>
					<td>word</td>
					<td>Optio dignissimos ipsa distinctio aperiam odit non ut repellendus odio maxime debitis nulla quos quisquam unde aliquam molestias consequatur ipsam perspiciatis consectetur omnis incidunt officiis eum vitae temporibus atque fuga.</td>
				</tr>
				<tr>
					<td>word</td>
					<td>Exercitationem tenetur voluptatibus non quam earum eveniet omnis soluta quibusdam dolorem sunt facilis esse incidunt inventore corporis nihil repudiandae at itaque quia officia provident tempore ea ad et ex commodi!</td>
				</tr>
			</table>
		</xmp>
	
	</li>
</ul>

</div>

</body>
</html>

ㄴㄴEmmetTest02.html_실습 1~3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" type="text/css" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h2>실습1</h2>
	h1#title.blue{Emmet}+(h2.subtitle{소제목}+p.content{내용})*5
	<xmp>
		<h1 id="title" class="blue">Emmet</h1>
		<h2 class="subtitle">소제목</h2>
		<p class="content">내용</p>
		<h2 class="subtitle">소제목</h2>
		<p class="content">내용</p>
		<h2 class="subtitle">소제목</h2>
		<p class="content">내용</p>
		<h2 class="subtitle">소제목</h2>
		<p class="content">내용</p>
		<h2 class="subtitle">소제목</h2>
		<p class="content">내용</p>
	</xmp>
	
	<h2>실습2</h2>
	table>(tr.line>(td.col{내용$}+td.comm{부연설명})*3)*3
	table>tr.line*3>((td.col{내용$})*3(td.comm{부연설명}))	
	
	<table>
		<tr class="line">
			<td class="col">내용1</td>
			<td class="comm">부연설명</td>
		</tr>
		<tr class="line">
			<td class="col">내용2</td>
			<td class="comm">부연설명</td>
		</tr>
		<tr class="line">
			<td class="col">내용3</td>
			<td class="comm">부연설명</td>
		</tr>
	</table>
	<xmp>
		<table>
			<tr class="line">
				<td class="col">내용1</td>
				<td class="comm">부연설명</td>
				<td class="col">내용2</td>
				<td class="comm">부연설명</td>
				<td class="col">내용3</td>
				<td class="comm">부연설명</td>
			</tr>
			<tr class="line">
				<td class="col">내용1</td>
				<td class="comm">부연설명</td>
				<td class="col">내용2</td>
				<td class="comm">부연설명</td>
				<td class="col">내용3</td>
				<td class="comm">부연설명</td>
			</tr>
			<tr class="line">
				<td class="col">내용1</td>
				<td class="comm">부연설명</td>
				<td class="col">내용2</td>
				<td class="comm">부연설명</td>
				<td class="col">내용3</td>
				<td class="comm">부연설명</td>
			</tr>
		</table>
	</xmp>
	
	<h2>실습3</h2>
	table#table>tr#line1*2>th#head${항목$}+td.col{내용$}*3
	<table id="table">
		<tr id="line1">
			<th id="head1">항목1</th>
			<td class="col">내용1</td>
			<td class="col">내용2</td>
			<td class="col">내용3</td>
		</tr>
		<tr id="line1">
			<th id="head2">항목2</th>
			<td class="col">내용1</td>
			<td class="col">내용2</td>
			<td class="col">내용3</td>
		</tr>
	</table>
	
	
</body>
</html>

#생각해 볼 것

- 파이널 프로젝트

ㄴ주제고민

ㄴ 어떻게 만들지 고민해보기

ㄴ 어떤 파트로 나눠서 할지.. 부족한 부분 공부하기

- 2/19부터 파이널 프로젝트 진행필수

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(81-82)[Web]17-18일차: ((JSP))🧨🎉✨ F_WebApp20(■ JDBC 연동 게시판 작성 실습 ■)✨🎉🧨 (0)	2023.12.19
(80)[Web]16일차: ((JSP)) ■ JSP 액션 태그(JSP Action Tag) ■, F_WebApp16~19 (5)	2023.12.18
(77-78)[Web]13-14일차: ((JSP))■ JAVA Bean(자바 빈) ■, F_WebApp10, F_WebApp11, F_WebApp12 (1)	2023.12.13
(76)[Web]12일차: ((JSP))F_WebApp07, F_WebApp08, F_WebApp09 (1)	2023.12.12
(75)[Web]11일차: ((JSP))F_WebApp07, 달력출력, ■ 포워딩(Forwarding)과 리다이렉트(Redirect) ■ (0)	2023.12.11

(79)[Web]15일차: ((JSP))■ 쿠키(Cookie)와 세션 ■, F_WebApp13, F_WebApp14, F_WebApp15, ■ Emmet(에밋) ■, F_EmmetApp