SweetAlert2 모달창 구현 에러해결

🐞message.jsp (행: [57], 열: [0]) 종료되지 않은 [<c:if] 태그🐞

모달창을 테스트 해보다가 종료되지 않은 <c:if>태그 라는 에러를 만났다 이 에러는 코드를 실행했을 때 제일 코드의 제일 마지막줄까지 읽었는데도 <c:if>태그가 종료되지 않았다고 판단해서 나는 에러다

🔎원인분석

1. <c:if> 바깥에서 HTML 주석

주석이 꼬이거나 주석에 <c:if>같은 태그조각이 섞이거나 에디커가 자동정렬하면서 주석이 깨지면 발생한다 따라서 JSP주석으로 변경했다

변경전
<!-- failModal 함수호출
    msg : action에서 전달된성공메세지
    sweetalert2 성공모달을 화면에 출력한다 -->


변경후
<%-- 로그인/회원가입 실패한 경우 --%>

2. 실패조건이랑 모달창함수 호출이랑 안맞아서

변경전
<c:if test="${result eq 'fail'}">
  successModal('${msg}');
</c:if>

변경후
<c:if test="${result eq 'fail'}">
  failModal('${msg}');
</c:if>

🛠️ 해결방법

주석변경과 모달창 함수명을 변경해서 해결했다

---

🐞실행시 글씨만 출력되는 에러🐞

로그인 실패를 시도했을때 모달창대신 글씨만 표시된 에러다

🔎원인분석

화면에 글씨만 출력된 이유는 브라우저가 자바스크립트로 인식하지 않았기 때문이다

failModal('로그인 실패...');

즉 이 코드가 <script>태그 밖에 있었기 때문이다 따라서 모달창이 아닌 글씨만 출력된것이다

🛠️해결방법

해당 코드를 <script>안에 넣어주면 해결된다

<script>
    failModal('로그인 실패...');
</script>

---

🐞result.js 실행시 한글깨짐🐞

테스트중 js파일 자체가 실행되지 않아서 확인차 주소창에 경로를 입력해서 확인해보았다 확인결과 현재 문제가 내용은 보이는데 콘솔은 안찍히는 상태이고 모달 역시 실행되지 않는다

🔎원인분석

주소창에 직접입력했을때 내용이 보이는것으로 보아 경로 문제는 아니고 파일위치의 문제도 아니다 문제는 한글 인코딩이 되지 않은 상태에서 실행시켰기 때문이다 따라서 브라우저가 js파일을 실행시킬때 에러가 나는것으로 에러메세지도 없고 로그도 없고 함수도 선언되지 않은 상태이다

🛠️해결방법

상단 메뉴 File → Properties → Text file encoding → UTF-8 선택 → Apply → 파일 저장 으로 해결할수 있다

 

 

실행시키면 콘솔에 로그가 잘 뜨면서 한글 인코딩이 잘 실행된것을 볼수있다

---

🐞모달창 함수 호출 오류🐞

js 경로와 인코딩문제를 해결하고 다시 실행시켰을때 js까지는 잘 도착한 모습이었는데 마찬가지로 모달창은 안뜨는 상황이었다

 🔎원인분석

• Swal객체가 없는 경우
• JS는 로드됐지만 successModal / failModal이 안 불린경우
• RESULT / MSG 값이 없거나 조건이 안 맞는 경우

🛠️해결방법

Swal객체의 타입확인을 위해 콘솔을 찍었다

• undefined → SweetAlert2 로드 안 됨
• function → 다음 단계

console.log('[로그] Swal =', typeof Swal);

 

콘솔출력결과 Swal 객체가 없는것은 아닌것으로 확인됐다

모달 호출 함수에 콘솔을 추가하고

 console.log('[로그] successModal 호출됨', msg);
 console.log('[로그] failModal 호출됨', msg);

리절트값과 메세지 값을 확인하기 위해 로그를 추가했다

console.log('[로그] RESULT =', RESULT);
console.log('[로그] MSG =', MSG);

실행결과 리절트 로그가 콘솔에 출력되지 않아서 message,.jsp에 리절트 코드를 추가했다

const RESULT = '${result}';
const MSG = '${msg}';

