[웹 2팀] 4. mysql - spring boot 연동 및 오류 모음

마지막 블로그 글에는 mysql - spring boot의 데이터를 연동하는 방법과 프로젝트를 진행하면서 발생했던 오류들의 해결 방법에 대해 적어보도록 하겠습니다.
해당 연동 과정은 https://www.youtube.com/watch?v=k5KnAhkRzh4&list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr&index=3를 참고하였습니다.

1. mysql - spring boot 연동 방법

1) mysql connector dependency 추가

Spring Initializer로 프로젝트를 만들 예정이면 처음에 만들 때 의존성 중 mysql connector을 추가해 주면 됩니다. 본래 있는 프로젝트에 의존성을 추가할 경우에는, build.gradle에 해당 의존성을 추가해 줍니다. (필자는 gradle을 사용하였습니다.)
gradle은 아래 의존성을 dependency에 추가해 주면 됩니다.

runtimeOnly 'mysql:mysql-connector-java'

gradle에 의존성을 추가하는 명령어는 위의 runtimeOnly 외에도 Implementation, compile, developmentOnly 등 여러 종류가 있는데,
gradle 공식 문서를 참고하길 바랍니다.
gradle공식문서

2) application.properties 수정

application.properties는 코드 내에 정보를 넣어놓지 않고 외부 설정 파일을 이용해 정보를 주입시키는 방식입니다. 그래서 스프링의 빈(Bean)과 마찬가지로 코드를 변경하지 않고 정보를 수정한다는 장점을 가지고 있습니다.
여기에 db가 위치한 url, db 유저명, 패스워드 등 관련 정보를 기록해 줍니다.

spring.datasource.url=jdbc:mysql://호스트명:포트 번호/스키마명?useSSL=false

spring.datasource.username=(해당 db의 유저 이름)
spring.datasource.password=(해당 db의 패스워드)

spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.hibernate.ddl-auto = update

오류 1. url 문제

spring.datasource.url=jdbc:mysql://호스트명:포트 번호/스키마명?useSSL=false&serverTimezone=UTC&characterEncoding=UTF-8

만약 저 코드만으로 되지 않았으면 서버타임존과 인코딩 설정이 되어 있지 않을 수 있기 때문에 이 url 링크를 넣으면 됩니다. 만약 저 조건들이 자동으로 지정되지 않았을 경우 오류 2를 참고합니다.
hibernate 공식 문서
여기서 jpa.hibernate는 스프링에 내장되어 있는 db access 기능을 가진 jpa의 추가 기능을 사용할 것이라는 의미입니다.
이 jpa는 보통 hibernate라는 구현체를 사용하기 때문에 jpa.hibernate.필요 조건이라는 형태로 명령어를 작성합니다.
org.hibernate.dialect.MySQL5InnoDBDialect는 InnoDB 스토리지 엔진을 사용한다는 의미이고,
ddl-auto 옵션은 데이터베이스에 구조를 생성하는 DDL을 처리하는 옵션을 지정하는 것입니다.

++DDL은 데이터 구조를 정의하는 데 사용하는 명령어들로 생성, 변경, 삭제와 같은 SQL문의 종류 중 하나입니다.
++필자는 사용하지 않았지만 spring.jpa.show-sql=true라는 구문은 프로그램을 실행할 때 동작하는 SQL문의 로그를 보여주기 때문에 적용하면 좋을 듯 합니다.

3) spring boot에서 해당 database를 이용한 data source 생성

아래 사진처럼 인텔리제이 페이지의 오른쪽 database 창을 누른 뒤, "+" 버튼을 눌러 mysql db를 추가해 줍니다.



호스트명과 유저명, 비밀번호를 입력하고 test connection을 눌러 연결이 잘 되는지 확인합니다.



그림과 같이 창이 뜨면 잘 연결되었다는 의미입니다.

오류 2 - db 옵션 자동 설정 실패

필자는 이 경우에 serverTimeZone이 설정되지 않았다는 오류가 떴습니다. 1-2에서 보면 설정에 serverTimeZone 설정을 추가해 주었지만, 이 db에 자동으로 적용되지 않았기 때문에 이 때는 수동으로 입력해 줘야 합니다.
Advanced 창에서 조건을 찾아서 수동으로 입력한 뒤, 다시 test connection test를 해 봅니다.



위 설정들을 적용하면 database 창에 mysql의 스키마가 적용된 것을 볼 수 있을 것입니다.

