ModelAndView 데이터를 Thymeleaf를 사용하는 외부 Javascript단으로 보냈는데..
못 알아먹고 계속 Uncaught SyntaxError: Unexpected token '{' (at board-detail.js:6:18) 오류가 뜨는게 아닌가...!!!
그래서 잘밤에 폭풍 삽질을 쑤셨다.
결론은.. html파일 내에서 <script>를 직접 써서 사용하는 것이아니라
th:src를 이용해 외부 js 파일을 호출하게되면... Object로 보낸 객체에 대해 받아주지를 못한다는 것이다.
외부JS파일은 서버데이터를 매핑하지 못한다는 사실....
ajax를 통해서 서버데이터를 받아오는 것이 좋을듯하다..
그럼에도 정 외부파일과 매핑하고 싶다면 html 단에서 우선 변수를 만들어 공용으로 써야한다.
코드 예제는 아래의 5번을 참고할것
아래는 내가 삽질했던 과정들이다.
1. Controller 구성
Controller 단에서 Model객체를 생성한후
addObject로 View단으로 넘길 데이터를 넣어줬다.
@GetMapping("/board/detail/{id}")
public ModelAndView boardDetail(@PathVariable Integer id ) {
ModelAndView model = new ModelAndView();
model.addObject("dto",boardService.getBoardById(id));
model.setViewName("board/board-detail");
return model;
}
2. board-detail.html 구성
model에 지정한 View이름과 동일한 html 파일을 만들었다.
<!DOCTYPE HTML>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<title>게시판</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
~~~샬라샬라샬라~~~~
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script> <!-- 실행순서에 의해 먼저 추가해야한다. -->
<script th:inline="javascript" th:src="@{/board/board-detail.js}"></script>
</body>
</html>여기서 포인트는
<script th:inline="javascript" th:src="@{/board/board-detail.js}"></script> 이다.
static디렉토리 하위에 board-detail.js를 따로 만들어서 그쪽에서 js를 실행하기로 했다.
3. board-detail.js 구성
/**
* 게시물 상세화면 js
*/
$(this).ready(function(){ //$('document').ready(function(){
/*<![CDATA[*/
var dto = [[${dto}]];
console.log(dto);
/*]]>*/
});온갖 구글링을 통해 데이터를 넘기는 방법을 찾아봤다.
Thymeleaf 3 이하면 반드시 받을 객체 전후에 /*<![CDATA[*/ ~~~~ /*]]>*/ 를 사용해주어야 하고,
var dto = [[${dto}]];
var dto = /*[[${dto}]]*/;
등의 다양한 형식으로 서버단의 데이터를 받을 수 있다고 했다.
4. 띠용..? 구문오류요?
근데 왠걸 뭔 괄호가 없다고 갑자기 구문오류를 내는 것이 아니더냐....
여러가지 방법으로 바꾸고 다시넣고... 혹시 객체라서 안받는건지 String만 넣어보고.. 별짓을 다하다가
외부JS파일은 서버데이터를 매핑하지 못한다는 사실을 알아냈다......눈물~
5. 정... 쓰고 싶다면...
위에있던 board-detail.html 파일에다가 <script>구문을 2번써준다 ^^;;!!
첫 번째로 먼저 서버데이터를 변수에 담는 구문...
두 번째로는 외부 JS파일을 import하는 구문...
<script th:inline="javascript">
var dto = [[${dto}]];
</script>
<script th:inline="javascript" th:src="@{/board/board-detail.js}"></script>
JS에는 그냥 console.log만 해보자
$(this).ready(function(){ //$('document').ready(function(){
console.log(dto);
});
우와~~데이터가 들어왔다..!!
그런데 이렇게 하는 것이 맞을까?에 대한 의문이 가득하다.
ajax로 고치는 미래의 내가 보이는구나
그래 원래 인생은 삽질의 연속이지