최근 Spring boot가 나오고, Spring의 진입장벽이 현저하게 낮아지며 급속도로 확산되고 있는듯 싶다.
Spring MVC로 서버 개발을 할 때, 화면 랜더링 처리를 담당하는 기술로는 주로 JSP를 표준으로 많이 사용해 왔다.
그동안 몇몇 프로젝트를 하며 항상 jsp로 화면 랜더링을 해 왔는데, 요새는 이게 또 구식이란다.
Spring boot에서는 기본적으로 JSP와 Thymeleaf(타임리프), Velocity 등을 지원 하는데, 이 중 Thymeleaf를 적극적으로 미는 느낌이다.
각각의 장, 단점이 있기에 같이 쓸 수 있으면 좋은데 현재로서는 불가능한 것으로 알고 있다.
(Spring boot의 단점인 빡빡한 태그 규칙 문제는 http://leafcat.tistory.com/27 를 참고)
이번에는 Thymeleaf를 사용할 때 Spring MVC에서 로직을 처리하고, html로 값을 전달하는 방법을 알아보자.
우선 간단한 로그인 기능으로 연습해 보겠다.
이메일, 비밀번호를 서버로 보낸다. (html -> Spring 값 전달 : http://leafcat.tistory.com/30 )
-> 서버에서 DB에 접속해 검증한다.
-> 결과코드를 html로 보낸다.
-> 이메일이 없으면 코드 "NE" : 등록되지 않는 이메일
-> 비밀번호가 틀렸으면 "PE" : 틀린 비밀번호
-> 맞으면 메인화면으로 바로 로그인
위 로직으로 연습해 보겠다. 로그인 로직은 spring boot 를 사용하여 구현했다.
아래는 이를 구현한 controller의 메소드이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @RequestMapping("/login.do") private ModelAndView doLogin(@Valid LoginVO loginVO, HttpServletRequest request) throws Exception { /* * 로그인 처리 SVC 호출 * */ String loginRslt = loginSvc.doLogin(loginVO); /* * 분기 * Login성공 * */ if(loginRslt.equals(StaticStringUtil.USER_LOGIN_SUCCESS)){ return new ModelAndView("redirect:/moveMain.do"); }else{ return new ModelAndView("login/login", "loginErr", loginRslt); } } | cs |
이제 여기서 전달해 준 login 오류에 대한 결과를 html이 받아 낼 차례다.
간단하게 생각나는 방법은 세가지가 있다.
1. input hidden + javascript(jquery)
가장 단순하면서도 누구나 생각하는 방법이다.
thymeleaf는 th:value 속성을 사용하여 spring에서 가져 온 값을 바로 태그로 맵핑할 수 있는데, 이를 이용한다.
1 | <input th:value="${loginErr}" type="text" id="loginRslt" hidden="true"/> | cs |
hidden 된 input 태그에 th:value 속성으로 서버에서 넘겨받은 loginErr 값을 받는다.
단순히 javascript로
1 2 3 4 5 6 7 8 9 | $(document).ready(function () { if($("#loginRslt").val() == "NE"){ alert("없는 이메일"); }else if($("#loginRslt").val() == "PE"){ alert("틀린 비밀번호"); } }); | cs |
이렇게만 해 주어도 되겠지만, 좀 더 예쁜 화면을 위해 디자인이 입혀진 div로 메시지를 표시해 주겠다.
1 2 3 4 5 6 7 8 | <div class="alert alert-danger alert-dismissable text-left" id="emailErr" hidden="true"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> This email is not registered. </div> <div class="alert alert-danger alert-dismissable text-left" id="pwdErr" hidden="true"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> Invalid password. </div> | cs |
메시지를 올리고자 하는 위치에 css가 입혀진 hidden 처리된 div를 올리고,
1 2 3 4 5 6 7 8 9 | $(document).ready(function () { if($("#loginRslt").val() == "NE"){ $("#emailErr")[0].hidden = false; }else if($("#loginRslt").val() == "PE"){ $("#pwdErr")[0].hidden = false; } }); | cs |
hidden되어 있는 id=loginRslt input 태그의 값에 따라 div의 hidden 속성을 변경해 주면 아래 화면처럼 깔끔한 로그인 오류 메시지 처리가 가능하다.
2. thymeleaf의 th:if 속성을 이용.
그냥 alert으로 처리하고자 한다면 1번의 방법이 편할 수 있다. 하지만 커스텀 div로 메시지를 표시해 주고자 할 때에는 이 방법이 훨씬 편하다.
thymeleaf의 강력한 장점이 바로 이런 것인데, 매우 편리하고 강력한 기능들의 커스텀 태그 속성을 제공한다.
(이클립스에서 thymeleaf의 사용을 도와주는 플러그인 소개 : http://leafcat.tistory.com/33 )
그 중 th:if 를 사용하여 똑같이 기능을 구현해 보겠다.
1 2 3 4 5 6 7 8 | <div th:if="${loginErr} == 'NE'" class="alert alert-danger alert-dismissable text-left" id="emailErr"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> This email is not registered. </div> <div th:if="${loginErr} == 'PE'" class="alert alert-danger alert-dismissable text-left" id="pwdErr"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> Invalid password. </div> | cs |
위 코드처럼 div 테그에 thymeleaf에서 제공하는 th:if 속성으로 분기 처리를 할 수 있다.
따로 서버에서 넘어온 result 값을 담아 둘 곳도 필요 없다.
스크립트 코딩도 전혀 필요 없다.
3. Ajax
뭐 어찌 되었건 ajax로 통신하여 javascript로 스크립트 짜 주면 다 되긴 한다.
(비동기 자바스크립트인 ajax는 동작하는 개념과 과정 자체가 다르니, 때에 따라 적용해 주면 되겠다.)
ajax 관련된 부분은 나중에 한번에 쓰도록 하겠다.
