하나의 js파일을 여러 jsp가 공유하고 있어,
<%@ include file ="/WEB-INF/ ... / a.jsp" %>
-> 지정된 jsp 파일이 현재 jsp 페이지 처리 과정 중에 그대로 복사되어 들어가며,
다른 jsp 파일의 내용을 현재 페이지에 포함시킴.
컴파일 시에 처리.를 사용해 jsp파일에 또 다른 jsp 파일을 불러올 때
하나의 js파일이 여러번 호출되는 현상이 발생했다.
해결책은
클라이언트 측에서 중복로딩을 방지해줬는데,
script가 이미 로드가 되어있는지 확인하고, 중복 로딩을 방지하는 코드를 집어넣었다.
<script type="text/javascript">
if (typeof aJsLoaded === "undefined") {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '${pageContext.request.contextPath}/a.js?v=' + ${System.currentTimeMillis()};
document.head.appendChild(script);
aJsLoaded = true;
}
</script>
이 코드를 사용하면, 중복 스크립트 로딩을 방지할 수 있다.
code interpretation
* if (typeof aJsLoaded === "undefined")
-> aJsLoaded - 중복 로딩 방지를 위한 플래그 변수.
aJsLoaded 라는 변수가 이미 정의되어있는지 확인.
이 변수가 정의되어 있다면, 중복 로딩을 방지하기 위해 아무것도 수행되지 않음.
* var script = document.createElement('script');
-> 새로운 <script> 요소를 동적으로 생성.
script 파일을 동적으로 로드하는 역할
* script.type = 'text/javascript';
-> 생성된 script 요소 type 속성을 javascript로 설정
* script.src = '${pageContext.request.contextPath}/a.js?v=' + ${System.currentTimeMillis()};
-> script 요소의 src 속성 설정
* document.head.appendChild(script);
-> 동적으로 생성된 script 요소를 문서의 <head> 에 추가
-> 이렇게 하면 script 파일이 현재 페이지에 로드
* aJsLoaded = true;
-> 중복 로딩 방지용 변수를 true로 설정해 다음에 스크립트가 중복으로 로드되지 않도록 제어
인정받는 개발자가 되고싶습니다.