3. 스프링부트( 블로그 만들기) 템플리레이트 인클루드 설정

윤주헌

Aug 14, 2024

Contents

1. 부분 템플릿 만들기 DB 1차 2차 3차 발전 내용 설명@중간 개념 설명@

동일한 코드 반복적으로 사용하지 않기 위해

@Include파일 사용함

1. 부분 템플릿 만들기

💡

반복되고 동일한 그림을 부분 템플릿으로 만들 수 있다 문법 {{>경로}}

1. 레이아웃 폴더 만들기

layout 폴더 만들기

2. 해더, 푸터 빼기 위한 파일 만들기

2개 만들어줌

2.1 해더와 푸터 html 위치

스테틱폴더에 있는 html파일의 해더, 푸터를 지우는거 아님!!! 템플레이트 Board 폴더의 mutache의 해더 푸터 지우고 다른곳에 옮기는 것

3. 분리

해더 머스테치에 넣기


<!DOCTYPE html>
<html lang="en">

<head>
    <title>Blog</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="list.html">Metacoding</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/save-form.html">글쓰기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

푸터 머스테치에 넣기


<footer class="bg-light p-5 text-center">
    <h4>Created by Metacoding</h4>
    <h5>☎ 010-2222-7777</h5>
    <button class="btn btn-outline-primary">고객센터</button>
    <button class="btn btn-outline-primary">오시는길</button>
</footer>
</body>

</html>

4. 보더 안에 있는 mustache에 해더, 푸터 빼주기

결과


{{>layout/header}}
<div class="container p-5">

    <div class="card">
        <div class="card-header"><b>글수정하기 화면입니다</b></div>
        <div class="card-body">
            <form>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter title" name="title" value="제목1">
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" name="content">내용1</textarea>
                </div>
                <button class="btn btn-primary form-control">글수정하기완료</button>
            </form>

        </div>
    </div>
</div>
{{>layout/footer}}

머스테치

{{>파일명}} 부분템플릿

5. 파일 만들기 리팩토리 클래스는 금요일날 마저

//컨트롤러에 할 수 있는데 srp안하면 디버깅 어렵기 때문에 나눈다

주소로 식별자 요청함

//의존 관계 브라우저(클라이언트)-> 컨트롤러 -> 레파지토리 -> DB

6. DB만들어야 한다 우리는 H2 사용할거임(테스트용을 사용 많이 함)

H2 → 인 메모리 DB 테스트 DB다 보통 commit(메모리에 있는 것을 하드디스크에 저장할 때)

하지만

H2는 메모리 DB여서 스프링 서버 사용할 때 자동으로 켜진다 (내장 H2를 실행할 거다)

스프링 꺼지면 알아서 사라짐 나중에 실제 DB에 넣을 수 있다

프로그램을 깔지 않아도 사용이 가능하다(스프링부트에서는)

라이브러리

빌드 그레들에 적혀있어서 사용 가능하다

URL 에 localhost:8080/h2-console적기

7. 어플리케이션 설정하기

application.properties에서 설정함

spring.datasource.driver-class-name=org.h2.Driver 드라이버가 어디에 있는지 spring.datasource.url=jdbc:h2:mem:test 고정된거임 외워라 spring.datasource.username=sa 이름 설정

패스워드는 이번에 안 넣었다

8. DB 접속해보기

DB 1차 2차 3차 발전 내용 설명@

🎟️

DB 1차 2차 3차 발전 내용 설명

9. 하이버네이트 설정 application.properties에 설정

application.properties에 spring.jpa.hibernate.ddl-auto=create spring.jpa.show-sql=true

추가

properties에 적은 것 설명

하이버네이트 관련 설정

spring.jpa.hibernate.ddl-auto=create

💡

Hibernate가 애플리케이션 실행 시 데이터베이스의 테이블을 어떻게 처리할지 정의합니다. 여기서 create는 애플리케이션이 시작될 때 데이터베이스의 모든 기존 테이블을 삭제한 후 새로 생성하도록 지시하는 설정입니다.

즉, 애플리케이션이 실행될 때마다 데이터베이스 스키마를 초기화합니다.

레파지토리 내용 → DB로 인서트 하려고 만듬

10. 보드 클래스 만들어 주기

Board 클래스에서

중간 개념 설명@

⚡

중간 개념 정리

보드 클래스 1차

자동으로 DB 테이블 만들어줌


package shop.mtcoding.blog.board;

import jakarta.persistence.*;
import lombok.Getter;
import lombok.Setter;

import java.sql.Timestamp;

@Setter
@Getter
@Table(name = "board_tb")
@Entity // DB에서 조회하면 자동으로 메핑이 된다!!
//자동 테이블 생성해준다
public class Board {
    @GeneratedValue(strategy = GenerationType.IDENTITY) //Auto_increments 설정, 시퀀스 설정
    @Id //Pk 설정
    private Integer id;
    private String title;
    private String content;
    private Timestamp createdAt;
}

application.properties에서

spring.jpa.hibernate.ddl-auto=none

none에서 create 변경하고 실행하면 아래에 만들어 졌다고 나온다.

어제 이어서 설명

@Entity

💡

하이버네이트 DB프레임워크다 → DB와 자바의 데이터 타입이 달라서 변환시켜 주는 것

프로덕션 환경(서비스 환경)에서 h2를 사용할 수 있을 까? → 못 씀 잘못해서 꺼지면 데이터 다 날라가기때문이다

배포하기 전 필수

배포하기 전에는 spring.jpa.hibernate.ddl-auto=none 으로 해줘야 한다.

create를 하면 장점

필드에 접속해야 하는데 mysql들어가서 alter table로 변경 해줘야 하는데 h2는 필드 추가하려면 번거로운것 필요없이 그냥 private int userId 처럼 적어주면 끝이다(@Entity적은 파일에서)

