ManagerFlow 제작에 앞서 가장먼저 클라이언트가 보게될 화면인 FrontEnd를 선택하는 과정은
가장먼저 렌더링 방식인
서버사이드 렌더링과 클라이언트 사이드 랜더링(SSR VS CSR) 선택을 하는 과정이다.
렌더링( rendering) : 이미지를 생성하는 프로세스
| SSR(서버사이드) | CSR(클라이언트사이드) | |
| 특징 | 서버쪽에서 렌더링하여 화면을 보여주는 방식 | 클라이언트(브라우저)가 렌더링을 맡아 하는 방식 |
| 장점 | 단순하고 쉽게 작업가능, 첫페이지 로딩속도가 빠름, 검색엔진 최적화가 가능. | 초기화면로딩이후 빠른 렌더링과 상호작용, 새로고침이 발생하지 않아 사용자 경험에 도움, 필요한 데이터만 받아오므로 트래픽 감소, 동적이고 복잡한 화면 구성 가능 |
| 단점 | 동적이고 복잡한 화면구성이 힘듬, 서버과부화, 자주 일어나는 새로고침으로 인한 깜빡임. | 검색엔진 최적화에 보완필요, 필요한 공부량 상승 |
| 예시 | jsp,thymeleaf,velocity freemarker | react, vue.js, angularJS |
우리 프로젝트에서는 복잡한 화면구성이나 페이지 새로고침이 자주 필요하지 않다는 점을 통해 SSR을 선택하게 되었고,
그중 Spring을 통한 개발예정이므로 Spring Boot에서 권장하는 thymeleaf를 사용하기로 했다.
- Spring MVC와 통합이 쉬워 백엔드와 프론트엔드 모두에서 일관된 기술 스택을 유지할 수 있어 개발과 유지보수의 편리함,
- 서버사이드 렌더링으로 인해 서버에서 데이터를 처리하고 필요한 HTML만 클라이언트에 전달하여 보안성도 우수
- Spring Boot와 통합된 템플릿 엔진으로 프로젝트 구조와 코드베이스가 단순해진다.
라는 장점을 통해 Thymeleaf를 선택하게 되었다.
Thymeleaf
SSR방식, 네츄럴 템플릿.
네츄럴 템플릿 - 순수한 HTML을 유지하려는 특징이 있다. 타임리프로 작성한 파일은 HTML형식을 유지하기 때문에 웹 브라우저에서 파일을 직접열어도 확인가능하고 서버를통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
JSP를 포함한 다른 템플릿은 웹 브라우저로 연결시 JSP와HTML이 섞여있어 정상적인 확인이 힘들다.
다음 공식문서를 통해 기본적으로 제공하는 표현식들을 확인 할 수 있다.
라이브러리 추가..
Gradle - build.gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation 'org.springframework.boot:spring-boot-starter-test'Maven - pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>기본 경로
타임리프는 다음과 같이 기본 뷰 템플릿 경로로 다음코드가 자동으로 추가된다.
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html템플릿 사용 파일 위치
Spring Boot에서는 템플릿용 파일의 기본 경로가 미리 지정되어 있으므로 src/main/resources/templates 안에 HTML파일을 만들어야한다.
타임리프 사용을 위해 html태그에 다음과 같은 코드를 추가해주고
<html xmlns:th="http://www.thymeleaf.org">위쪽의 기본 제공 표현식을 통해 다양한 기능 사용이 가능하다.
th:xxx가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다.
th:xxx가 없으면 기존 HTML의 xxx속성이 그대로 사용된다.
HTML을 파일로 직접 열었을 때, th:xxx가 있어도 웹에선 th: 속성을 알지 못하므로 무시되고, HTML파일 보기를 유지하며 템플릿 기능도 수행 할 수 있다.
- ※ 주의: 스프링 부트 3.0부터는 ${#request}, ${#response}, ${#session}, ${#servletContext}를 지원하지 않는다. 만약, 스프링 부트 버전이 3.0 이상이라면 model에 해당 객체를 추가해서 사용해야 한다.
'Project > ManagerFlow' 카테고리의 다른 글
| MVC (0) | 2024.06.18 |
|---|
