11강. 프론트엔드 통합

IT 강좌(IT Lectures)/SpringBoot

11강. 프론트엔드 통합

소울입니다 2024. 7. 23. 08:35

728x90

챕터 11: 프론트엔드 통합

11.1 스프링부트와 Thymeleaf

11.1.1 Thymeleaf 개념 및 설정

Thymeleaf는 Java 기반의 서버 사이드 템플릿 엔진으로, HTML을 자연스럽게 생성할 수 있도록 돕습니다. Spring Boot와 쉽게 통합되어 동적인 웹 페이지를 생성하는 데 유용합니다.

역사적 배경:

과거에는 JSP(JavaServer Pages)를 많이 사용했으나, 이는 복잡한 설정과 코드 관리의 어려움이 있었습니다.
Thymeleaf는 이러한 문제를 해결하고자 등장했으며, HTML을 그대로 사용하면서 동적인 데이터를 표현할 수 있게 해줍니다.

11.1.2 기본 사용법과 예제

Thymeleaf를 사용하려면 Spring Boot 프로젝트에 spring-boot-starter-thymeleaf 의존성을 추가해야 합니다.

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Thymeleaf 템플릿 파일은 src/main/resources/templates 폴더에 위치합니다. 아래는 기본적인 Thymeleaf 템플릿 예제입니다:


package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@Controller
class WebController {

    // HTTP GET 요청을 처리하여 "index" 뷰를 반환하는 메서드
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "index";
    }
}

<!-- src/main/resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Index</title>
</head>
<body>
    <h1 th:text="${message}">Placeholder</h1>
</body>
</html>

위 예제에서 WebController는 "Hello, Thymeleaf!" 메시지를 모델에 추가하고 index.html 템플릿을 반환합니다. index.html 파일은 Thymeleaf를 사용하여 동적으로 메시지를 표시합니다.

11.2 정적 자원 관리 (CSS, JS, 이미지)

11.2.1 정적 자원의 관리 방법

정적 자원(CSS, JS, 이미지 등)은 src/main/resources/static 폴더에 위치시킵니다. Spring Boot는 이 폴더를 기본 정적 자원 제공 경로로 사용합니다.

11.2.2 경로 설정과 접근 방법

정적 자원은 애플리케이션의 루트 경로를 통해 접근할 수 있습니다. 예를 들어, src/main/resources/static/css/styles.css 파일은 http://localhost:8080/css/styles.css로 접근할 수 있습니다.

<!-- src/main/resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Index</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/styles.css}">
</head>
<body>
    <h1 th:text="${message}">Placeholder</h1>
    <script type="text/javascript" th:src="@{/js/scripts.js}"></script>
</body>
</html>

위 예제에서 CSS 파일과 JS 파일을 포함하여 정적 자원을 템플릿에 추가하는 방법을 보여줍니다.

11.3 SPA 프레임워크 통합 (React, Angular, Vue)

11.3.1 SPA 프레임워크 개요

SPA(Single Page Application)는 하나의 HTML 페이지로 구성된 웹 애플리케이션입니다. React, Angular, Vue는 대표적인 SPA 프레임워크로, Spring Boot와 통합하여 강력한 웹 애플리케이션을 만들 수 있습니다.

11.3.2 스프링부트와의 통합 방법

Spring Boot와 SPA 프레임워크를 통합하는 방법 중 하나는, Spring Boot를 백엔드로 사용하고, SPA 프레임워크를 프론트엔드로 사용하는 것입니다. 이를 위해 다음과 같은 설정이 필요합니다:


# application.properties
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html

이 설정은 Spring Boot가 정적 자원을 제공하는 방식입니다. 이제 React 예제를 통해 통합 방법을 살펴보겠습니다.


# React 애플리케이션 생성
npx create-react-app frontend

