Vue.js

[Vue.js] Spring Boot 게시판 만들기 (2) - Spring Boot, Vue 프로젝트 생성 & 포트 번호 변경

DEV_HEO 2023. 3. 23. 13:13
320x100

1. Spring Boot 프로젝트 생성

STS프로그램을 사용하고, 빌드도구는 Gradle과 Maven중 Gradle로 진행했다.

프로젝트 생성

Spring Starter project로 프로젝트를 하나 생성한다.

dependency는 대충 Lombok, SpringBootDevTools, SpringWeb, MariaDB Driver 정도 체크하고 Finish를 눌러준다.

나중에 build.gradle 파일에서 추가할 수 있다.

 

application.yml

server:
  port: 8081

spring:
  datasource:
    driver-class-name: org.mariadb.jdbc.Driver
    url: jdbc:mariadb://localhost:3306/vue_test_db?characterEncoding=UTF-8&serverTimezone=Asia/Seoul 
    username: vue_test
    password: 1234
  jpa:
    hibernate:
      ddl-auto: update   # 프로젝트 실행시 자동으로 DDL(create, alter, drop) 을 생성할 것 인지 결정하는 설정 # create : 매번 테이블 생성을 새로 시도한다 / update : 변경이 필요한 경우 alter로 변경되고 테이블이 없는경우 create가 된다
    properties:
      hibernate:
        show_sql: false   # 콘솔에 표시
        format_sql: true  # 쿼리 들여쓰기 등 포맷에 맞춰 표출
        use_sql_comments: true # 주석 표시
    database-platform: org.hibernate.dialect.MariaDBDialect # MariaDB 상세 지정

프로젝트 설정 파일은 기존에 진행중인 개인프로젝트에서 가져왔다.

port 번호는 서버를 여러개 가동시키기 위해 변경해주었다.

 

url에는 저번 포스팅에서 생성한 데이터베이스 url을 적어주고

설정한 username, password를 입력해준다.

 

url에 ? 뒤에 붙은 값들은 개인프로젝트에서 붙여준 옵션들이다.

- useSSL

- characterEncoding

- serverTimezone

build.gradle

 

프로젝트 생성할 때 체크하지 못한 dependency는 build.gradle에서 추가하면 된다.

dependencies {
	// JPA
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
}

dependencies에

JPA 관련내용을 추가해준다.

 

 

패키지 구성

패키지 구성은 마찬가지로 기존에 진행중인 개인프로젝트의 패키지 그대로 구성했다.

 

 

Board VO 생성

package com.vue.test.entity;

import java.sql.Timestamp;
import org.springframework.data.jpa.domain.support.AuditingEntityListener;
import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.EntityListeners;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.AccessLevel;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.SuperBuilder;

@ToString
@Getter
@SuperBuilder
@AllArgsConstructor
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@EntityListeners(AuditingEntityListener.class)
@Entity(name="Board")
public class Board {

	@Id @GeneratedValue(strategy = GenerationType.IDENTITY)	//AUTO_INCREMEMT
	private int bno;

	@Column
	private String title;

	@Column
	private String content;

	@Column
	private String writer;

	@Column(columnDefinition = "TIMESTAMP DEFAULT CURRENT_TIMESTAMP")
	private Timestamp regDate;
}

bno를 @Id 어노테이션으로 primary key로 지정해줬고,

stratgey = GenerationType.IDENTIFY 로 자동 증가 옵션을 지정해줬다.

 

regDate의 데이터 타입은 Timestamp로 columnDefinition옵션으로 default 값은 현재 시간으로 해줬다.

 

 

 

 Board 클래스를 생성하고 

서버를 키면 Entity로 인식되기 때문에 자동으로 테이블이 생성된다.

 

 

 

 

어노테이션 옵션값을 지정한 대로 테이블과 컬럼이 생성됨

 

 

 

Member Entity 생성

import java.sql.Date;

import org.springframework.data.jpa.domain.support.AuditingEntityListener;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.EntityListeners;
import jakarta.persistence.Id;
import lombok.AccessLevel;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.SuperBuilder;

@ToString
@Getter
@SuperBuilder
@AllArgsConstructor
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@EntityListeners(AuditingEntityListener.class)
@Entity(name="Member")
public class Member {

	@Id
	private String id;

	@Column(nullable = false)
	private String password;

	@Column(nullable = false)
	private String name;

	@Column(nullable = false)
	private Date dateOfBirth;

	@Column(nullable = false)
	private String email;

	@Column(nullable = false)
	private String phoneNumber;

}

 

 

 

 

 

 

2. Vue 프로젝트 생성

 

프로젝트 생성은 간단하다.

 

https://dreamcoding.tistory.com/30

참고

> npm install -g @vue/cli
> vue create vue-test-front

vue create vue-test --packageManager npm

: 패키지 관리자 npm으로 프로젝트 생성하기

 

> cd vue-test-front
> yarn run serve

서버 킬 때 npm 보다 yarn 이 속도가 더 빠른 듯 하다.

 

 

3. 포트 번호 변경

 

(1) Spring Boot 포트 변경 -> application.yml

server:

    port: 포트번호

 

(2) vue 포트 변경 -> package.json

"serve": "vue-cli-service serve --port 포트번호"

 

320x100