보통 HTML과 자바스크립트를 따로 분리하는 게 보기 편하고
보기 편하기 때문에 유지보수가 더 용이한데
그 분리작업이 쉬울 것 같은데? 생각보다는 쉽지 않다.
오늘은 외부로 분리한 나의 자바스크립트 파일이 왜 작동하지 않는지
그 원인을 알아보고 해결책에 대해 소개해보려고 한다.
원인 & 해결책
1. VIEW 단에서 경로를 제대로 설정하지 않아서 컴파일러가 찾지 못하는 경우
->본인이 사용하는 템플릿 엔진에 맞게 외부 자바스크립트 파일을 놓아야 하고
그 경로를 본인이 사용하는 템플릿 엔진에 맞게 설정해주어야 합니다.
EX: 타임리프라는 템플릿 엔진을 사용중이라면 다음과 같은 폴더에 저장하면 됩니다.
resources->static->js->html이름->js이름
호출할 때는
<script type="text/javascript" th:src="@{/js/html이름/자바스크립트 이름.js}"></script>2. jQuery 를 사용중이라면 jQuery보다 뒤에 호출되어야지만 작동을 하는데 그 순서를 맞춰주지 않은 경우
-> 본인이 jQuery를 cdn으로 head에 호출하도록 설정해놓았다면 컴파일러가 위에서 아래로 순서대로 읽으므로 jquery보다 밑에 설정해두면 된다. 하지만 보통은 안전하게 모든 cdn을 다운로드하고 읽은 뒤 방해받지 않게 작동하도록 body태그가 끝날 때 적어두면 좋다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
...
...
...
...
<script type="text/javascript" th:src="@{/js/html이름/자바스크립트 이름.js}"></script>
</body>
</html>
3. 자바스크립트가 정적인 id나 class를 찾는 로직으로 되어있는데 view단은 동적으로 생겨서 찾지 못하고 이벤트 바인딩이 되지 않는 경우
-> 이럴 땐 강제로 모든 html이 다 불러와지고 나서 자바스크립트를 실행하도록 그 순서를 제일 뒤로 미뤄야하는데
그때 쓰는 함수가 아래와 같습니다.
$(function(){
// 실행할 기능을 정의해주세요.
});혹은
window.onload = function(){
// 실행할 기능을 정의해주세요.
}둘의 차이점
DOM 생성 후 바로 호출되는 $(function() 과는 달리
window.onload는 DOM 생성 후 리소스 호출까지 완료된 후에 실행 됩니다.
클릭 하는 이벤트인 경우
$(document).on('click', '.클래스 이름', function () {
// 실행할 기능을 정의해주세요.
});
$(document).on('click', '#아이디 이름', function () {
// 실행할 기능을 정의해주세요.
});바꾸는 이벤트인 경우
$(document).on('change', '.클래스 이름', function () {
// 실행할 기능을 정의해주세요.
});
$(document).on('change', '#아이디 이름', function () {
// 실행할 기능을 정의해주세요.
});'개발자 전향 프로젝트' 카테고리의 다른 글
| [Spring Boot] 대소문자 구분 없이 검색하는 로직 (JPA + Oracle) (0) | 2022.10.14 |
|---|---|
| [Spring Boot] 페이징이 어렵다고? 이렇게만 하세요 - 2 (0) | 2022.10.14 |
| 체크박스 활용하기 (Multiple Selection 수정or삭제) - 2/2 (2) | 2022.10.06 |
| 체크박스 활용하기 (Multiple Selection 수정or삭제) - 1/2 (0) | 2022.09.30 |
| [Front] 스크롤은 가능하되 스크롤 안 보이게 하기 (쉬움) (0) | 2022.09.29 |
