JDBC 개발자 수업 87일차 - 쿠키(cookie) - 팝업창 만들기, CSS 제어

1. 팝업창 만들기

2. CSS 제어

---

1. 팝업창 만들기

- 이전에 수업 예제로 만들었던 게시판(Board) 에서 쿠키를 이용해서 팝업창을 띄워보자

[ cookie.js 만들기 ]

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

 

[ Servlet > 가상 주소 매핑 ]

@WebServlet("/index.do")
public class Index extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/index.jsp");
		dispatcher.forward(req, resp);
	}

}

 

[ JSP > 팝업창 만들기 + getCookie/setCookie 사용하기 ]

1) body 부분

<!-- 팝업창 만들기 -->
<div class="popup">
	<div class="popup-main">
		<h3>공지 사항</h3>
		<div>- 새로운 기능이 추가되었습니다.</div>
		<div>- 새로운 기능이 추가되었습니다.</div>
		<div>- 새로운 기능이 추가되었습니다.</div>
		<div>- 새로운 기능이 추가되었습니다.</div>
		<div>- 새로운 기능이 추가되었습니다.</div>
	</div>
	<div class="popup-footer">
		<label>
			<input type="checkbox" id="cbpopup" />
			24시간 동안 열지 않겠습니다.
		</label>
		<a href="#!" title="닫기">&times;</a>
	</div>			
</div>

 

 

2) style 부분

<style>
	.popup {
		border: 1px solid #999;
		border-radius: 5px;
		width: 250px;
		height: 350px;
		box-shadow: 1px 1px 1px #CCC;
		position: absolute;
		left: 300px;
		top: 150px;
		background-color: white;
	}
	
	.popup .popup-main {
		padding: 10px;
	}
	
	.popup .popup-footer {
		border-top: 1px solid #999;
		padding: 5px;
		background-color: #EEE;
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.popup .popup-footer label {
		font-weight: normal;
	}
	
	.popup .popup-footer a {
		margin: 5px 5px 0px 0px;
	}
</style>

 

3) JS 부분

<script>
	
	$('.popup-footer > a').click(function() {
		$('.popup').hide();
		
		// 체크박스 체크 유무
		if ($('#cbpopup').prop('checked')) {
			
			// 쿠키 저장
			setCookie('popup', '1', 1);
		}
	});
	
	
	// 페이징 로딩 > 팝업 처리
	if (getCookie('popup') != null && getCookie('popup') != '') {
		$('.popup').hide();
	} 
	
</script>

 

- 결과 페이지

페이지 접속시 흔히 볼 수 있는 팝업창이 있는걸 볼 수 있다.

- 결과 페이지 > 24시간 동안 열지 않겠습니다 버튼 클릭 후 모습

버튼 클릭후 새로고침 후 팝업창이 사라진 페이지 모습이다.

 

2. CSS 제어

- 팝업창과 마찬가지로 이전에 수업 예제로 만들었던 게시판(Board) 에서 쿠키를 이용해서 CSS를 제어해보자.

 

[ Servlet > 가상 주소 매핑 ]

@WebServlet("/member/option.do")
public class Option extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/member/option.jsp");
		dispatcher.forward(req, resp);

	}

}

 

[ JSP > 색상 선택 폼 만들기 + 쿠키에 저장할 JS 만들기 ]

1) body 부분

<div class="well well-sm">
   <label><input type="radio" name="menucolor" class="menucolor" value="tomato"> <span style="background-color: tomato; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
   <label><input type="radio" name="menucolor" class="menucolor" value="cornflowerblue"> <span style="background-color: cornflowerblue; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
   <label><input type="radio" name="menucolor" class="menucolor" value="gold"> <span style="background-color: gold; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
   <label><input type="radio" name="menucolor" class="menucolor" value="black"> <span style="background-color: black; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
</div>

<h3>Member</h3>
<div class="well well-sm">
   <label><input type="radio" name="membercolor" class="membercolor" value="tomato"> <span style="background-color: tomato; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
   <label><input type="radio" name="membercolor" class="membercolor" value="cornflowerblue"> <span style="background-color: cornflowerblue; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
   <label><input type="radio" name="membercolor" class="membercolor" value="gold"> <span style="background-color: gold; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
   <label><input type="radio" name="membercolor" class="membercolor" value="black"> <span style="background-color: black; display: inline-block; border-radius: 3px; width: 15px; height: 12px;">&nbsp;</span></label>
</div>

 

2) JS 부분

<script>
	
	$('.menucolor').eq(0).prop('checked', true);
	$('.membercolor').eq(1).prop('checked', true);
	
	$('.menucolor').change(function() {
		// 4가지 색상 중 누구를 선택했는지?
		$('.menucolor').each(function(index, item) {
			if ($(item).prop('checked')) {
				//alert($(item).val());
				$('.main-header > section > nav > ul > li').css('color', $(item).val());
				
				// 선택한 색상을 쿠키에 저장
				setCookie('menucolor', $(item).val(), 365);
			}
		});
	});

	$('.membercolor').change(function() {
		$('.membercolor').each(function(index, item) {
			if ($(item).prop('checked')) {
				$('.main-header > section > .auth > .btn-auth').css('color', $(item).val());
				setCookie('membercolor', $(item).val(), 365);
			} 
		});
	});

</script>

 

- 결과 페이지

색상을 선택할 수 있는 각각의 radio 버튼을 클릭 하면 header 부분의 색상이 변하는걸 볼 수 있다. 

 

- 결과페이지 > 색상을 변경하고 새로고침 후 홈 화면에 돌아가도 색상이 그대로 남아있는 모습

기본 검정색으로 되어있던 color가 radio버튼을 체크해 해당 color로 변하면서 그대로 남아있는 모습이다.

 

[ Cookie vs Session vs DB ]

데이터 저장소	설명
Cookie	- 개인 설정 저장   - 장소(현재 PC에서만 읽기/쓰기 가능)   - 한번 저장 > 모든 페이지 접근 가능   - 사용자 임의 삭제 가능   - 중요한 데이터는 쿠키에 저장하지 말 것 (중요 데이터는 DB에 저장할 것)
Session	- 개인 설정 저장   - 장소(X) > 현재 접속 중 일때만 사용 가능   - 중요한 데이터를 저장가능 > 사용자 임의 삭제 불가능 > 서버 프로그램을 통해서만 삭제 가능   - 영구 보관 불가능
DB	- session과 cookie를 합친것보다 좋다.   - 개인 설정 저장   - 장소 불문 > 어디서든 어떤 PC를 사용하든 모두 지속적으로 접근 가능   - 중요한 데이터 저장   - 영구 보관 가능   - 고 비용

 

---

MEMO>

# 쿠키는 유용하지만, 중요 데이터는 저장을 못한다 !! > 개발자모드(F12)에서 쿠키 제거 가능 및 크롬기능에서 쿠키삭제할 수도 있음..

# CSS를 적용 후 웹 페이지 새로고침을 해도 적용이 안된다면? 개발자모드(F12)를 열고 새로고침 버튼을 꾹 누른 뒤 캐시 비우기를 클릭하면된다. ( 꼭 F12를 열고 해야함 )

# 웹 프로젝트 2주차 !!