🌱[구디아카데미 IT국비지원]

김희진·2023년 5월 2일

IT국비지원 include 구디아카데미 세션 카테고리별 회원전용 게시판 프로젝트

GDJ 66기 - 클라우드 활용 자바 개발자 양성과정

목록 보기

19/25

[구디아카데미 IT국비지원] 세션(session)에 대해 배우고 로그인과 회원가입 기능을 구현해보았다.

💡 세션(session)

지금까지 우리는 페이지에 변수를 만들어 사용할 정보를 저장했다. 그래서 다른 페이지에서 그 정보를 사용하고 싶으면, request.getParameter 메서드를 이용하여 정보를 불러왔다. 하지만 이 방법은 페이지마다 계속해서 정보를 불러와야한다는 큰 단점이 있다. A페이지에서 입력받은 정보를 B,C,D 페이지 모두에서 사용해야한다면 A페이지부터 D페이지까지 계속해서 정보를 받아와야하는 것이다.

<!-- 웹어플리케이션 사용자 -->
	<!-- 
		클라이언트(pc기준이 아니고 웹브라우저 기준) -> 서버(웹서버)
	-->
	
	ex1.jsp session id : <%=session.getId()%> <!-- 세션id 출력 -->
	<a href="./logout.jsp">로그아웃</a>

이때 세션(session)을 이용하면 이 문제를 해결할 수 있다. 세션은 클라이언트(사용자)가 웹서버에 최초 접속시에 부여되는데, 이때 클라이언트를 식별하는 기준은 pc기준이 아닌 웹브라우저 기준이다. 즉, 내가 하나의 pc로 각각 다른 웹브라우저로 웹서버에 접속한다면 각각 다른 세션을 부여받게 된다. (=물리적기준이 아닌 소프트웨어가 기준!)

<!-- ex.1에서 2로 이동해도 동일한 브라우저면 세션id는 바뀌지 않음 -->
	<!-- 단, 내가 설정한 일정 시간(디폴트 30분)이 지나면 바뀜 -->
	ex2.jsp session id : <%=session.getId()%> <!-- 세션id 출력 -->

세션은 마지막 응답시간이 설정된 일정시간 (톰캣 디폴트는 30분)을 지나면 소멸된다. 또는 강제로 세션아웃(로그아웃)시킬 수도 있다. 사용자가 페이지에 가만히 잔류해있다고 해도 그것은 연결이 유지된 상태가 아니다. 요청과 응답이 이루어지면 연결은 바로 끊어진다. 대표적인 예로 은행어플이나 홈페이지를 생각하면 이해가 쉽다. 은행은 특히 세션이 짧다. 로그인을 유지하려면 새로고침(요청)을 해주어야하고, 마지막으로 요청된 후로 일정한 시간이 지나면 로그아웃된다. 세션이 소멸된 것이다.

// 세션을 강제로 종료하는 방법
	
	session.invalidate();
	response.sendRedirect("./ex1.jsp");

(로그아웃은 정확히 말하면 기존 세션을 소멸 시킨뒤에 새로운 세션을 부여하는 것이라고 볼 수 있다. 왜냐하면 로그아웃 시 새로운 세션이 부여되는 시작 페이지로 리다이렉션 시키기 때문이다.)

결론적으로, 우리가 웹페이지를 만들 때에는 페이지 변수가 아닌 세션 변수를 이용해야한다. 저번 다이어리 프로젝트는 페이지 변수를 이용했기 때문에 나의 일정밖에 출력하지 못했다. 하지만 세션 변수를 이용한다면, 사용자마다 다른 일정을 출력할 수 있을 것이다!

📍 attribute1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	// 페이지 변수는 다른페이지에서 호출할 수 없다 -> 컴파일 에러
	String name = "page local variable : gdj66";
	// 페이지 속성 변수는 다른페이지에서 호출은 가능하지만 null값이 호출된다.
	pageContext.setAttribute("x", "pageContext:gdj66");
%>
	<div><%=name%></div>
	<div>페이지 속성 변수 - <%=pageContext.getAttribute("x")%></div>
	
<%
	// 세션 속성 변수
	session.setAttribute("y1", "session:gdj66");
	session.setAttribute("y2", Math.random());
%>	
	<div>세션 속성 변수 - <%=session.getAttribute("y1")%></div>
	<div>세션 속성 변수(Random) - <%=session.getAttribute("y2")%></div>

<%
	// 어플리케이션 속성 변수
	application.setAttribute("z", Math.random());
