유쨈미 2024. 7. 16. 17:15

1. Thymeleaf Layout

웹 애플리케이션의 일관된 구조와 디자인을 유지하면서 코드 재사용성을 높이는 강력한 기능이다.

 

💡 상세 기능 설명

 

1️⃣ 레이아웃 템플릿 정의

  1. 기본 HTML 구조를 정의하는 레이아웃 파일을 생성한다.
  2. 보통 <head>, <header>, <footer> 등 공통 요소를 포함한다.
  3. 콘텐츠가 삽입될 위치를 layout:fragment 속성으로 지정한다.

 

2️⃣ 페이지 조각 (fragment) 사용

  1. 재사용 가능한 HTML 조각을 정의한다.
    (ex : 네비게이션 바, 사이드 바)
  2. th:fragment 속성으로 조각을 정의하고, th:insert 또는 th:replace로 삽입한다.

 

3️⃣ 콘텐츠 교체 및 삽입

  1. layout:fragment를 사용해 레이아웃의 특정 부분을 페이지별 콘텐츠로 교체한다.
  2. th:insert는 호스트 태그 내부에 조각을 삽입, th:replace는 호스트 태그를 조각으로 완전히 교체한다.

 

4️⃣ 타이틀 처리

  1. layout:title-pattern을 사용해 동적으로 페이지 타이틀을 설정할 수 있다.

 

5️⃣ 중첩 레이아웃

  1. 레이아웃을 중첩하여 더 복잡한 페이지 구조를 만들 수 있다.

 

💻 레이아웃 예시 코드

<!-- layouts/main-layout.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">Main Layout</title>
</head>
<body>
    <header th:replace="fragments/header :: header"></header>
    <div layout:fragment="content">
        <!-- 각 페이지의 고유 내용이 여기에 들어간다. -->
    </div>
    <footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>

<!-- pages/home.html -->
<html layout:decorate="~{layouts/main-layout}">
<head>
    <title>Home Page</title>
</head>
<body>
    <div layout:fragment="content">
        <h1>Welcome to the Home Page</h1>
        <!-- 페이지 고유 내용 -->
    </div>
</body>
</html>
 

Thymeleaf 페이지 레이아웃

Thymeleaf Layout Dialect를 이용하면 하나의 레이아웃을 여러 페이지에 똑같이 적용할 수 있습니다. 공통적으로 적용되는 레이아웃을 미리 만들어놓고 현재 작성 중인 페이지만 레이아웃을 끼워넣으

velog.io

- 참고 : jincrates.log

 

