vue + jpa project (2) - JPA Project 초기 기본 생성 본문
vue + jpa project (2) - JPA Project 초기 기본 생성
- 2023. 10. 23. 12:08
우선 백엔드 프로젝트를 먼저 생성하겠다.
순서 상으로 본다면 프론트를 먼저 만들어야 겠지만
백엔드 프로젝트가 있어야 프론트에서 호출이 가능하므로 이렇게 진행하겠다.
향후에는 프론트와 백엔드를 왔다갔다 하면서 진행하게 된다.
백엔드는 STS 를 이용하기로 했다. DB는 로컬 마리아DB를 사용하기로 했다.
1. 우선 JPA 프로젝트를 아래의 이미지처럼 생성한다.
java 버전은 최신인 17을 사용하고, Boot 버전은 3점 대를 사용하기로 한다.
필요한 것을 체크하고 생성을 시킨다. JPA 이기 때문에 Lombok, JPA 는 필수이다.
Thymeleaf는 꼭 필요하지 않지만 Vue와 무관하게 자체 테스트를 위해서 추가하겠다.
(Spring Security는 나중에 추가하겠다)
2. 프로젝트 생성 후, application.properties 파일을 .yml 파일로 변경하고 아래와 같이 추가한다.
마리아 DB 서버는 별도로 다운로드 받아서 설치를 했고 스키마를 test , ID/PW를 root/root로 만들었다.
server:
port: 8081
spring:
jackson:
property-naming-strategy: SNAKE_CASE
jpa:
hibernate:
ddl-auto: update
show-sql: true
generate-ddl: false
defer-datasource-initialization: true
datasource:
driver-class-name: org.mariadb.jdbc.Driver
url: jdbc:mariadb://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&serverTimezone=Asia/Seoul
username: root
password: root3. 메세지 처리 및 로그를 처리하기 위해서 기본 세팅을 한다.
일단 다국어를 배제하고 기본 메세지를 가져오도록 세팅한다.
resource 폴더 아래에 messages.properties 파일과 logback.xml 파일을 추가한다.
그리고 아래와 같이 각각 작성한다.
common.homeWelcome = 환영합니다.<?xml version="1.0" encoding="UTF-8"?>
<configuration scan="true" scanPeriod="10 seconds">
<appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
<encoder>
<Pattern>%green(%d{yyyy-MM-dd HH:mm:ss.SSS}) %magenta([%thread]) %highlight(%5level) %cyan(%logger) - %yellow(%msg%n)</Pattern>
</encoder>
</appender>
<appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
<file>C:/temp/access.log</file>
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
<fileNamePattern>C:/temp/access-%d{yyyy-MM-dd}.log</fileNamePattern>
<maxHistory>50</maxHistory>
</rollingPolicy>
<encoder>
<Pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %5level %logger - %msg%n</Pattern>
</encoder>
</appender>
<logger name="com.example.vueJpaProject" level="debug"/>
<logger name="org.mybatis.spring.mapper" level="debug" additivity="false" />
<logger name="jdbc.sqlonly" level="debug" additivity="false" />
<logger name="jdbc.audit" level="debug" additivity="false" />
<logger name="jdbc.resultset" level="debug" additivity="false" />
<root level="info">
<appender-ref ref="CONSOLE"/>
<appender-ref ref="FILE"/>
</root>
</configuration>logback에서 최상위 로그레벨은 info로 가져가고 자체 패키지는 debug로 가져갔다.
4. Thymeleaf 를 이용하여 값이 잘 찍히는 지 확인을 하기 위하여 컨트롤러와 html 파일을 생성한다.
기본패키지 아래에 controller 패키지를 추가하고 HomeController 클래스를 추가한 뒤에 아래와 같이 생성한다.
@Controller
public class HomeController {
@GetMapping("/")
public String home(Locale locale, Model model) {
LocalDateTime now = LocalDateTime.now();
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy년 M월 d일 (E) a h시 m분 s초");
String formatterNow = now.format(formatter);
model.addAttribute("serverTime", formatterNow);
return "home";
}
}resources\template\ 폴더 아래에 home.html 파일을 생성하고 아래와 같이 수정한다.
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}"/>
</head>
<body>
<h2 th:text="#{common.homeWelcome}"></h2>
<p th:text="${serverTime}">시간 표시</p>
</body>
</html>이렇게 하고 서버를 기동한 뒤에 http://localhost:8081 로 접속을 하자
서버가 정상적으로 기동이 되고 이미지 처럼 보인다면 잘 된 것이다.
'프로그램 > Vue.js' 카테고리의 다른 글
| vue + jpa project (6) - Vue 게시판 목록화면 생성 (0) | 2023.10.24 |
|---|---|
| vue + jpa project (5) - Vue 레이아웃 정의 (0) | 2023.10.24 |
| vue + jpa project (4) - Vue 프로젝트 초기 생성 및 홈화면 기능 (0) | 2023.10.24 |
| vue + jpa project (3) - 프론트 개발환경 구성 (0) | 2023.10.24 |
| vue + jpa project (1) - JPA Project 진행 전 계획 (0) | 2023.10.23 |
프로그램/Vue.js Related Articles
-
vue + jpa project (5) - Vue 레이아웃 정의
-
vue + jpa project (4) - Vue 프로젝트 초기 생성 및 홈화면 기능
-
vue + jpa project (3) - 프론트 개발환경 구성
- vue + jpa project (1) - JPA Project 진행 전 계획
RECENT COMMENT