240305 스프링 프로젝트

오늘은 쿠키와 세션에 대해 알아보기

세션

서버에 저장

로그인 등 보안이 중요한 곳에 사용

속도는 쿠키에 비해서 느림, 보안 높음

쿠키

브라우저에 저장

장바구니, 자동 로그인, 쇼핑 정보 등에 사용할 수 있음

속도는 세션에 비해서 빠름, 보안은 낮음

클라이언트에 총 300개의 쿠키를 저장할 수 있음

도메인당 20개만 가질 수 있음

쿠키의 크기는 4096byte(4KB) 까지 저장

 

브라우저 개발자 모드(F12) 의 Application 내에서 볼 수 있음

내 블로그의 쿠키가 저장된 모습

 

세션과 쿠키의 차이점

쿠키는 이름, 값, 유효시간, 도메인, 경로 등을 저장

쿠키는 자동으로 삭제가 되지 않고 유효시간 경과 혹은 직접 삭제해야만 삭제

 

로그인할 때 아이디 저장하는 쿠키 만들어보기

로그인 할 때 로그인하는 아이디 저장하는 버튼 만들기

<div class="text-start">
  <input type="checkbox" id="saveID" class="saveID" />
  <label for="saveID">아이디 저장</label>
</div>

 

스크립트에서 아이디 체크 시 쿠키 저장하기

if ($('#saveID').is(':checked')) {
  setCookie('testCookie', id.value, 30);
}

 

setCookie 함수는 이렇게 되어있음

// 쿠키 저장하는 함수, 쿠키 이름, 값, 기한
function setCookie(cookieName, value, exdays) {
  // 오늘 날짜 뽑기
  let date = new Date();
  alert(date); // Tue Mar 05 2024 10:38:56 GMT+0900 (한국 표준시)
  alert("오늘 날짜 : " + date.getDate() + " / 30 더한 날짜 : " + date.getDate() + exdays);
  // 오늘 날짜 : 5 / 30 더한 날짜 : 530 -> 오늘 날짜는 일자가 나옴, 30 더한 것은 문자열을 더한 것
  alert(date.setDate(date.getDate() + exdays)); // 1712194969170
  date.setDate(date.getDate() + exdays);
  document.cookie = cookieName + "=" + escape(value) + "; expires=" + date.toUTCString(); // 쿠키 저장하기
  // 쿠키 이름=쿠키에 저장될 내용; 쿠키 유효시간=정규시간
  // escape() : 아스키 문자에 해당하지 않는 문자들은 모두 유니코드 형식으로 변환
}

 

쿠키가 저장되어 있는 모습

쿠키를 가져와 인풋창에 넣어주기

getCookie 메소드 생성

// 쿠키 가져오기
function getCookie(cookieName){
  let x;
  let y;
  let val = document.cookie.split(';');
  alert("가져운 쿠키값 : " + val);
  for(let i = 0; i < val.length; i++) {
    x = val[i].substr(0, val[i].indexOf('=')); // 저장한 쿠키 이름
    y = val[i].substr(val[i].indexOf('=') + 1); // 쿠키 내용
    x = x.replace(/^\s+|\s+$/g, ''); // 앞뒤 공백 제거하기
    if (x == cookieName) {
      return y;
    }
  }
}

for 문으로 저장된 쿠키를 가져와 쿠키 이름과 쿠키 내용을 저장된 값 마다 비교
입력이 들어온 쿠키 이름과 저장된 쿠키 이름이 같으면 해당 쿠키 값을 리턴

 

쿠키를 가져와서 해당 값을 id 쪽에 넣어주기

$(function() {
  // cookie 가져오기
  let getId = getCookie('userInputId');
  let cookieYN = getCookie('setCookieYN');
    
  if (cookieYN == 'Y') {
    $('#id').val(getId); // 쿠키에서 뽑은 값 넣어주기
    $('#saveID').prop('checked', 'true');
  }

 

아이디 저장을 체크하지 않았을 때 쿠키 삭제하기

if ($('#saveID').is(':checked')) {
  setCookie('userInputId', id.value, 30);
  setCookie('setCookieYN', 'Y', 30);
} else {
  // 사용자가 ID 저장을 누르지 않으면 저장하지 않음
  delCookie('userInputId');
  delCookie('setCookieYN');
}

 

delCookie() 생성하기

// 쿠키 삭제하기
function delCookie(cookieName) {
  let date = new Date();
  date.setDate(date.getDate() - 1); // 날짜가 하루 지난것으로 설정
  document.cookie = cookieName + "=; expires" + date.toUTCString();
  // 쿠키의 유효기간이 오늘 날짜보다 작아 쿠키 유효기간이 끝남
  document.cookie = cookieName + "=; max-age=0"; // 이렇게도 가능
}

 

기존 생성되어 있는 쿠키

체크 해제하니 쿠키가 삭제된 것을 확인

 

게시글 detail 만들기

게시글 제목 클릭 시 새 창으로 열리게 하기

<td><a href="./detail?no=${list.board_no }" target="_blank">${list.board_title }</a>

 

AdminController 에 detail 생성

@GetMapping("/detail")
public String detail(Model model, @RequestParam(value = "no", defaultValue = "-1", required = true) String no) {
  // HttpServletRequest 로 기존에 배웠던 request.getParameter 사용 가능
  // String no 로 변수 이름과 일치하는 파라미터 값 조회 가능
  int reNo = util.str2Int(no);
  if (reNo != -1) {
    BoardDTO boardDTO = adminService.detail(reNo);
    model.addAttribute("detail", boardDTO);
    return "admin/detail";
  } else {
    return "redirect:/error"; // controller 에 있는 error 매핑을 실행
  }
}

 

Service, Repositody 와 Mapper 설정

public BoardDTO detail(int reNo) {
  return adminRepository.detail(reNo);
}

public BoardDTO detail(int no) {
  return sqlSession.selectOne("admin.detail", no);
}

<select id="detail" parameterType="Integer" resultType="boardDTO">
  select board_no, board_title, board_content,
  (select mid from member where mno=board.mno) as mid,
  (select mname from member where mno=board.mno) as mname,
  board_date, board_ip,
  (select count(0) from visitview where board_no = #{no}) as board_count,
  (select COUNT(*) from comment where board_no = #{no}) as comment
  from board where board_no=#{no}
</select>

 

기존 admin 의 index.jsp 와 전 detail.jsp 를 복사해서 만들기

<div class="container-fluid">
  <div>
    <h1 class="d-inline h3 mb-4 text-gray-800">자세히 보기</h1>
  </div>
  <div class="d-flex justify-content-center align-items-center">
    <div class="row text-center">
      <div class="btitle text-start fs-3">${detail.board_title }</div>
      <hr>
      <div class="detailInfo">
        <span class="mname">${detail.mname }</span>
        <span class="bcount">${detail.board_count }</span>
      </div>
      <div class="detailInfo">
        <span class="bdate text-start">${detail.board_date }</span>
        <span class="bdate text-start">${detail.board_ip }</span>
      </div>
      <hr>
      <div class="bcontent text-start">${detail.board_content }</div>
    </div>
    <div class="buttonList">
      <button class="btn btn-outline-dark" onclick="location.href='./boardList'">/board</button>
      <button class="btn btn-outline-dark" onclick="history.back()">back</button>
      <button class="btn btn-outline-dark" onclick="history.go(-1)">go(-1)</button>
    </div>
    <hr id="commentHr">
  </div>
</div>