# Spring Boot 프로젝트의 src/main/resources/static 폴더로 빌드 결과 복사
cd frontend
npm run build
cp -r build/* ../src/main/resources/static/

위 명령어는 React 애플리케이션을 생성하고, 빌드하여 Spring Boot 프로젝트의 정적 자원 폴더로 복사하는 과정입니다.

Angular 예제

다음은 Angular 애플리케이션을 Spring Boot와 통합하는 예제입니다:


# Angular 애플리케이션 생성
ng new frontend

# Spring Boot 프로젝트의 src/main/resources/static 폴더로 빌드 결과 복사
cd frontend
ng build --prod
cp -r dist/frontend/* ../src/main/resources/static/

위 명령어는 Angular 애플리케이션을 생성하고, 빌드하여 Spring Boot 프로젝트의 정적 자원 폴더로 복사하는 과정입니다.

Vue 예제

다음은 Vue 애플리케이션을 Spring Boot와 통합하는 예제입니다:


# Vue 애플리케이션 생성
vue create frontend

# Spring Boot 프로젝트의 src/main/resources/static 폴더로 빌드 결과 복사
cd frontend
npm run build
cp -r dist/* ../src/main/resources/static/

위 명령어는 Vue 애플리케이션을 생성하고, 빌드하여 Spring Boot 프로젝트의 정적 자원 폴더로 복사하는 과정입니다.

11.4 서버 사이드 렌더링(SSR) 설정

11.4.1 SSR 개념

SSR(Server Side Rendering)은 서버에서 HTML을 렌더링하여 클라이언트에게 전달하는 방식입니다. 이를 통해 초기 로딩 속도를 개선하고 SEO(Search Engine Optimization)를 지원할 수 있습니다.

11.4.2 설정 및 구현 예제

Spring Boot와 함께 SSR을 사용하기 위해서는 템플릿 엔진(Thymeleaf, Freemarker 등)을 사용할 수 있습니다. 아래는 Thymeleaf를 사용한 SSR 예제입니다:


package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@Controller
class SSRController {

    // HTTP GET 요청을 처리하여 "ssr" 뷰를 반환하는 메서드
    @GetMapping("/ssr")
    public String ssr(Model model) {
        model.addAttribute("message", "This is server-side rendered content!");
        return "ssr";
    }
}

<!-- src/main/resources/templates/ssr.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>SSR Example</title>
</head>
<body>
    <h1 th:text="${message}">Placeholder</h1>
</body>
</html>

위 예제에서 SSRController는 서버 사이드 렌더링을 통해 동적인 데이터를 ssr.html 템플릿에 전달합니다. 템플릿 엔진은 서버에서 HTML을 렌더링하여 클라이언트에 전달합니다.

추가 예제 코드

예제 1: Thymeleaf로 목록 렌더링

Thymeleaf를 사용하여 서버에서 목록을 렌더링하는 예제입니다.


package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;
import java.util.List;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@Controller
class ListController {

    // HTTP GET 요청을 처리하여 "list" 뷰를 반환하는 메서드
    @GetMapping("/list")
    public String list(Model model) {
        List items = Arrays.asList("Item 1", "Item 2", "Item 3");
        model.addAttribute("items", items);
        return "list";
    }
}

<!-- src/main/resources/templates/list.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>List Example</title>
</head>
<body>
    <h1>Item List</h1>
    <ul>
        <li th:each="item : ${items}" th:text="${item}">Item</li>
    </ul>
</body>
</html>

위 예제에서는 ListController가 목록 데이터를 모델에 추가하고 list.html 템플릿에 전달합니다. Thymeleaf는 이 데이터를 사용하여 목록을 렌더링합니다.

예제 2: Vue.js와 Spring Boot 통합

Vue.js를 사용하여 Spring Boot와 통합하는 예제입니다.


# Vue 애플리케이션 생성
vue create frontend

# Spring Boot 프로젝트의 src/main/resources/static 폴더로 빌드 결과 복사
cd frontend
npm run build
cp -r dist/* ../src/main/resources/static/


package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@RestController
class MessageController {

    // HTTP GET 요청을 처리하여 "Hello from Spring Boot!" 메시지를 반환하는 메서드
    @GetMapping("/api/message")
    public String message() {
        return "Hello from Spring Boot!";
    }
}

이 예제에서는 Vue.js로 프론트엔드를 만들고, Spring Boot로 백엔드를 구성합니다. Vue.js 애플리케이션은 빌드 후 Spring Boot의 정적 자원 폴더로 복사됩니다.

예제 3: Angular와 Spring Boot 통합

Angular를 사용하여 Spring Boot와 통합하는 예제입니다.


# Angular 애플리케이션 생성
ng new frontend

# Spring Boot 프로젝트의 src/main/resources/static 폴더로 빌드 결과 복사
cd frontend
ng build --prod
cp -r dist/frontend/* ../src/main/resources/static/


package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

@RestController
class DataController {

    // HTTP GET 요청을 처리하여 JSON 데이터를 반환하는 메서드
    @GetMapping("/api/data")
    public Data data() {
        return new Data("Angular Integration", "Data from Spring Boot");
    }

    // 데이터를 나타내는 내부 클래스
    static class Data {
        private String title;
        private String message;

        public Data(String title, String message) {
            this.title = title;
            this.message = message;
        }

        public String getTitle() {
            return title;
        }

        public String getMessage() {
            return message;
        }
    }
}

이 예제에서는 Angular로 프론트엔드를 만들고, Spring Boot로 백엔드를 구성합니다. Angular 애플리케이션은 빌드 후 Spring Boot의 정적 자원 폴더로 복사됩니다.

'IT 강좌(IT Lectures) > SpringBoot' 카테고리의 다른 글

13강. 애플리케이션 설정 관리 (0)	2024.07.26
12강. 스프링부트와 국제화(I18N) (0)	2024.07.25
10강. Spring Boot DevTools (3)	2024.07.23
9강. Spring Boot Actuator (0)	2024.07.22
8강. 예외 처리 (0)	2024.07.19

현재글11강. 프론트엔드 통합

소울의 IT 길잡이

생활에 필요한 IT 정보를 공유해드립니다

삼성, 현대, SKT, 뉴스, 네이버, 애플, LG, it, kt, LG유플러스, lg전자, 삼성전자, 인공지능, sk텔레콤, 갤럭시, NEWS, Hyundai, ai, 유플러스, 카카오,

Today :
Yesterday :

12-21 00:00

소울의 IT 길잡이