🐞js 실행 에러 문제 해결🐞
https://kkobug2.tistory.com/117
SweetAlert2 모달창 구현 에러해결
🐞message.jsp (행: [57], 열: [0]) 종료되지 않은 [모달창을 테스트 해보다가 종료되지 않은 태그 라는 에러를 만났다 이 에러는 코드를 실행했을 때 제일 코드의 제일 마지막줄까지 읽었는데도 태그
kkobug2.tistory.com
SweetAlert2 에러해결에 올렸던 모달창 호출함수에러해결에 이런 문구가 있다
" js 경로와 인코딩문제를 해결하고 다시 실행시켰을때 js까지는 잘 도착한 모습 "
여기서 이 js 경로에러를 해결하는 과정이다
모달창을 호출할 함수를 result.js에 정의하고 실행하자마자 모달창이 호출되지 않는 에러가 발생했다
consloe.log("result.js 도착");확인을 위해 넣어둔 이 로그가 자체가 찍히지 않는 것이었다. 즉 SweetAlert 문제가 아니라 JS 파일 자체가 실행되지 않는 상황이었다.
🔎원인분석
- console.log오타
- js파일 안불러옴
- 함수정의 후 message.jsp에 호출안함
이 세가지가 합쳐져서 js가 실행이 안되고 로그조차 안찍힌것이었다
🛠️해결방법
1.오타수정
console.log("result.js 도착");2. message.jsp에 외부 js파일 경로추가
<script src="<c:url value='/js/result.js'/>"></script>3.message.jsp에서 모달창 함수 호출
<body>
<!-- 로그인/회원가입 처리 결과에 따라서 스위트얼럿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>📌느낀점
코드를 만드는것도 중요하지만 오타나 외부경로연결 함수호출확인에도 신경써야한다! 같은 실수를 방지하기위해
노트북 배경화면에 체크포인트를 메모로 적어놓았다
🐞Uncaught ReferenceError: beforeJoin is not defined🐞
회원가입시 모달창 프롬프트로 이름입력받아서 아이디 비밀번호와 함께 저장하기 위해 회원가입 버튼에 온클릭이벤트를 설정해주었는데 막상 실행시키니 온클릭 이벤트가 실행되지 않는 문제가 발생했다
에러문구를 해석해보면 버튼의 온클릭에서 beforeJoin()을 호출했는데 브라우저가 그 함수를 찾치못했다는 뜻이다
즉 버튼은 눌렸고 js도 실행은 됬는데 beforeJoin()이 보이지않는 위치에 있다는것이다
🔎원인분석
beforeJoin()이 <script>밖에 있거나 다른 파일에 있는데도 호출되지 않았을때나 beforeJoin()이 다른 함수안에 정의되어있을때로 원인을 생각해볼수 있다 또한 함수가 정의되어있는 스크립트에 타입이 설정되 있다면 그것또한 원인이 될수 있다
🛠️해결방법
beforeJoin()의 위치를 result.js가 아닌 join.jsp로 옮겨주었다
html의 onclick 이벤트는 전역함수만 호출이 가능하기 때문이다 또한 함수의 이름이 직관적이지 않아서 namePrompt로 변경해주었다
⭐Point⭐
- onclick="namePrompt()" → HTML이 window에서 찾음
- result.js → 자기 파일 기준으로 찾음
👉 서로 찾는 방식이 다르다는 점이다
function namePrompt(){
return Swal.fire({
title: '이름을 입력해주세요',// 모달창 제목
input: 'text',//입력창 타입설정 텍스트는 한줄입력받음
inputPlaceholder: '이름',//입력창 미리보기 안내문구
confirmButtonText: '저장',//확인버튼에 표시될 텍스트
showCancelButton: false,//취소버튼을 표시하지 않음
allowOutsideClick: false,//모달 바깥영역클릭시 닫히는것을 방지함
//사용자가 확인버튼을 눌렀을때 자동으로 실행한다
inputValidator: function (value){
if(!value){ //입력값이 없는 경우
return '이름은 필수 입력입니다';//해당 문구를 에러메세지로 표시한다
}
//아무것도 리턴하지 않으면 통과
}
});
}🐞RESULT is not defined 에러🐞
회원가입 성공 모달은 떴지만, 메인페이지에서 회원가입을 위해 회원가입을 누를때 발생한 에러다
로그를 보면 성공모달 까지는 호출한 뒤에 나오는 에러로 RESULT가 어디선가 콘솔에 로그를 찍어주고 있는 상황인데 result.js를 다시 참조할때는 없다는 의미이다 즉 RESULT는 message에 만든 JS 변수이고 result.js가 실행될때 그 변수가 없거나 유효범위 밖에 있다는 뜻이다
🔎 원인분석
message.jsp 구조를 보면 js경로가 RESULT 보다 위에 올라와있다 브라우저는 위에서 아래로 코드를 실행하기때문에 현재구조에서는 브라우저가 result.js를 먼저 실행하고 따라서 result.js에는 RESULT를 정의해주지 않았음으로 참조에러가 발생한것이다
<script src="/js/result.js"></script>
<script>
const RESULT = '${sessionScope.result}'; //결과값
const MSG = '${sessionScope.msg}'; // 안내멘트
const LOCATION = '${sessionScope.location}'; // 페이지 이동
const TYPE = '${sessionScope.type}';//사용자 요청 타입구분
</script>🛠️ 해결 방법
브라우저에 실행순서에 따라 RESULT, MSG, LOCATION,TYPE를 먼저 선언하고 js파일을 밑으로 내려 RESULT, MSG, LOCATION,TYPE 이 먼저 실행된후에 result.js가 실행되는 방식으로 변경하였다
<script type="text/javascript">
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>
'🐢🐢꼬부기 LV.2 | 실습•에러 > 🛡️껍질에 숨기(에러해결)' 카테고리의 다른 글
| 팀프로젝트 카카오 로그인 API 연동 에러 정리 (0) | 2025.12.31 |
|---|---|
| 주문내역 페이지 구현과 샘플테이터 생성 오류 해결 (0) | 2025.12.25 |
| ORA-00923 : FROM 키워드가 필요한 위치에 없습니다 (0) | 2025.12.13 |
| ORA-02291 : 부모키를 찾을수 없습니다 에러해결 (0) | 2025.12.12 |
| 🛠️ 이클립스 SQL 트리거 에러해결하기 🛠️ (0) | 2025.12.11 |