@Getter, @Setter 안 써주면 → 필드 추가시 여기에 대한 getter,setter 직접 만들어야 한다. 만약 변수이름 잘못 적었으면 다시 getter, setter 이름 다시 변경해야 하는 번거로움이 있다.

빌더패턴 사용 안 하면

전체를 만드는 생성자가 필요하다 , 만약 id만 필요하면 또 만들어야 한다

빌더 패턴 방법

디폴트 construct → 빈 생성자

디폴트 생성자 왜 필요하냐 → 자바 세상, DB세상은 다르다 (데이터 자료형이 다르다)

OM 이란 →

친구랑 둘 이서 택배 옮기는 일이다

엄청 큰 박스에 다 집어넣어서 나한테 들고온다. 나는 받아서 고객한테 배송해야 하는데 고객 개개인을 위한 박스를 하나 하나 꺼내서 옮겨 담아야 한다.

잘 사용하려고 꺼내서 하나 하나 보내는 것 이것과 같다

DB에서 자바로 전달할 때 이해할 수 없는 자료형(테이블)타입이 있다 → 전송 받으면 자기 타입으로 바꿔야 한다. (통신에서 기본적인 것이다) 원래는 개발자 하나 하나 바꿔야 한다 하지만 mybastis, hibernate사용하면 자동으로 옮겨 담아준다. 이게 OM이다!!

빈 생성자는 왜 필요한가

→ 자바가 DBMS에 select 요청하면 DBMS가 테이블데이터로 응답해준다. 자바 프로그램이 바로 받는 게 JDBC였고 한번에 받는게 hibernate다
hibernate가 Java와 DB사이에 대리인 역할을 해준다
요청 받으면 hibernate가 받아서 java에게 테이블데이터와 같은 java 클래스가 없는가 쫙 찾아본다 즉 @Entity적은 애를 찾는다 → 받은 파일 OM을 해준다(사물 연결해준다) → 찾으면 객체를 빈 생성자 때려서 new 해서 그냥 빈 생성자 new하면 null 떠서 세터로 다 담는다.

왜 빨간줄 뜨냐? → 빈 생성자 없어서

hibernate는 왜 빈 생성자를 필요로 할까?

풀 생성자(여러가지 들어가 있는 생성자)로 가기에는 자동화 설계가 힘들기 때문이다. 어떤 모양인지 어떻게 알고?

빈 생성자 만들어주는 어노테이션

💡

@NoArgsConstructor 하이버네이트가 OM할 때 필요하다

11. 빌더 넣은 보드 결과


package shop.mtcoding.blog.board;

import jakarta.persistence.*;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import java.sql.Timestamp;

@NoArgsConstructor
@Setter
@Getter
@Table(name = "board_tb")
@Entity // DB에서 조회하면 자동으로 메핑이 된다!!    하이버네이트 DB프레임워크다-DB 자바 데이터 타입이 달라서 연결 해주는 것
//자동 테이블 생성해준다
public class Board {
    @GeneratedValue(strategy = GenerationType.IDENTITY) //Auto_increments 설정, 시퀀스 설정
    @Id //Pk 설정
    private Integer id;
    private String title;
    private String content;
    private Timestamp createdAt;

    @Builder
    public Board(Integer id, String title, String content, Timestamp createdAt) {
        this.id = id;
        this.title = title;
        this.content = content;
        this.createdAt = createdAt;
    }
}

<!DOCTYPE html> <html lang="en"> <head> <title>Blog</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="list.html">Metacoding</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/save-form.html">글쓰기</a> </li> </ul> </div> </div> </nav>

<footer class="bg-light p-5 text-center"> <h4>Created by Metacoding</h4> <h5>☎ 010-2222-7777</h5> <button class="btn btn-outline-primary">고객센터</button> <button class="btn btn-outline-primary">오시는길</button> </footer> </body> </html>

{{>layout/header}} <div class="container p-5"> <div class="card"> <div class="card-header"><b>글수정하기 화면입니다</b></div> <div class="card-body"> <form> <div class="mb-3"> <input type="text" class="form-control" placeholder="Enter title" name="title" value="제목1"> </div> <div class="mb-3"> <textarea class="form-control" rows="5" name="content">내용1</textarea> </div> <button class="btn btn-primary form-control">글수정하기완료</button> </form> </div> </div> </div> {{>layout/footer}}

package shop.mtcoding.blog.board; import jakarta.persistence.*; import lombok.Getter; import lombok.Setter; import java.sql.Timestamp; @Setter @Getter @Table(name = "board_tb") @Entity // DB에서 조회하면 자동으로 메핑이 된다!! //자동 테이블 생성해준다 public class Board { @GeneratedValue(strategy = GenerationType.IDENTITY) //Auto_increments 설정, 시퀀스 설정 @Id //Pk 설정 private Integer id; private String title; private String content; private Timestamp createdAt; }

package shop.mtcoding.blog.board; import jakarta.persistence.*; import lombok.Builder; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import java.sql.Timestamp; @NoArgsConstructor @Setter @Getter @Table(name = "board_tb") @Entity // DB에서 조회하면 자동으로 메핑이 된다!! 하이버네이트 DB프레임워크다-DB 자바 데이터 타입이 달라서 연결 해주는 것 //자동 테이블 생성해준다 public class Board { @GeneratedValue(strategy = GenerationType.IDENTITY) //Auto_increments 설정, 시퀀스 설정 @Id //Pk 설정 private Integer id; private String title; private String content; private Timestamp createdAt; @Builder public Board(Integer id, String title, String content, Timestamp createdAt) { this.id = id; this.title = title; this.content = content; this.createdAt = createdAt; } }