스프링부트 내에서 타임리프로 프론트 개발을 하면서 느낀 불편한 점 및 단점

안녕하세요. 루루개발자 입니다.

최근 회사 프로젝트에서 스프링 프로젝트 내부에서 타임리프로 프론트를 맡아서 작업을 진행한 적이 있습니다. 이 때 작업하면서 느꼈던 불편한 점과 단점을 공유 드리고자 합니다.

 

왜 타임리프로 하게 되었나?

1:1 문의 페이지를 제작해야 했는데 페이지 수가 그리 많지 않고 이동이 많은 페이지가 아니었기 때문에 이번에는 프론트엔드 프레임워크를 사용하지 않고 타임리프로 개발을 해보자라는 의견이 나왔고 저도 거기에 동의하여 그렇게 진행을 하게 되었습니다.

 

Typescript 를 사용하지 못하는 불편함

막상 타임리프로 개발을 진행하려고 보니 Typescript 를 쓰지 못하는 점이 크게 체감이 되었습니다. 타입 추론이 되지 않으니 객체에 어떤 속성들이 있는지 자동완성이 전혀 되지 않아 불편하였고, 특히 cdn 으로 불러온 라이브러리 같은 경우도 타입 추론이 전혀 되지 않다 보니 사용에 불편함이 크게 다가왔습니다.

 

물론, Typescript 레포를 따로 생성하여 js 관련된 작업은 거기서 진행 한 후 번들링한 결과를 스프링부트 내로 export 하여 html 에서는 그 번들링된 js 파일을 불러오게하여 방법도 있겠지만 html 파일 및 css 파일은 스프링부트 레포에서 관리해주어야 하고 js 는 또 별도 레포에서 관리를 해주어야 하는 불편함이 생깁니다.

 

프론트 수정 시 반영까지 시간이 다소 소요되는 불편함

프론트엔드 프레임워크에서 코드가 수정되면 빌드가 이루어 집니다. 하지만 그 속도는 1초 내외로 매우 빠르게 반영되어 수정이 발생하면 곧바로 브라우저에서 확인 가능했습니다. 하지만 스프링 내에서 타임리프로 개발 할 때는 html, css, js 파일을 수정할 때마다 변경된 내용을 확인하려면 빌드를 해줘야 하는데 이 빌드 속도가 5~7초 정도 소요되었기 때문에 수정된 프론트 내용을 확인하기 위해서는 5~7초를 기다려야 반영된 것을 확인 할 수 있다는 점이 크게 불편하였습니다.

 

물론 인텔리제이에서 설정을 변경하고 크롬의 LiveReload 확장프로그램을 활용하면 html, css, js 수정 시 수동으로 재빌드 해주지 않아도 자동으로 재빌드되며 새로고침까지 되는 걸 구현 할 수는 있습니다. 하지만 브라우저에 포커싱이 간 이후에 재빌드~새로고침이 이루어 진다는 점과 재빌드~새로고침 까지 여전히 4~5초가 소요된다는 점은 큰 불편 요소로 다가왔습니다.

 

사용하는 라이브러리의 최신 버전 체크의 불편함

개발을 하다 보면 여러가지 라이브러리를 사용하게 됩니다. 타임리프로 개발을 진행했기 때문에 라이브러리를 사용하기 위해선 script 태그에 cdn 으로 불러와 라이브러리를 사용해야 합니다. 하지만 사용하는 라이브러리의 버전을 최신화 해야 할 때 사용하는 라이브러리의 최신 버전을 일일이 검색하여 확인해주어야 하고 거기에 따라 cdn 주소도 변경을 해주어야 하는 불편함이 있습니다. 그리고 만약 기존에 사용중이던 속성이나 함수가 변경되었다면 이를 코드에서 바로 알 방법도 없습니다. 타입 추론이 안되니까 말이죠.

 

만약 타입스크립트가 적용된 프론트엔드 프레임워크를 사용하였다면 npm 패키지중 “npm-check-updates” 패키지를 사용하여 “ncu -u” 명령어 하나로 사용중인 라이브러리의 버전을 최신화 시켜줄 수가 있습니다. 사용 중이던 속성이나 함수가 변경되었다면 Typescript 의 타입 추론으로 에디터 상에서 바로 표시가 되어 어디를 수정해야 하는지도 알 수 있습니다.

 

컴포넌트 사용의 어려움 및 데이터 바인딩의 부재

타임리프의 th:replace 문법을 사용하여 미리 만들어둔 html 코드를 불러와 반영시킬 수는 있지만 만약 반복되는 컴포넌트인 경우(리스트 아이템 컴포넌트) 각 컴포넌트별로 scope 가 형성되어 js 및 css 도 그룹핑이 되어야 하는데 프론트엔드 프레임워크가 없는 환경에선 그렇게 사용하기가 어렵습니다. 데이터 바인딩 기능도 이용할 수 없어서 데이터 변경시 화면에 반영하는 코드도 일일이 작성해 주어야 하는 불편함도 크게 다가왔습니다.

 

 

 

물론 타임리프로 프론트를 하게 됨으로써 장점도 존재하겠지만 저는 장점보다는 이러한 불편한 점들과 단점들이 더 크게 느껴졌습니다.