본문으로 바로가기


최근 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 관련된 부분은 나중에 한번에 쓰도록 하겠다.



 Other Contents 

댓글을 달아 주세요

  1. Favicon of https://thefif19wlsvy.tistory.com FIF 2020.07.03 10:44 신고

    큰 도움이 됐습니다^^ 감사합니다~