프로젝트

프로젝트 기본 환경설정 - 1

gitofjy 2023. 1. 18. 14:04

1) 스프링부트 스타터 프로젝트 생성

2) mysql 연동

3) bootstrap 템플릿 적용하기

 

스프링부트 스타터 프로젝트 생성하기

 

[스프링부트/웹 애플리케이션 개발]스프링부트스타터 프로젝트 생성, 스프링부트버전확인, lombok

1. 프로젝트 생성 스프링 부트 스타터(https://start.spring.io/) - dependencies > spring web > thymeleaf > spring data JPA > H2 Database > Lombok > Validation 2. 스프링부트 버전 확인 - build.gradle 에서 확인 가능 3. run > 오류

gitofjy.tistory.com

 

 

 

 

 

mysql 연동

1. sampledb 생성

C:\Users\USER>mysql -u root -p
Enter password: ****
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 41
Server version: 8.0.31 MySQL Community Server - GPL

Copyright (c) 2000, 2022, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> create database sampledb;
Query OK, 1 row affected (0.01 sec)

mysql> grant all privileges on sampledb.* to 'root'@'localhost';
Query OK, 0 rows affected (0.01 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| connectdb          |
| information_schema |
| mysql              |
| performance_schema |
| sakila             |
| sampledb           |
| sys                |
| world              |
+--------------------+
8 rows in set (0.00 sec)

- mysql -u root -p

- 패스워드 입력

- create database sampledb; (생성)
- grant all privileges on sampledb.* to 'root'@'localhost'; (권한부여)

- show databases; (확인)

 

 

 

2. buil.gradle 의존성 추가

dependencies {
	implementation 'mysql:mysql-connector-java'
}

 

 

 

3. application.properties db 정보 추가

# MySQL 설정
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver 

# DB Source URL
spring.datasource.url=jdbc:mysql://<IP>:<Port/<DB>?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul 

# DB username
spring.datasource.username=<username> 

# DB password
spring.datasource.password=<password> 

# true 설정시 JPA 쿼리문 확인 가능
spring.jpa.show-sql=true 

# DDL(create, alter, drop) 정의시 DB의 고유 기능을 사용할 수 있다.
spring.jpa.hibernate.ddl-auto=update 

# JPA의 구현체인 Hibernate가 동작하면서 발생한 SQL의 가독성을 높여준다.
spring.jpa.properties.hibernate.format_sql=true
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/sampledb?useSSL=false&useUnicode=true&serverTimezone=Asia/Seoul 

spring.datasource.username=root
spring.datasource.password=1234

spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.format_sql=true

 

 

 

4. 연결확인

package recordmyfashion.recordmyfashion;
import org.springframework.data.annotation.Id;
import javax.persistence.*;

@Table(name = "table_demo")
@Entity
public class Demo {
    @javax.persistence.Id
    @GeneratedValue(strategy = GenerationType.SEQUENCE)
    @Column(name = "demo", nullable = false)
    private Long demo;

    @Id
    @GeneratedValue
    private Long id;

    private String demoText;

    public Long getDemo() {
        return demo;
    }

    public void setDemo(Long demo) {
        this.demo = demo;
    }

}

 

 

 

 

 

부트스트랩 적용

0. 연결확인 - testController, test.html 확인

package recordmyfashion.recordmyfashion;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class testController {

    @GetMapping("/")
    public String test() {
        return "test";
    }

}

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
    <div>
        <h1>Hello Spring</h1>
        <p>test입니다</p>
    </div>
</div> <!-- /container -->
</body>
</html>

1. 다운로드

( https://startbootstrap.com/template/shop-homepage )

 

 

 

2. 압축 풀고 static, templates 폴더에 넣기

 

 

 

기본 폴더 > static 안에 넣기

index.html > templates 안에 넣기

 

 

 

 

 

 

 

 

 

3. testController 코드 수정 후 실행 > 실행되는데 CSS 깨짐

@Controller
public class testController {

    @GetMapping("/")
    public String test() {
        return "index";
    }

}

 

 

 

4. index.html에서 경로 수정

//수정 전
<head>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Shop Homepage - Start Bootstrap Template</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Bootstrap icons-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
</head>
//수정 후
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Shop Homepage - Start Bootstrap Template</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" href="bootstrap/assets/favicon.ico" />
    <!-- Bootstrap icons-->
    <link href="bootstrap/font/bootstrap-icons.css" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="bootstrap/css/styles.css" rel="stylesheet" />
</head>

 

 

 

 

 

 

 

 

 

 

참고

db 연동 참고 : https://velog.io/@sians0209/Spring-Spring-gradle-MySQL-JPA-%EC%97%B0%EB%8F%99

부트스트랩 참고 : https://dev-jwblog.tistory.com/33

728x90
저작자표시 비영리 변경금지 (새창열림)