[개발일지#018] 타임리프 레이아웃 적용하기(Thymeleaf Layout)

[참고] 김영한님 스프링 강의를 바탕으로 진행되는 토이프로젝트의 과정을 기록하는 글입니다. 둥근 피드백은 언제나 환영입니다. [오늘의 개발내용] 1. 타임리프 레이아웃 적용하기 전체 타임

ddururiiiiiii.tistory.com

- 참고 : ddururiiiiiii


2. JPA:private int와 private integer차이

JPA에서 int와 Integer 타입의 차이는 데이터베이스 설계와 쿼리 성능에 중요한 영향을 미친다.

 

1️⃣ Null 처리

  1. int
    null을 저장할 수 없다. 데이터베이스에서 NOT NULL 제약조건이 자동으로 적용된다.
  2. Integer
    null 값을 저장할 수 있다. 선택적(Optional) 필드에 적합하다.

 

2️⃣ 기본값

  1. int
    초기화하지 않으면 자동으로 0으로 설정된다.
  2. Integer
    초기화하지 않으면 null이다.

 

3️⃣ 메모리 사용

  1. int
    4바이트 고정 크기를 사용한다.
  2. Integer
    객체 오버헤드로 인해 더 많은 메모리를 사용한다. (대략 16바이트)

 

4️⃣ 성능

  1. int
    직접 값을 저장하므로 약간 더 빠르다.
  2. Integer
    언박싱(Unboxing) 과정이 필요하므로 약간의 성능 저하가 있을 수 있다.

 

5️⃣ 쿼리 최적화

  1. int
    NULL 체크가 필요 없어 쿼리 최적화에 유리할 수 있다.
  2. Integer
    NULL 체크가 필요하여 쿼리가 복잡해질 수 있다.

 

6️⃣ JPA 특정 기능

@Version Annotation
낙관적 잠금(Optimistic Locking)을 구현할 때 int 타입이 더 적합하다.

 

💻 예시 코드

@Entity
public class Person {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private int age;
    private Integer height;

    // getters and setters
}

3. Spring DB연동 (JDBC)

Spring에서 JDBC를 사용한 DB 연동은 데이터베이스와의 상호작용을 위한 기본적인 방법이다.

 

💡 주요 컴포넌트

  1. DataSource
    데이터베이스 연결 정보를 관리
  2. JdbcTemplate
    SQL 실행을 위한 편리한 템플릿 클래스

 

💡 설정 단계

  1. 의존성 추가 (build.gradle 또는 pom.xml)
  2. 데이터베이스 연결 정보 설정(application.properties)
  3. DataSource Bean 설정
  4. JdbcTemplate Bean 설정

 

💻 예시 코드

// application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=user
spring.datasource.password=password

// Configuration class
@Configuration
public class DatabaseConfig {
    @Bean
    public DataSource dataSource() {
        return DataSourceBuilder.create()
            .url("jdbc:mysql://localhost:3306/mydb")
            .username("user")
            .password("password")
            .build();
    }

    @Bean
    public JdbcTemplate jdbcTemplate(DataSource dataSource) {
        return new JdbcTemplate(dataSource);
    }
}

// DAO class
@Repository
public class UserDao {
    private final JdbcTemplate jdbcTemplate;

    public UserDao(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    public void save(User user) {
        String sql = "INSERT INTO users (name, email) VALUES (?, ?)";
        jdbcTemplate.update(sql, user.getName(), user.getEmail());
    }

    public User findById(Long id) {
        String sql = "SELECT * FROM users WHERE id = ?";
        return jdbcTemplate.queryForObject(sql, new Object[]{id}, new BeanPropertyRowMapper<>(User.class));
    }
}
 

[Spring] Spring JDBC: DataSource로 MySQL 연동하기

기존 진행방법 (JDBC) SQL String 자바 객체 -> JDBC interface -> JDBC DRIVER -> DBMS MySQL을 연동할 때, DBUtil.java 라는 파일을 만들고, DB가 필요할 때마다 Connection을 맺는 작업을 진행. => 작

velog.io

- 참고 : package com.mxnzx,study;

 

[스프링 부트(SpringBoot)] 데이터베이스 연동 기초

4. 데이터베이스 연동 기초 4.1. JDBC 연동 스프링 부트는 데이터베이스 연동을 위해 JDBC(Java Database Connectivity)를 사용할 수 있습니다. JDBC는 자바 애플리케이션에서 데이터베이스에 접근하고 데이

gdngy.tistory.com

- 참고 : gdngy

 

[Spring] DB(MySQL) 연결

spring gradle - MySQL - JPA 연결

velog.io

- 참고 : sians0209


4. Server Side Rendering (Thymeleaf)

서버 사이드 랜더링(SSR)은 웹 페이지의 내용을 서버에서 생성하여 클라이언트에게 전달하는 방식이다.

Thymeleaf는 Spring에서 SSR을 구현하는 대표적인 템플릿 엔진이다.

 

💡 SSR의 장점

  1. 초기 페이지 로딩 속도가 빠르다.
  2. 검색 엔진 최적화(SEO)에 유리하다,
  3. 서버에서 데이터 처리 및 보안 관리가 용이하다.

 

💡 Thymeleaf를 이용한 SSR 구현 단계

  1. Thymeleaf 의존성 추가
  2. 컨트롤러에서 모델 데이터 준비
  3. Thymeleaf 템플릿 작성
  4. 뷰 반환

 

💻 예시 코드

// Controller
@Controller
public class UserController {
    @GetMapping("/users")
    public String listUsers(Model model) {
        List<User> users = userService.getAllUsers();
        model.addAttribute("users", users);
        return "user-list";  // Thymeleaf 템플릿 이름
    }
}

// Thymeleaf 템플릿 (user-list.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.email}"></td>
        </tr>
    </table>
</body>
</html>

위 예시 코드에서 서버는 사용자 목록을 가져와 Thymeleaf 템플릿에 데이터를 채워 넣고,
완성된 HTML을 클라이언트에게 전송한다. 이것이 Thymeleaf를 사용한 서버 사이드 랜더링의 기본 방식이다.

 

 

Server Side Rendering (Thymeleaf)

도입 서버 개발자가 웹페이지를 구성하여 보여주는 기능을 SSR이라고 한다. SSR은 여러가지 방법으로 구현될 수 있는데 그 기술 중 네츄럴 템플릿인 Thymeleaf를 알아보도록 하자. SSR(Server-Side Renderin

cnu-jinseop.tistory.com

- 참고 : cnu-jinseop

 

thymeleaf (server-side template engine) 사용법 정리 - 2

지역변수 (Local Variables) Thymeleaf에서 지역변수의 범위는 변수가 정의된 DOM을 포함한 하위의 DOM까지를 포함합니다. 예를들면 다음과 같습니다. 1 2 3 4 5 Onions 2.41 Colored by Color Scripter cs 위 fragment는 ea

cyberx.tistory.com

- 참고 : cyberx