2. 로그아웃

쿠키 : 클라이언트(브라우저)에 저장되는 작은 데이터 조각

세션 : 서버측에서 사용자 상태 관리

/** 로그아웃 : Session에 저장된 로그인된 회원 정보를 없앰(만료, 무효화)
 * 
 * @param SessionStatus status : 세션을 완료(없앰) 시키는 역할의 객체
 * 			- @SessionAttributes 로 등록된 세션을 만료
 * 			- 서버에서 기존 세션 객체가 사라짐과 동시에
 * 			  새로운 세션 객체가 생성되어 클라이언트와 연결
 * 
 * @return "redirect:/"
 */
@GetMapping("logout")
public String logout(SessionStatus status) {
	
	status.setComplete(); // 세션을 완료 시킴(없앰)
	return "redirect:/"; // 메인페이지 재요청
}

3. 쿠키

메서드 매개변수 추가(@RequestParam, HttpServletResponse)

public String login(Member inputMember, 
					RedirectAttributes ra,
					Model model,
					@RequestParam(value="saveId", required = false) String saveId,
					HttpServletResponse resp ) {

// ************************************************************************

// 아이디 저장(Cookie)

// 쿠키 객체 생성 (K:V)
Cookie cookie = new Cookie("saveId", loginMember.getMemberEmail());
// saveId=user01@kh.or.kr

// 클라이언트가 어떤 요청을 할 때 쿠키가 첨부될지 지정


// ex) "/" : IP 또는 도메인 또는 localhost
// 			 뒤에 "/" --> 메인 페이지 + 그 하위 주소 모두
cookie.setPath("/");

// 만료 기간 지정
if(saveId != null) { // 아이디 저장 체크 시
	cookie.setMaxAge(60 * 60 * 24 * 30); // 30일(초 단위 지정) 
	
} else { //미체크 시
	cookie.setMaxAge(0); // 0초 (클라이언트 쿠키 삭제)
}

// 응답 객체에 쿠키 추가 -> 클라이언트로 전달
resp.addCookie(cookie);

main.js

// 쿠키에서 key가 일치하는 value 얻어오기 함수

// 쿠키는 "K=V; K=V; K=V..." 

// 배열.map(함수) : 배열의 각 요소를 이용해 함수 수행 후
//                 결과값으로 새로운 배열을 만들어서 반환

const getCookie = key => {

    const cookies = document.cookie; // "K=V; K=V"

    // cookies 문자열을 배열 형태로 변환
    const cookieList = cookies.split("; ") // ["K=V", "K=V"]
                    .map( el => el.split("=") ); // ["K", "V"]..

    // 배열 -> 객체로 변환 (그래야 다루기가 쉽다.)

    const obj = {}; // 비어있는 객체 선언

    for(let i=0; i<cookieList.length; i++) {
        const k = cookieList[i][0]; // key 값
        const v = cookieList[i][1]; // value 값
        obj[k] = v; // 객체에 추가
    }

    return obj[key];
    // 매개변수로 전달 받은 key와
    // obj 객체에 저장된 키가 일치하는 요소의 value값 변환
}

const loginEmail = document.querySelector("#loginForm input[name='memberEmail']");

// 로그인 안된 상태인 경우에 수행
if(loginEmail != null) { // 로그인창의 이메일 입력부분이 화면에 있을 때

    // 쿠키 중 key 값이 "saveId"인 요소의 value 얻어오기
    const saveId = getCookie("saveId"); // undefined 또는 이메일

    // saveId 값이 있을 경우
    if(saveId != undefined) {
        loginEmail.value = saveId; // 쿠키에서 얻어온 값을 input에 value로 세팅

        // 아이디 저장 체크박스에 체크 해두기
        document.querySelector("input[name='saveId']").checked = true;
    }
}

문자열 -> 배열 형태로 변환

const cookieList = cookies.split("; ") // ["K=V", "K=V"]
                    .map( el => el.split("=") ); // ["K", "V"]..

배열 -> 객체로 변환

// 배열 -> 객체로 변환 (그래야 다루기가 쉽다.)

const obj = {}; // 비어있는 객체 선언

for(let i=0; i<cookieList.length; i++) {
    const k = cookieList[i][0]; // key 값
    const v = cookieList[i][1]; // value 값
    obj[k] = v; // 객체에 추가
}