Handlebars, DOMParser, NodeSelector를 사용한 랜더링 함수 만들기

React를 사용하지 않고(웹팩도) 단순하게 파일을 Link 하여 개발할 일이 생겼다. (유지보수 관련)

나는 Vanilla JS로 개발할 때에는 템플릿 엔진이 필수적이라고 생각한다. SSR로 구성된 페이지들은 필요가 없을 수 있겠지만, CSR로 구성된 페이지들은 사용자와의 인터렉션을 통해 유기적으로 UI가 추가, 삭제, 변경 되야하기 때문에 라고 생각한다.

 

템플릿 엔진은 대중적 이라고 생각되는 Handlebars 템플릿 라이브러리를 사용하였다.

 

템플릿을 랜더링하여 실제 DOM에 반영하는 프로세스는 다음과 같습니다.

- Id로 참조하여 String template 가져옴

- 템플릿 컴파일(Handlebars.compile) 실행

- 컴파일된 템플릿에 후처리 대상인 Element 참조

- 후처리 대상 Element에 Event binding 등 후처리 진행

- DOM에 추가

 

 

후기

프론트엔드 개발을 막 시작할 때 다른 개발자 분들의 코드를 보면서 (jQuery와  HTML String JS 소스코드에 삽입되어있는 코드) 너무 힘들게 개발하는 거 아닌가?라고 생각을 하였고, 그때부터 Handlebars 같은 템플릿 랜더링 라이브러리를 사용했다.

또는 DOM에 append method등을 통해 Element를 추가한 뒤, 동기적인 코드 없이 selector를 사용하여 Event binding 등을 하는 코드가 안전하지 않다고 느껴, 랜더링 된 템플릿에 Selector로 래퍼런스를 뽑아와 Event binding 등의 템플릿에 대한 후처리를 진행한 뒤 DOM에 Append 하는 프로세스를 마련했다.

한 창 React로 개발하는데, Vanilla JS로 개발해야 되는 상황이 생기기도 했고 나중에 랜더링 라이브러리 없이 개발을 할 때 어떻게 개발해야 할 것인지 생각해보기 위해 구현해보았다.

 

피드백은 언제나 환영합니다!

소스코드는 아래의 링크에서 확인하실 수 있습니다.

github.com/SungeunP/VanillaJSRenderingTemplateExample