MongoDB 와 Front-End 연결

1. 우선 mongoDB를 연결하 도록 하자.

gradle dependency 에 mongoDB driver 추가

=> implementation('org.springframework.boot:spring-boot-starter-data-mongodb')

 

여기서, com.mongodb.MongoSocketOpenException: Exception opening socket 이슈로 몽고 디비와 연결이 안되었다.

찾아보니 로컬머신에서 아예 몽고디비가 구동이 실패 하고 있었다. (어제는 잘 됬는데...?)

 mongod 실행시에 발생 하는 오류는 다음과 같았다.

=> exception in initAndListen: NonExistentPath: Data directory /data/db not found., terminating 

data/db 폴더가 없어서 구동이 중지 되었는데, 어제는 임시 패스에 저장을 했어서 됬던것 같다.

 

/usr/local/etc/mongod.conf 에 가 보니 dbPath 가 아래와 같이 설정이 되어 있었다.

dbPath 를 변경해 주고

brew services start mongodb 로 재실행 하였더니 정상 동작 하였다.

 

2. mongoDB 와 클라이언트 데이터 연결

데이터를 연결하기 위해서 MongoRepository 사용 하였다. 원래 실무에서는 template 형태로 많이 했었는데, 이번에는 다른 구조를 써볼겸 사용해 보도록 하겠다.

 

여기서 domain 구성시에 lombok 이라는 유용한 라이브러리가 있어서 사용 하였다. (그런데... 잘 적용이 안되어서 그냥 getter, setter 만듬..)

참고 : https://lee-mandu.tistory.com/369

#번외_[spring boot] gradle Lombok 설치 (setter, getter 간소화)

3. thymeleaf 를 사용 하여 db 값을 html 에 뿌리기

=> thymeleaf 사용할때 controller 부분에서 @Controller 하면 templates 아래 위치하고 @RestController 경우는 static 아래에 위치한다.

 

아래같이 controller 및 html 구성하여 원하는 값을 출력 할 수 있었다.

 

 

결과

4. 이제 DB 에서 값을 가져와서 뿌려 보도록 하자.

controller 아래와 같이구성한뒤

html은 다음과 같이 작성한다.

결과는 다음과 같다.

 

자 이제!

기본은 모두 연결 되었으니. 본격적으로 Chart.js 를 이용해서 데모프로젝트를 완성 하도록 하자.