Uncaught ReferenceError

태그

JavaScript

트렐로에서 사용되는 칸반보드를 구현하기전, 테스트를 위해 간단한 동적 div 생성 코드를 생성해보았습니다. 코드는 아래와 같습니다.

<input type='button' value='createDiv' onclick='createDiv()'/>
HTML
복사

<script>
    function createDiv() {

        const newDiv = document.createElement('div');
        const newText = document.createTextNode('안녕하세요');

        newDiv.appendChild(newText);
        document.body.appendChild(newDiv);
    }
</script>
JavaScript
복사

하지만 실행해보니, 다음과 같은 오류가 발생하였습니다.

그래서 다음과 같이 스크립트를 수정하여 실행해 보았습니다.

<script th:inline="javascript">
    function createDiv() {

        const newDiv = document.createElement('div');
        const newText = document.createTextNode('안녕하세요');

        newDiv.appendChild(newText);
        document.body.appendChild(newDiv);
    }
</script>
JavaScript
복사

하지만 결과는 같았고, 혹시 위치의 문제인가 싶어 <script> 태그를 내부로 옮겨보았지만… 그래도 변함이 없었습니다.

onclick 의 문제?

개발자 도구에서는 이 line 이 문제라 하였습니다.

그래서 문법 오류인가 싶어 다음과 같이 수정하고 실행해보았습니다.

<div id="contents">
	<!-- board-->
  <input type='button' value='createDiv' th:onclick="createDiv()"/>
</div>
HTML
복사

하지만 슬프게도 결과는 같았습니다. 혹시몰라 type="text/javascript" 도 추가해보았지만…

해결이 되지 않았습니다… 상당히 당황스럽네요…

해결

Thymeleaf Layout 환경에서 javascript 스크립트 사용하기

Spring boot 환경에서 뷰 리졸버로 thymeleaf를 사용하고 있다.thymeleaf가 제공하는 layout 기능을 사용해 편리하게 메뉴바와 content가 들어갈 공간 등을 잘 잡아 놓았다. [ thymeleaf layout 구성하기 : http://www.leafcats.com/9 ] 이 환경에서 새로 발견한 유용한 플러그인 테스트를 위해 연습용 페이지에서 스크립트를 작성해 보았는데, 아예 스크립트가 작동을 하지 않았다.레이아웃의 템플릿을 잡아놓은 mainLayout.html 파일에서 작성한 스크립트는 정상적으로 동작 하는데, 정작 컨텐츠가 들어갈 html 페이지의 스크립트가 동작하지 않는 것이었다. 문제를 찾기 위해 스크립트 코드 위치를 body 안쪽에도 넣어 보고, header에도 넣어 ..

https://www.leafcats.com/112

타임리프 레이아웃 기능을 사용할 때 발생할수 있는 오류였습니다. 블로그의 두번째 방식을 사용하여 해결하였습니다.