[FreeMarker] - <#noparse> 태그란?

 이번에 투입된 프로젝트에서 사용중인 템플릿엔진인 FreeMarker 처음으로 접하게 되었다.

JSP나 thymeleaf를 사용한 경험이 있어서  FreeMarker로 작성된 코드들도 그렇게 어렵게 느껴지진 않았다.

 

 어차피 각 템플릿 엔진마다 약간의 문법차이만 있을뿐 사용하고자 하는 기능은 비슷비슷하기 때문에 

그때 그때 필요한 문법은 구글링을 통해서 이해하고 넘어갔다.

 

그런데 <#noparse>라는 태그는 별도로 좀 기억해두는 것이 좋을 것 같아서 이렇게 정리한다.

 

<#noparse>를 사용하면 해당 태그안에 작성된 내용들은 프리마커에 의해서 처리되지 않는다.

JSP처럼 FreeMarker는 <#...> 또는 ${...}로 둘러싸인 코드를 템플릿 언어로 인식하고 처리한다.

 

이때 발생할 수 있는 문제로 프리마커에 작성한 javascript의 ${...}(표현식 삽입)을 프리마커의 언어로 처리되어버려서 원하지 않는 결과를 도출하는 문제가 발생할 수있다.

 

따라서 <#noparse>태그로 감싸서 해당 부분은 FreeMarker에 의해서 처리되지 않도록 처리하여 JS의 #{..}  표현식으로 인식되게끔 처리해주어야 했다.

 

아래는 그 예시이다.

 

<script>
		dataList.forEach(data => {
			const lscss = getLectureStateClass(data.lecture_state);
			const tableRow = document.createElement('tr');
	<#noparse>
			tableRow.innerHTML = `
      <td class="c" <span class="txt">${lscss === '01' ? 'D' + data.dday : data.lecture_state}</span> </td>
      <td style="text-align: left;"><a href="#n" onclick="fnView('${data.job_idx}')">${data.crs_name}</a></td>
      <td class="c">${data.wait_cnt !== '0' ? data.recruits : data.req_cnt} / ${data.recruits}</td>
      <td class="c">${new Date(data.rgstr_stdt).toLocaleDateString()} ~ ${new Date(data.rgstr_eddt).toLocaleDateString()}</td>
      <td class="c">${data.target_code2_nm}</td>
      <td class="c">${new Date(data.trnng_stdt).toLocaleDateString()} ~ ${new Date(data.trnng_eddt).toLocaleDateString()}</td>
      <td class="c">${data.trnng_time}시간</td>`;
			tableElement.appendChild(tableRow);
		});
	</#noparse>

</script>>