4) Entity와 Repository 생성 및 Controller 코드 작성

데이터를 담아 데이터베이스를 표현하는 하나의 객체를 만들기 위해 db객체명.class 파일을 만들어서 데이터를 가져와 저장하는 파일을 만듭니다.
그리고 repository를 설정해 검색 메소드를 미리 설정해서 인터페이스 호출만으로 데이터 검색을 할 수 있도록 설정해 줍니다.
마지막으로 데이터를 웹페이지에 가져와 실질적으로 운용하는 controller페이지를 만들어야 하는데, 이 게시글에서는 데이터가 잘 전송되었는지 확인하는 목적만 있기 때문에 list controller만 만들었습니다.
해당 게시글은 연동과 그에 대한 오류를 주 목적으로 서술했기 때문에 코드 작성에 관련해서는 링크를 첨부해 두겠습니다.
jpa entity와 repository 작성
List controller 작성

5) postman 사이트로 연결 여부 점검

컨트롤러를 작성한 이후, postman사이트에 가입을 한 후, 개인 workspace에 접속해서 create request 버튼을 눌러줍니다.



그리고 list형식으로 db에 저장된 데이터들을 보여주는 역할만 한다면 get 메소드 형식을 설정하고 해당 controller이 실행되는 url 주소를 입력하고 send 버튼을 눌러줍니다.



정상적으로 잘 연결되었다면 아래쪽 로그에서 컬럼값과 데이터값이 뜰 것입니다.

6) 실제 링크를 연결해서 사이트 상에서 확인

해당 url을 복사해서 접속해 보면 postman에서 나온 데이터와 같은 값이 도출된 것을 알 수 있습니다.

오류 3

이 조건들을 만족했는데 연결이 되지 않는다고 하면 mysql 서버와 spring boot를 껐다가 켜보는 것도 하나의 방법입니다. 명확한 이유는 잘 모르겠지만..컴퓨터 자체의 환경이나 서버상에서 뭔가 에러가 났기 때문이라고 생각합니다.

2. 그 외 다른 오류들

1) jsp가 서버를 킬 때 자동으로 작동되지 않는 현상

에러 로그는 다음과 같습니다.

javax.servlet.ServletException: Circular view path [project]: would dispatch back to the current handler URL [/project] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)

위와 같은 오류가 났을 때는 우선 아래의 2가지 dependency가 있는지 확인해야 합니다.

compile('org.apache.tomcat.embed:tomcat-embed-jasper')
compile('javax.servlet:jstl:1.2')

확인하고 없는 경우에는 추가하고 gradle refresh를 해줍니다.

그리고 application.properties에 jsp파일 위치를 적용합니다. 필자는 /WEB-INF/views/에 위치하였므로 다음과 같이 써주면 됩니다.

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

2) Entity 설정 이후 db table과 연결되지 않았을 때

해당 오류가 났을 때 빨간 전구를 클릭하면 아래와 같은 창이 뜨고, 여기서 Assign data source를 클릭합니다.



그리고 해당 프로젝트에 연결되어있는 db를 클릭하고 확인하면 자동으로 설정되는 것을 알 수 있습니다.

+a) react로 full-calendar 만들기

우선 리액트를 설치한 뒤 fullcalendar 모듈을 설치해 줍니다.

npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

https://uhou.tistory.com/149?category=834080 그리고 다음 방법은 해당 링크를 참조했습니다. 이 방법은 컴포넌트로 분리하지 않고 한 파일에서 작업했기 때문에 필요하다면 .jsx 파일로 분리해서 작업한 뒤 해당 컴포넌트를 불러오면 됩니다.

+++ 해당 파일의 이벤트 데이터를 바꾸고 싶다면 객체를 하나 더 추가해 배열 형태로 데이터를 받아 처리하는 방법을 쓰면 됩니다.
자세한 코드는 깃허브에 올려두었습니다.(링크 추가 예정)

참조 사이트
https://codevang.tistory.com/243
https://memories95.tistory.com/135
https://joshua1988.github.io/web-development/http-part1/
https://zorba91.tistory.com/entry/javaxservletServletException-Circular-view-path-project-would-dispatch-back-to-the-current-handler-URL-project-again-Check-your-ViewResolver-setup-Hint-This-may-be-the-result-of-an-unspecified-view-due-to-default-view-name-generation-에러-해결