모달창 구현시 중요했던 부분

SweetAlert2를 이용한 모달창 구현하면서 오류가 제일  많이 났던 부분 중 중요한 부분을 정리해보겠다

세션을 사용하여 모달창 출력요청하기

session.setAttribute("result", "success");
session.setAttribute("msg", "로그인 성공");
session.setAttribute("location", "mainPage.do");
session.setAttribute("type", "login");

forward.setPath("message.jsp");
forward.setRedirect(false);

세션을 사용한 이유

1. 단순 페이지 이동이 아니라 “처리 후 → 결과 화면 → 다시 이동” 흐름이기 때문이다 

요청 (login.do, join.do 등)
 → 서버에서 처리
 → 바로 목적지 이동 ❌
 → message.jsp로 이동
 → result.js 실행
 → SweetAlert 모달 출력
 → 확인 버튼 클릭
 → 최종 이동

즉 결과가 한 번 더 JSP를 거쳐간다.

그렇기 때문에

• 처리 결과 (SUCCESS / FAIL)
• 메시지 내용
• 이동할 페이지
• 어떤 종류의 요청인지 (login / join / logout 등)

이 정보를 message.jsp까지 들고 가야 했다. 이걸 request 파라미터, 쿼리스트링, 숨겨진 input, redirect param… 이런 방식으로 넘기려면 코드가 매우 복잡해진다

그래서 서버에서 세션에 저장 → message.jsp에서 세션값 읽기 → result.js로 전달 → 사용 후 세션 정리 방식을 사용했다.

2. Forward + JS 구조에서는 Session이 가장 안정적이다

message.jsp는 forward.setRedirect(false) 로 이동한다.
forward는 “현재 요청을 그대로 넘겨주는 방식”이라 request는 유지되지만, JS에서 활용하거나 페이지 흐름을 제어하기엔 request만으로는 부족한 부분이 많다.

특히 다음과 같은 문제들이 있었다.

• redirect가 개입하면 request는 날아감
• 일부 액션에서는 redirect, 일부에서는 forward를 쓰면 일관성 깨짐
• request 값만 믿고 처리하면 언제든 깨질 수 있음

반면 session은:

• forward든 redirect든 상관없이 유지됨
• 어떤 액션에서도 동일하게 접근 가능
• message.jsp와 result.js에서 안정적으로 가져올수 있다

그래서 세션이 가장 적합했다.

3.  Session 에 저장해서 message에서 각요청에 맞게 출력이 가능했다

이번 구현에서 message.jsp 하나만 만들어두고

• 로그인 성공
• 로그인 실패
• 회원가입 성공
• 회원가입 실패
• 로그아웃 성공
• 이름 변경 성공 / 실패

<%-- 로그인/회원가입 처리 결과에 따라서 스위트얼럿2에 사용할 아이콘과 제목을 미리결정한다
	 result값은 각 Action에서 리절트에 담아서 전달된 값이다 --%>

<c:set var="swalIcon" value="${result eq 'success'? 'success' : 'error'}">
</c:set>
<c:set var="swalTitle" value="${result eq 'success'? '성공' : '실패'}">
</c:set>

<script type="text/javascript">

<%-- 로그인/회원가입 성공인경우 successModal 함수호출 
	msg : action에서 전달된 성공메세지
	sweetalert2 성공모달을 화면에 출력한다--%>
	
<%--로그인/회원가입 실패한경우 failModal 함수호출 
	msg : action에서 전달된 실패메세지
	sweetalert2 실패모달을 화면에 출력한다 --%>
	
//회원가입을 세션에 저장했기때문에 세션에서 가져와야함
const RESULT = '${sessionScope.result}'; //결과값
const MSG = '${sessionScope.msg}'; // 안내멘트
const LOCATION = '${sessionScope.location}'; // 페이지 이동
const TYPE = '${sessionScope.type}';//사용자 요청 타입구분

console.log("[로그] LOCATION =",LOCATION);

</script>
<!--결과 모달창띄우기 기능을 만들어놓은 js파일연결 -->
<script src="<c:url value='/js/result.js'/>"></script>

전부 같은 페이지 + 같은 JS로 처리할 수 있게 된 이유가 바로 Session에 값 저장이 가능했기 때문이다.

4. 로그아웃처럼 세션을 지우는 기능에도 대응 가능

로그아웃은 원래 세션을 지워야 하는 기능인데,
모달을 띄워야 하니 바로 invalidate 하면 안 되는 상황이 발생한다.

이때도:

• 기존 세션 invalidate
• 새 세션 생성
• 모달용 값만 다시 저장

session = request.getSession();//모달띄울용 새 세션 만들기

		//액션포워드 바구니만들기
		ActionForward forward = new ActionForward();
		//모달띄울용 정보 세션에 저장
		
		session.setAttribute("msg", "로그아웃 성공!");
		session.setAttribute("location", "mainPage.do");
		session.setAttribute("result","success");//성공모달창 띄우기
		session.setAttribute("type", "logout");

		//pageContext.forward("message.jsp");
		forward.setPath("message.jsp");//어디로 보낼지
		forward.setRedirect(false); //어떻게 보낼지
		return forward;

이 패턴으로 자연스럽게 해결할 수 있었다.
즉, 세션을 이해하고 활용했기 때문에 구현 가능했던 구조였다.

---

모달창의 페이지 이동방식

페이지 이동은 result.js 의 location.href에서 이루어진다 Action의 redirect에서 이동하는것이 아니다

if (TYPE === "join") {
	  successModal(MSG).then(function(result) { //성공 모달창띄우고
	    if (result.isConfirmed) {
	      location.href = LOCATION;//mainPage.do로 이동
	    }
	  });
	}

Action에서 forward.setRidirect가 ture 이면 페이지 이동이 되지 않으니 false로 설정해주어야한다

forward.setPath("message.jsp");//어디로 보낼지
forward.setRedirect(false); //어떻게 보낼지