타임리프를 쓰면서 느낀점

이전 회사에서는 풀스택 개발자로서 UI 개발은 SPA 기반인 React나 Next.js로 개발을 주로 했었다. 하지만, 이번 회사에서는 기술스택으로서 타임리프를 사용하게 되었다. 타임리프를 제대로 사용해본 것은 처음이기에 배웠던 점, 느꼈던 점 위주로 작성한다.

vs SPA 프레임워크

• 동기 통신
  • SPA는 비동기로 모든통신을 해야하지만 타임리프는 동기화방식으로 통신
• 개발 방식
  • MPA vs SPA
• HTML 호출 방식

  MPA

  • 브라우저(크롬) 주소 창에 url 을 입력
  • 그럼 컨트롤러(C)에서 디비 데이터 가져와 모델(M)에 넣은 후, 뷰(타임리프, JSP/JSTL) 에서 모델에 담긴 데이터를 출력
  • 스프링은 이걸 HTML 문서로 만들어 반환
  • 크롬은 HTML 문서를 받았으니 화면에 출력.
    => 이걸 Spring MVC 라 하고, 서버에서 HTML 문서를 만들었으니 SSR라 한다.

  SPA

  • 자바 스크립트로 데이터(json) 만 요청. ex) fetch, axios, ajax
  • 컨트롤러는 디비 데이터를 가져와 json 문서로 만들어 반환.
    => 모델, 뷰 가 필요없다.
  • 클라이언트는 Data를 반환 받아 조합해서 html 문서를 만든다. 클라이언트에서 html 문서를 만들었으니 CSR 이라한다. 이 과정을 프레임워크로 만든 게 react, vue 등.

장단점 비교

- Thymeleaf
장점: 서버 사이드 렌더링, SEO 친화성, 간단한 설정 및 통합, 전통적인 웹 애플리케이션에 적합
단점: 동적 상호작용 및 클라이언트 측 성능에 한계.

- SPA 프레임워크
장점: 동적이고 복잡한 UI, 빠른 사용자 경험, 모듈성, 재사용성, 풍부한 생태계
단점: SEO 문제, 초기 설정의 복잡성, 번들 크기

고민점

• 모듈화
  • Thymeleaf에서 재사용 가능한 컴포넌트를 만들기 위해 템플릿 조각(template fragments)을 사용 가능.
    ex) th:fragment, th:insert, th:replace 등
• 동적 랜더링(되도록 새로고침없이) 문제
• 디자이너와의 협업: 문법이 jsp보다 더 html에 가까워서 퍼블이랑 협업하기 용이하다?
• JSP보다 프론트 작업 편이: 서버사이드에서 동적으로 생성되는 부분을 제외하면 서버 없이도 일단 페이지를 브라우저로 열어볼수 있다. 스프링부트에서 밀어주는거라 설정이 jsp보다 간편하다.
• 데이터를 어디까지 ModelAttribute로 가져올지, 아니면 비동기로 가져올 것인지? 비동기로 가져올 때 UX 개선을 위해 Skeleton 애니메이션 혹은 Loading 등을 활용할 수 있다.

알아두면 용이한 문법

# 1. 에러메시지
<form action="#" th:action="@{/submit}" th:object="${user}" method="post">
    <div>
        <label>Name:</label>
	       // "*{name}" => user.name
        <input type="text" th:field="*{name}" />
        <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</div>
    </div>
    <div>
        <label>Email:</label>
        <input type="text" th:field="*{email}" />
        // parameter에 따른 에러메시지 관리 가능
        <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email Error</div>
    </div>
    <button type="submit">Submit</button>
</form>

# 2. th:field
# th:field를 사용하면 HTML 태그의 id, name, value 속성을 자동 처리해준다.
- 렌더링 전
<input type="text" th:field="*{itemName}" />

- 렌더링 후
<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />

참고

타임리프 공식 문서