[JSP] MVC Model1 로그인, 회원가입 페이지 만들기

sua_ahn·2023년 2월 16일

jsp web

Web

목록 보기

8/13

Architecture Pattern

: 소프트웨어 내부의 구조적인 패턴

MVC Pattern

: 애플리케이션을 세 가지 영역으로 구분하여 작업을 분리
→ 기능별 결합도 최소화, 유지보수성 향상, 개발 효율성 극대화

Model

: 서비스와 데이터베이스 처리를 담당
→ 로직 처리, DB 질의 처리 기능

View

: 클라이언트와 서버 간의 인터페이스 역할
→ 클라이언트로부터 요청받거나 처리된 결과를 보여주는 기능

Controller

: View와 Model을 연결하는 중계 역할
→ 클라이언트가 전달한 파라미터를 추출하여 Model로 전달하고, 처리 결과 페이지를 보여주는 기능

Model1

: View와 Controller를 JSP로, Model을 Java로 구현
→ 구현이 쉽지만 유지보수가 어려움

로그인 + 회원가입 페이지

Flowchart

Class diagram

View (+ Controller)

<script src="http://lab.alexcican.com/set_cookies/cookie.js" type="text/javascript" ></script>
.
.
.
<script type="text/javascript">
	// 쿠키에 저장돼있는 아이디 가져오기
    let user_id = $.cookie("user_id");
    
	// 쿠키에 저장된 아이디가 있을 때
    if(user_id != null) {
    	// 쿠키 아이디를 input 값에 넣기
        $("#id").val(user_id);		
        // 아이디저장 체크박스 체크하기
        $("#chk_save_id").prop("checked", true);
    }
	
    // 아이디저장 체크박스 클릭 시
    $("#chk_save_id").click(function() {
    	// 체크된 상태일 때
        if($("#chk_save_id").is(":checked")) {
        
        	// 유효성 검증
            if($("#id").val().trim() == "") {
                alert('id를 입력해주세요.');
                $("#chk_save_id").prop("checked", false);
            } else {
                // 쿠키 저장
                $.cookie("user_id", $("#id").val().trim());
            }
            
        } else {	// 체크 해제 시 쿠키 삭제
            $.removeCookie("user_id");
        }
    });
</script>

session에 로그인 정보 저장 (loginAf.jsp)

<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");

MemberDao dao = MemberDao.getInstance();
// 로그인 객체 반환
MemberDto mem = dao.login(id, pwd);

if(mem != null) {
    // 로그인 정보 세션에 저장
    session.setAttribute("login", mem);
    session.setMaxInactiveInterval(60*60*2);	// 2시간 로그인 유지
%>

회원가입

Ajax 통신으로 id 중복 확인

<script type="text/javascript">
    $(document).ready(function() {
        $("#idChkBtn").click(function() {
            // id 빈칸 조사

            // id 넘긴 후 중복체크 결과 받기
            $.ajax({
                type: "post",
                url: "idcheck.jsp",
                data: {"id": $("#id").val()},
                
                success: function(msg) {
                    if(msg.trim() == "OK") {
                        $("#idcheck").css("color", "#0000ff");
                        $("#idcheck").text("사용할 수 있는 ID입니다.");
                    } else {
                        $("#idcheck").css("color", "#ff0000");
                        $("#idcheck").text("이미 사용중인 ID입니다.");
                        $("#id").val("");
                    }
                },
                error: function() {
                    alert('idcheck error');
                }
            });
        });
    });
</script>

Model

DAO

Singleton 패턴과 지연초기화로 구현
: 하나의 인스턴스로 DB를 중재하고, 필드의 초기화 시점을 그 값이 처음 필요할 때까지 늦춤
→ 메모리 효율을 높이고, 인스턴스 생성 시의 프리징 현상을 방지하며, 인스턴스 생성 시점 관리

멀티스레드 환경에서 동시에 getInstance()를 호출할 경우,
인스턴스가 여러 개 생성될 수 있다는 문제가 있으나 간단히 구현하기 위해 무시
dao 객체 생성 시 initConnection() 호출

public class MemberDao {
	// 외부에서의 객체 생성 제한 & 전역 접근
	private static MemberDao dao = null;
    
	// 초기 객체 생성 시 DB 드라이버 로딩
	private MemberDao() {
		DBConnection.initConnection();
	}
	
    // 하나의 인스턴스만 생성 후 재사용
	public static MemberDao getInstance() {
		if(dao == null) {
			dao = new MemberDao();
		}
		return dao;
	}
}