본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
패스트캠퍼스의 '9개 도메인 프로젝트로 끝내는 백엔드 웹 개발 (Java/Spring) 초격차 패키지 Online' 강의 수강 32일차!
오늘은 커뮤니티 피드 서비스의 admin 기능 구현을 위한 템플릿 적용 및 기본 설정을 진행하였다.
dependencies {
implementation("org.springframework.boot:spring-boot-starter-thymeleaf")
}먼저, thymeleaf를 사용하기 위해 build.gradle 파일에 의존성을 추가해주었다.
Thymeleaf는 Spring에서 전달받은 데이터를 HTML 템플릿이나 JavaScript에 쉽게 반영할 수 있도록 도와주는 템플릿 엔진이다.
@GetMapping("/index")
public ModelAndView index() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
return modelAndView;
}ModelAndView는 모델 데이터와 뷰 정보를 함께 담아 전달할 수 있는 컨테이너 역할을 하는 객체이다.
setViewName() 메서드를 통해 반환할 뷰의 이름을 지정할 수 있다.
지정된 뷰 이름은 View Resolver에 의해 실제 파일 경로로 해석되며, 클라이언트에게 전달할 HTML 파일을 지정해준다.
위 코드에서는 HTML 확장자와 templates 디렉터리 경로가 생략되었지만, Spring Boot의 기본 설정에 따라 "templates/index.html" 파일을 가리키게 된다.
스프링부트 어플리케이션을 실행하고 admin/index 경로로 접속하니, 대시보드 화면(index.html)이 떴다.
하지만 대시보드의 틀만 보이고, 정작 중요한 것인 일별 유저 가입 수 데이터와 관련된 그래프는 보이지 않았다.
크롬창의 개발자 도구를 확인하니, 아래와 같은 에러가 발생하고 있었다.
Uncaught TypeError: Cannot read properties of null (reading 'map') at index
이는 다음 스크립트에서 발생한 오류였다.
<script th:inline="javascript">
const dataList = [[${result}]];
const data = dataList.map(item => item['count']);
const labels = dataList.map(item => item['date']);
const maxValue = Math.max(...data);
initChart(labels, data, maxValue);
</script>
index.html에서 에러 메시지가 가리킨 부분을 확인해보니, thymeleaf 문법이 적용된 태그가 있었다.
th는 타임리프에서 제공하는 속성으로, 서버에서 전달받은 데이터를 HTML 뷰에 동적으로 주입할 때 사용된다.
위 에러는 변수의 값이 null 또는 정의되지 않은 상태에서 JavaScript의 map() 함수를 호출하려 할 때 발생한다.
아직 result에 데이터를 전달하지 않았기 때문에 위와 같은 문제가 발생했던 것이다.
@GetMapping("/index")
public ModelAndView index() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("result", new ArrayList<>());
return modelAndView;
}위 태그에 데이터가 잘 전달되는지 확인하기 위해 ModelAndView 객체에 result에 빈 ArrayList를 담아서 보낸 결과, 개발자 도구의 에러가 사라진 것을 확인할 수 있었다.
강의를 듣는 내내 학교에서 Spring을 배울 때 thymeleaf를 썼던 기억이 떠올랐다ㅎㅎ
전달한 데이터가 화면에 바로 동적으로 적용되는 점이 참 신기한 것 같다.