%>	
	<div>어플리케이션 속성 변수 - <%=application.getAttribute("z")%></div>
	
	
	<div><a href="./attribute2.jsp">attribute2</a></div>	
	

</body>
</html>

📍 attribute2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 
		attribute1.jsp의 name변수는 사용시 컴파일 에러
	 -->
	<div>페이지 속성 변수 - <%=pageContext.getAttribute("x")%></div>
	
	<div>세션 속성 변수 - <%=session.getAttribute("y1")%></div>
	<div>세션 속성 변수(Random) - <%=session.getAttribute("y2")%></div>
	
	<div>어플리케이션 속성 변수 - <%=application.getAttribute("z")%></div>
</html>

📍 결과

페이지 속성 변수는 페이지가 attribute2.jsp로 바뀌자 null값이 된 것을 볼 수 있다.
어플리케이션 속성 변수는 각각 부여되는 고유한 영역이 아니라 공동으로 사용하는 영역이다. was가 종료되면 소멸된다.

📌 로그인 폼 만들어보기

📍 loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	// 로그인하지 않은 사용자만 접근 가능한 페이지
	if(session.getAttribute("loginId") != null) {
		response.sendRedirect(request.getContextPath() + "/home.jsp");
		return;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>로그인 폼</h1>
	<% 	// 로그인 실패시 (msg 발생시) 에러메세지 출력
		if(request.getParameter("msg") != null) {
	%>
			<div><%=request.getParameter("msg")%></div>
	<%
		}
	%>
	
	<!-- 절대주소로 적기 위해 프로젝트 이름을 호출하는 메서드 사용, 추후 프로젝트 이름이 바뀌어도 수정할 필요가 없음! -->
	<form action="<%=request.getContextPath()%>/loginAction.jsp" method="post">
		<table>
			<tr>
				<td>아이디</td>
				<td>
					<input type="text" name="id">
				</td>
			</tr>
			<tr>
				<td>패스워드</td>
				<td>
					<input type="password" name="pw">
				</td>
			</tr>
		</table>
		<button type="submit">로그인</button>
	</form>
</body>
</html>

request.getContextPath() : 상대주소 대신에 절대주소를 적을 때 ./이 아니라 프로젝트명을 직접 입력해도 된다. 하지만 프로젝트 명은 언제든지 바뀔 수 있는 이름이다. 그때마다 프로젝트명을 입력한 모든 코드를 수정하는 것은 어려울 것이다. 그래서 프로젝트명의 이름을 받아오는 메서드를 사용한다.

📍 결과

📍 loginAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.net.URLEncoder"%> <!-- 한글 깨지지 않게 넘기는 메서드 -->
<%
	// 글자가 깨지거나 안깨지거나 인코딩 꼭 해주기
	request.setCharacterEncoding("utf-8");

	// input 태그에 입력한 id, pw 파라미터값 변수에 받아오기
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	// 디버깅
	System.out.println(id + " <- loginAction id");
	System.out.println(pw + " <- loginAction pw");
	
	// db 접근 후 멤버테이블에 입력한 값과 일치하는 행이 있으면 -> 로그인 성공 / 없으면 -> 로그인 실패
	// id가 기본키가 됨 (중복이 될 수 없게)
	// SELECT * FROM member WHERE id=? AND pw=?
			
	final String tableId = "admin";
	final String tablePw = "1234";
	
	if(tableId.equals(id) && tablePw.equals(pw)) {
		System.out.println("loginAction 로그인 성공");
		session.setAttribute("loginId", id); // 로그인 성공 정보를 (사용자 id를) 세션에 저장
		response.sendRedirect(request.getContextPath() + "/home.jsp"); // 로그인 성공시 홈으로
	} else {
		System.out.println("loginAction 로그인 실패");
		String msg = URLEncoder.encode("ID와 PW를 다시 입력해주세요!", "utf-8"); // 한글 깨지지 않게 넘기는 메서드
		response.sendRedirect(request.getContextPath() + "/loginForm.jsp?msg="+msg); // 로그인 실패시 msg와 함께 폼페이지로
	}
%>

URLEncoder.encode : 리다이렉션 시 한글로 된 값을 에러 없이 보낼 수 있는 메서드. <%@ page import="java.net.URLEncoder"%>로 page import한다.

📍 home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.net.URLEncoder"%>
<%
	//로그인 성공한 사용자만이 접근 가능한 페이지 
	if(session.getAttribute("loginId") == null) {
		String msg = URLEncoder.encode("잘못된 접근입니다!", "utf-8");
		response.sendRedirect(request.getContextPath() + "/loginForm.jsp?msg=" + msg);
		return;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String loginId = (String)session.getAttribute("loginId"); // String 타입으로 형변환
	%>
	<h1>홈</h1>
	<div>
		<%=loginId%>님 반갑습니다!
		<a href="<%=request.getContextPath()%>/logoutAction.jsp">로그아웃</a>
	</div>
</body>
</html>

세션에 저장되는 값을 불러올 때 session.getAttribute 메서드를 사용하는데 이때 리턴타입은 Object타입이므로 형변환이 필요하다!

📍 결과

📍 logoutAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	session.invalidate(); // 세션의 모든 속성을 제거 즉, 세션 초기화(무효화)
	response.sendRedirect(request.getContextPath() + "/loginForm.jsp");
%>

이때 굳이 처음에 세션 유효성 검사(로그인한 상태인지 아닌지)를 할 필요는 없다. 어짜피 이곳에서 세션을 초기화하고 loginForm.jsp로 리다이렉션하기 때문이다.

💡 db연결하여 기능 구현하기

본격적으로 db와 연결하여 로그인과 회원가입 기능을 구현하기 위해 새로운 데이터 베이스를 생성했다.

라이브러리 설정 변경

webapp폴더내에 폴더를 생성하여 파일을 관리하기로 했다.

📌 home.jsp

📍 작성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		<jsp:include page="/inc/mainmenu.jsp"></jsp:include>
	</div>
	
	<div>
		<!-- 홈내용 : 로그인폼(로그인 안했을때만), 카테고리별 게시글 5개씩 -->
		<!-- 로그인폼 -->
		<%
			if(session.getAttribute("loginMemberId") == null) {
		%>
			<h1>로그인</h1>
			<%
				if(request.getParameter("msg") != null) {
			%>
					<%=request.getParameter("msg")%>
			<%
				}
			%>
			<form action="<%=request.getContextPath()%>/member/loginAction.jsp" method="post">
				<table>
					<tr>
						<td>아이디</td>
						<td>
							<input type="text" name="memberId">
						</td>
					</tr>
					<tr>
						<td>패스워드</td>
						<td>
							<input type="password" name="memberPw">
						</td>
					</tr>
				</table>
				<button type="submit">로그인</button>
			</form>
		<%
			}
		%>
		<!-- 카테고리별 게시글 5개씩 -->
	</div>
	
	<div>
		<!-- include 페이지 : Copyright &copy; 구디아카데미 -->
		<%
			// request.getRequestDispatcher(request.getContextPath()+"./inc/copyright.jsp").include(request, response);
			// 자주 쓰지만 너무 길다. 그래서 액션태그를 활용한다!
		%> 
		<jsp:include page="/inc/copyright.jsp"></jsp:include> <!-- 액션태그 -->
	</div>
</body>
</html>

✔ include

메인메뉴나 copyright처럼 상단이나 하단에 반복적으로 출력되는 부분은 include을 활용하면 좋다. 매우 많은 수의 페이지를 작업할 때에 이 부분을 수정하기 위해 모든 페이지를 열어 수정하는 것은 어려울 것이기 때문이다. 액션태그 말고도 커스텀태그를 활용하는 방법도 있다. 이 방법은 추후에 배울 예정!

include 시에는 프로젝트 명 즉, request.getContextPath()을 작성할 필요가 없다. 이미 그 프로젝트 안의 페이지에서 요청하는 것이기 때문이다. 반면 a태그나 리다이렉션 시에는 외부라고 볼 수 있는 웹브라우저 상에서 요청하는 것이기 때문에 프로젝트 명을 작성해주는 것이다.

📍 mainmenu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div>
	<ul>
		<li><a href="<%=request.getContextPath()%>/home.jsp">홈으로</a></li>
		<!-- 로그인전: 회원가입
			 로그인후: 회원정보 / 로그아웃
			 로그인정보: 세션 loginMemberId -->
		<%
			if(session.getAttribute("loginMemberId") == null) { // 로그인 전
		%>
				<li><a href="<%=request.getContextPath()%>/member/insertMemberForm.jsp">회원가입</a></li>
		<%
			} else { // 로그인 후
		%>
				<li><a href="<%=request.getContextPath()%>/">회원정보</a></li>
				<li><a href="<%=request.getContextPath()%>/member/logoutAction.jsp">로그아웃</a></li>
		<%
			}
		%>
	</ul>
</div>

📍 copyright.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Copyright &copy; 구디아카데미

📍 결과

📌 logoutAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	session.invalidate(); // 기존 세션을 지우고 갱신
	response.sendRedirect(request.getContextPath() + "/home.jsp");
%>

📌 Member.java

사용자가 입력한 값(파라미터값)을 담을 클래스를 생성했다.

📌 loginAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<%@ page import = "java.net.*" %> <!-- ??? -->
<%@ page import = "vo.*" %>
<%
	// 세션 유효성 검사 
	if(session.getAttribute("loginMemberId") != null) { // 로그인되어있는 상태면 이 페이지에 올 수 없다
		response.sendRedirect(request.getContextPath() + "/home.jsp");
		return;
	}
	// 요청값 유효성 검사
	String memberId = request.getParameter("memberId");
	String memberPw = request.getParameter("memberPw");
	// 디버깅
	System.out.println(memberId + " <- loginAction memberId");
	System.out.println(memberPw + " <- loginAction memberPw");
	// 클래스에 값 모아서 넣기
	Member paramMember = new Member();
	paramMember.memberId = memberId;
	paramMember.memberPw = memberPw; 
	
	// db 접속
	String driver = "org.mariadb.jdbc.Driver";
	String dburl = "jdbc:mariadb://127.0.0.1:3306/userboard";
	String dbuser = "****";
	String dbpw = "****";
	Class.forName(driver);
	Connection conn = null;
	PreparedStatement stmt = null;
	ResultSet rs = null;
	conn = DriverManager.getConnection(dburl, dbuser, dbpw);
	
	// 동적쿼리 작성
	String sql = "SELECT member_id memberId FROM member WHERE member_id = ? AND member_pw = PASSWORD(?)"; // 패스워드 암호화 해주기
	stmt = conn.prepareStatement(sql);
	stmt.setString(1, paramMember.memberId);
	stmt.setString(2, paramMember.memberPw);
	// 디버깅
	System.out.println(stmt + " <- loginAction sql");
	
	rs = stmt.executeQuery();
	if(rs.next()) { // 일치하는 값이 있으면 (true) 로그인 성공
		// 세션에 로그인 정보(memberid)를 저장
		session.setAttribute("loginMemberId", rs.getString("memberId"));
		System.out.println("로그인 성공! 세션정보 : " + session.getAttribute("loginMemberId"));
	} else { // 로그인 실패
		System.out.println("로그인 실패!");
	}
	
	// 홈으로 리다이렉션
	response.sendRedirect(request.getContextPath() + "/home.jsp");
%>

세션 유효성 검사 잊지 말기
member_pw = PASSWORD(?) : 비밀번호는 암호화해서 다루어야하기 때문에 쿼리 작성시에 꼭 PASSWORD를 붙여준다.

💡 과제

회원가입 기능을 직접 추가해보았다.

✔ 구현해야할 점

회원가입 성공/실패 시 메세지 출력
id 중복 검사

📌 insertMemberForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	//세션 유효성 검사 // 로그인되어있는 상태면 이 페이지에 올 수 없음
	if(session.getAttribute("loginMemberId") != null) {
		response.sendRedirect(request.getContextPath() + "/home.jsp");
		return;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insertMemberForm.jsp</title>
</head>
<body>
	<div> <!-- mainmenu include -->
		<jsp:include page="/inc/mainmenu.jsp"></jsp:include>
	</div>
	
	<!-- 회원가입 폼 -->
	<h1>회원가입</h1>
		<!-- 회원가입 실패시 에러메세지 출력 -->
		<%
			if(request.getParameter("msg") != null) {
		%>
				<%=request.getParameter("msg")%>
		<%
			}
		%>
		<form action="<%=request.getContextPath()%>/member/insertMemberAction.jsp" method="post">
			<table>
				<tr>
					<td>아이디</td>
					<td>
						<input type="text" name="memberId" placeholder="아이디를 입력해주세요">
					</td>
				</tr>
				<tr>
					<td>패스워드</td>
					<td>
						<input type="password" name="memberPw" placeholder="패스워드를 입력해주세요">
					</td>
				</tr>
			</table>
			<button type="submit">회원가입</button>
		</form>
		
	<div> <!-- copyright include -->
		<jsp:include page="/inc/copyright.jsp"></jsp:include>
	</div>
</body>
</html>

📌 insertMemberAction.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import = "java.sql.*" %>
<%@ page import = "java.net.URLEncoder"%> <!-- msg 한글 메세지가 깨지지 않도록 -->
<%@ page import = "vo.*" %>
<%
	// method가 post방식이므로 인코딩
	request.setCharacterEncoding("utf-8");

	//세션 유효성 검사 // 로그인되어있는 상태면 이 페이지에 올 수 없음
	if(session.getAttribute("loginMemberId") != null) { 
		response.sendRedirect(request.getContextPath() + "/home.jsp");
		return;
	}
	// 요청값 유효성 검사 및 msg 발생
	String msg = null;
	if(request.getParameter("memberId") == null
			|| request.getParameter("memberId").equals("")) {
		msg = URLEncoder.encode("아이디가 입력되지 않았습니다", "utf-8");
	} else if(request.getParameter("memberPw") == null
			|| request.getParameter("memberPw").equals("")) {
		msg = URLEncoder.encode("비밀번호가 입력되지 않았습니다", "utf-8");
	}
	if(msg != null) { // msg 발생시 (회원가입 실패시) form 페이지로
		response.sendRedirect(request.getContextPath() + "/member/insertMemberForm.jsp?msg=" + msg);
		return;
	}
	
	// null이거나 공백이 아니면 값 불러오기
	String memberId = request.getParameter("memberId");
	String memberPw = request.getParameter("memberPw");
	System.out.println(memberId + " <- insertMemberAction memberId");
	System.out.println(memberPw + " <- insertMemberAction memberPw");
	
	// 파라미터값 클래스에 저장
	Member paramMember = new Member();
	paramMember.memberId = memberId;
	paramMember.memberPw = memberPw; 
	
	// 드라이버 로딩 및 db 접속
	String driver = "org.mariadb.jdbc.Driver";
	String dburl = "jdbc:mariadb://127.0.0.1:3306/userboard";
	String dbuser = "****";
	String dbpw = "****";
	Class.forName(driver);
	Connection conn = DriverManager.getConnection(dburl, dbuser, dbpw);
	PreparedStatement stmt1 = null;
	PreparedStatement stmt2 = null;
	ResultSet rs = null;
	
	// id 중복검사
	// 해당 id가 데이터에 존재하는지(where) count 해본다
	String sql1 = "SELECT count(*) FROM member WHERE member_id = ?";
	stmt1 = conn.prepareStatement(sql1);
	stmt1.setString(1, paramMember.memberId);
	System.out.println(stmt1 + " <- insertMemberAction select count sql");
	rs = stmt1.executeQuery();
	
	// 중복된 id 갯수 확인
	int cnt = 0;
	if(rs.next()) {
		cnt = rs.getInt("count(*)");
		// 해당 id의 갯수를 cnt 변수에 저장
		// 0일 경우 중복 없음 
	}
	
	// 0보다 클 경우 중복 있음 // form으로 리다이렉션
	if(cnt > 0) {
		System.out.println(cnt + " <- insertMemberAction 중복된 아이디 갯수");
		msg = URLEncoder.encode("중복된 아이디입니다", "utf-8");
		response.sendRedirect(request.getContextPath() + "/member/insertMemberForm.jsp?msg=" + msg);
		return;
	} else {
		System.out.println("insertMemberAction 중복된 아이디 없음");
	}
	
	// 회원가입 정보 insert // 패스워드 암호화해서 작성
	String sql2 = "INSERT INTO member(member_id, member_pw, createdate, updatedate) VALUES(?, PASSWORD(?), NOW(), NOW())";
	stmt2 = conn.prepareStatement(sql2);
	stmt2.setString(1, paramMember.memberId);
	stmt2.setString(2, paramMember.memberPw);
	System.out.println(stmt2 + " <- insertMemberAction insert sql");
	
	// 쿼리가 잘 실행되었는지 확인
	int row = stmt2.executeUpdate(); // 1이면 1행 성공, 0이면 실패
	System.out.println(row + " <- insertMemberAction row");
	
	// row값에 따라 msg발생 및 리다이렉션
	if(row == 1) { // 회원가입 성공시 home으로
		System.out.println("insertMemberAction 회원가입 성공");
		msg = URLEncoder.encode("회원가입이 완료되었습니다", "utf-8");
		response.sendRedirect(request.getContextPath() + "/home.jsp?msg=" + msg);
		return;
	} else { // 회원가입 실패시 form으로
		System.out.println("insertMemberAction 회원가입 실패");
		msg = URLEncoder.encode("회원가입을 다시 시도해주세요", "utf-8");
		response.sendRedirect(request.getContextPath() + "/member/insertMemberForm.jsp?msg=" + msg);
		return;
	}
%>