Thymeleaf 에서 Enum 쓰기

코드에 상수를 남기는 것은 좋지 않다. 그 상수가 무엇을 의미하는지 쉽게 이해하기 힘들 뿐더러 그 상수 값 하나를 바꾸기 위해 수천라인의 코드를 한 줄 한 줄 다 뒤져야 할 수도 있다.

 

이것은 HTML 안에서도 마찬가지이다. 아래와 같은 코드가 있다고 해 보자.

<button onclick="makeNewPopup(1, content)"> make popup </button>

버튼 태그 onclick 속성을 보면 클릭했을 때 makeNewPopup이라는 함수를 호출하고 있다. 그런데 파라미터로 전달되는 상수 1이 의미하는 것은 무엇일까? 이 코드만 봐서는 도무지 알 수가 없다. 

 

이 상수를 생성되는 popup의 타입이라고 생각해보자. 이 상수를 조금 더 가독성 있게 표현할 수 있는 한 가지 방법은 자바스크립트의 전역변수로 선언을 해 놓고 사용하는 것이다.

<script>
    var POP_TYPE_ERROR = 1;
    var POP_TYPE_MESSAGE = 2;
    var  ...
    
    ...
</script>

...

<button onclick="makeNewPopup(POP_TYPE_ERROR, content)"> make popup </button>

이렇게 하면 생성되는 팝업의 타입이 무엇인지를 쉽게 알아볼 수 있을 것이다. 또 타입의 값이 바뀌면 자바스크립트 코드 안의 변수값만 바꾸면 된다. 

 

그런데 만약 makeNewPopup 함수의 파라미터 변수인 content가 서버에서 넘어온 값이고 이 값의 타입 상수를 서버측에서도 사용하고 있다면 어떨까? 먼저 생각해 볼 수 있는 방법은 콘트롤러에서 모델이나 리턴값에 타입을 나타내는 변수까지 같이 넘겨 주는 것이다. 

model.addAttribute("type",CONT_ERROR_CODE);
model.addAttribute("content",content);

만약 타이런식으로 모델의 속성으로 넘기는 content의 type을 추가해 주면 view 단에서 다음과 같이 처리할 수 있다.

<button th:onclick="|makeNewPopup('${type}', '${content}')|"> make popup </button>

그런데 만약 서버에서 type의 값이 enum으로 정의되어 있다면 어떨까? 이 때는 굳이 컨트롤러에서 type 값을 넘겨줄 필요 없이 다음과 같이 쓸 수 있다.

<button th:onclick="|makeNewPopup('${T(package.path.ContentType).ERROR}', '${content}')|"> make popup </button>