본문으로 건너뛰기
Advertisement

4.4 정적 리소스(Static) 처리와 뷰(View) 렌더링 기초

소프트웨어 아키텍처에서 백엔드 서버는 브라우저가 화면을 그리는 역할(View Rendering)을 수행하기도 하고, 순수하게 데이터만 넘겨주는 역할(REST API)을 하기도 합니다. 여기서는 화면 처리에 대해 배웁니다.

1. 정적 리소스 (Static Resources)​

HTML, CSS, JS, 이미지 파일 등 내용이 동적으로 로직에 의해 변하지 않는 파일들을 정적 리소스라고 부릅니다. 스프링 부트는 다음 위치의 파일들을 정적 리소스로 기본 매핑합니다.

src/main/resources/
 ├── static/       (이곳에 index.html을 넣으면 메인 루트 홈 화면 페이지가 됩니다)
 ├── public/
 ├── resources/
 └── META-INF/resources/

만약 src/main/resources/static/css/style.css 에 파일이 위치한다면, 클라이언트는 http://localhost:8080/css/style.css 로 직접 조회할 수 있습니다.

2. 서버 사이드 렌더링 (SSR)과 템플릿 엔진​

스프링 컨트롤러 로직에서 DB 데이터를 조회하여 동적 HTML 화면을 조합한 뒤 클라이언트 브라우저로 응답하는 방식을 SSR(Server Side Rendering)이라 합니다. 스프링 부트는 **Thymeleaf(타임리프)**를 공식적으로 권장합니다.

Thymeleaf 뷰 렌더링 예제​

  1. 컨트롤러 작성
@Controller
public class ViewController {
    
    @GetMapping("/hello")
    public String hello(Model model) {
        // Model 상자를 통해 HTML로 넘겨줄 데이터를 세팅
        model.addAttribute("data", "Hello, Spring!");
        
        // 논리적 뷰 이름 반환 -> src/main/resources/templates/home.html 파일을 찾아감
        return "home"; 
    }
}
  1. Thymeleaf HTML 템플릿 작성 (resources/templates/home.html)
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello View</title>
</head>
<body>
    <!-- 컨트롤러에서 넘긴 'data' 문자열이 text 값으로 치환됩니다 -->
    <h1 th:text="${data}">기본 텍스트(엔진 변환 시 이 글자는 덮어씌워짐)</h1>
</body>
</html>

정적 리소스와 반대로, 이러한 동적 화면 템플릿들은 보안상 사용자가 URL로 직접 열람하지 못하도록 설계된 src/main/resources/templates/ 하위에 위치해야 안전합니다.

Advertisement
Advertisement