반응형 HTML3 Uncaught TypeError: Cannot read property 'addEventListener' of null 이슈 node.js로 API 구현하는 와중 다음과 같은 에러가 발생하면서 버튼 클릭이 먹히지 않았다. 원인을 찾아보니 해당 HTML이 로드가 완료되기 전에 JS 영역에서 먼저 HTML을 참조해서였다. 아래의 addEventListener에서 HTML에 있는 태그를 참조해야 하는데 HTML 로드가 다 완료되지 않은 상태에서 JS가 읽어버리게 됐고 그래서 해당 태그가 null인 상태로 나온 것이다. (내 경우는 button 태그) 해결 결국엔 끙끙 앓다가 원인을 몇 가지 찾았다. 1. defer defer는 페이지(HTML)가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시하는 속성이다. 말 그대로 "이 페이지 다 읽기 전에는 JS파일 실행하지마??" 라고 말해주는 거다. 2. script src 위치.. 2022. 11. 5. [Thymeleaf] EL1007E: Property or field '~' cannot be found on null 이슈 view 페이지는 Thymeleaf로 하는 프로젝트 중 해당 오류를 발견했다. 직역해보면 다음과 같다. EL1007E: null에서 속성 또는 필드 '~'을 찾을 수 없습니다. 해결 "${comment.nickNameMac}" 부분을 "${comment?.nickNameMac}"로 바꿔줬다. ? 은 'null'이 발생할 수 있는 곳에 넣어준다고 한다. 2022. 10. 27. [Thymeleaf] button태그에 location.href 경로 넣기 (th:onclick) - 이슈 타임리프로 프로젝트 중 기존에는 button태그 에서 자바스크립트 함수만 호출하다가 api path로 가도록 하기 위해서 location.href를 사용하였으나 제대로 동작하지 않았다. - 해결 ↓ 위 코드 처럼 th:onclick 안에서 location.href 전, 후에 ' | '(shift+백슬래쉬)를 넣어주고 그 안에서 경로를 설정해주니 정상적으로 동작되는 걸 확인했다. 이 외에도 ↓ 위 처럼 이스케이프 문자인 ' \ ' 백슬래쉬를 사용하는 방법이 있었는데 아무래도 가독성이 떨어지고, 지저분하다는 느낌이 들어서 처음 방법으로 해결했다. 2022. 9. 13. 이전 1 다음