그리고 추가적으로 확인하기위해 message,.jsp에도 확인용 알림을 만들어주었다

<script>
  alert('message.jsp 도착');
</script>

그러면 실행했을때 이런 로그를 볼수 있고

모달창이 제대로 실행된 모습을 볼수있다

//함수정의
function successModal(msg){// 성공시 띄울 모달 
	console.log('[로그] seccessModal 호출함');
	 Swal.fire({
		//Swal = SweetAlert2가 제공하는 전역객체
		//fire = 모달창을 띄우기 위해 호출하는 함수
		//“Swal이라는 객체의 fire 메서드를 호출한다”는 의미다.
		icon : 'success',//모달 설정값
		title: '성공',
		text : msg,
		confirmButtonText: '확인'	//눌러야지 모달창 꺼짐
	});
}

function failModal(msg){//실패시 띄울 모달
	console.log('[로그] failModal 호출함');
	 Swal.fire({
		icon : 'error',
		title: '실패',
		text : msg,
		confirmButtonText: '돌아가기'
		
	});
}

---

🐞Uncaught TypeError: Cannot read properties of undefined (reading 'then')🐞

이 코드를 사용하려고 했던 이유는 로그인 성공/실패 모달창을 실행하고나서 성공은 메인페이지로 실패는 로그인페이지로 이동을 시키고 싶어서였다 이 에러를 해석해보면 .then()을 붙였는데, 그 앞의 값이 undefined다 즉 성공이든 실패든 모달창의 반환값이 없다는 내용이다

내가 작성한 코드

//조건실행
if(RESULT === "success"){ // 만약 성공이라면
	successModal(MSG).then(function(){//성공모달창 띄우고
		location.href = LOCATION; //mainPage.do로 이동
		//사용자가 모달에서 확인버튼을 누른후 실행된다
	});
}
else if(RESULT === "fail"){//실패라면
	failModal(MSG).then(function(){//실패모달 띄우고
		location.href = LOCATION; //login.do로 이동
		//사용자가 모달에서 확인버튼을 누른후 실행된다
	});
}

🔎원인분석

일단 then() 메서드가 무엇인지 부터 알아야한다

Swal.fire()함수는 사용자가 모달에서 버튼을 누를때까지 기다리기때문에 즉시 결과를 실행하지 않는다

따라서 그 다음에 페이지이동이 실행되는것인데 이것은 약속된 작업으로 이 약속된 작업을 실행하는게 Promise 객체이다

Promise(프로미스)는 자바스크립트에서 비동기 작업을 처리하는 객체이다. 주로 서버에서 데이터를 요청하거나 파일을 읽는 등의 비동기 작업을 수행할 때 사용된다. Promise는 성공 또는 실패와 같은 비동기 작업의 결과를 나타내는 데 사용되며, 자바스크립트에서 비동기 처리가 가장 많이 일어나는 XMLHTTPRequest 처리에서 유용하게 사용된다.

then()메서드는 promis 객체에서만 사용할수 있고 then() 메서드를 사용하여 성공 및 실패상황에 대한 처리를 지정할수 있다

따라서 반환값이 필요한데 반환값을 지정해주지 않아서 에러가 발생한것이다 즉 모달호출함수에서 Swal.fire()를 리턴값으로 주지 않았기 때문이다

🛠️해결방법

Swal.fire에 return을 설정해주면 해결된다

//함수정의
function successModal(msg){// 성공시 띄울 모달 
	console.log('[로그] seccessModal 호출함');
	return Swal.fire({
		//Swal = SweetAlert2가 제공하는 전역객체
		//fire = 모달창을 띄우기 위해 호출하는 함수
		//“Swal이라는 객체의 fire 메서드를 호출한다”는 의미다.
		icon : 'success',//모달 설정값
		title: '성공',
		text : msg,
		confirmButtonText: '확인'	//눌러야지 모달창 꺼짐
	});
}

function failModal(msg){//실패시 띄울 모달
	console.log('[로그] failModal 호출함');
	return Swal.fire({
		icon : 'error',
		title: '실패',
		text : msg,
		confirmButtonText: '돌아가기'
		
	});
}