Backend/Spring
[Spring 쇼핑몰 프로젝트] 동적 HTML 생성 (Js + Ajax, Template 라이브러리 사용/JRender) - 메인 컨테이너에 로그인 폼 출
saintclair
2024. 6. 6. 20:14
메인 페이지에서 로그인 버튼을 누르면 로그인 폼만 나오는 게 아니라 헤더나 어사이드 부분은 그대로 유지하되 메인 부분만 로그인 창으로 변경되게 하고 싶었다. 이를 위해서는 두 가지 방법을 사용할 수 있다.
JavaScript 및 AJAX 사용
로그인 버튼 클릭 시 JavaScript를 사용하여 AJAX 요청을 보내고 서버에서 로그인 폼을 받아와 메인 페이지의 특정 부분에 동적으로 추가한다.
이러한 방식의 문제점은 html의 요소를 문자로 다루기 때문에 홑따옴표와 쌍따옴표가 너저분하게 깔려있어서 알아보기도 힘들고 코딩하기는 더더욱힘들며 그 여파로 유지보수가 굉장히 힘들다라는 단점이 있다. 이 스파게티 소스는 종지부에는 본인이 만든 것도 헷갈리게 되는 현상이 발생한다.
서버 측 템플릿 이용
Spring MVC 또는 Thymeleaf와 같은 서버 측 템플릿 엔진을 사용해 메인 페이지를 생성할 때, 메인 페이지와 로그인 폼을 포함한 다른 페이지를 따로 생성하고, 로그인 버튼을 누를 때만 해당 부분을 로드하여 메인 페이지에 추가할 수 있다.
참고 페이지(+템플릿 사용의 자세한 설명)