20230831 _[64일차]_01. 웹크롤링 & thymeleaf 마무리 & H2 Database & JPA

웹 크롤링 보여주신다고 한다. 

 

[ aug30 ]

 

jsoup 

아래에서 코드 가져와서 의존성 추가

https://mvnrepository.com/artifact/org.jsoup/jsoup
implementation 'org.jsoup:jsoup:1.15.3'

 

가장 로직이 없는 IndexController 에다가 로직 만들어준다. 클리앙 사이트의 소모임 카테고리들을 불러올거다.

jsoup 라이브러리의 Document 객체 사용

아래 주소의 웹페이지의 HTML구조를 가지고와서 Document 에 담아준다.

예외 throw 처리 던져준다

 

Document 에서 클래스가 somoim인 element들만 뽑아내서 somoim이라는 변수에 넣어준다.

somoim 의 element들의 텍스트를 반복문으로 뽑아낸다.

아래처럼 불러와진다.

 

text로 뽑아낸 값들을 list에 담아서 clien.html 페이지에 한번 찍어보자

model에 붙여서 브라우저에 띄울거다.

아래처럼 불러올 수 있다.

아래의 thymeleaf 태그는 선언문 없이도 작동이 된다. <th: ~> 는 선언필요

 

무서우니까 여기까지만 불러오자.

---

오늘 배울내용

- JPA 사용예정 (쿼리문없다) & h2_db 설치없이 &  tymeleaf 페이징  

- vue 까지 다 배우면 수업 끝!

 

---

로그인 마저 완성하자.

 name은 result에서 id 는 dto에서 가져와서 session에 넣어준다.

board.html 페이지에 session에서 가져온 mname을 출력해준다.

로그인 했을때만 board페이지에서 name님 반갑습니다가 출력되게 해줄 예정

menu.html에 로그아웃 메뉴 추가해준다.

 

일단 메뉴바에서 로그인과 로그아웃을 하나만 보이게 조건문을 걸어줄건데

 <th:block> 을 사용해도 되고

li태그 내부에 if문을 넣어줘도 된다.

mname값이 있는지 여부에 따라 로그인/로그아웃이 보이도록 해준다.

 

로그아웃 로직도 만들어줬다.

---

이제 페이징 처리 해보자.

BoardController에서 pageNo를 잡아온다

아래 캡쳐에 int bno가 아니라 int pageNo로 해야한다. 잘못씀

 

pageNo 를 (pageNo - 1) * 10 으로 해줄건데 

만약 지금 1페이지라면 => (1-1) * 10 이 되어서 0부터 10개를 가져오고

2페이지라면 => (2-1) * 10 이 되어서 10부터 10개를 가져오게 되는거다.

list 메소드의 매개변수로 이 pagNo를 가져갈 수 있도록 해준다.

 

mapper에서도 쿼리문 수정

LIMIT 0, 10  =>  LIMIT #{pageNo}, 10  으로 수정해준다.

위에서는 페이지 계산을 컨트롤러에서 해줬지만 

아래처럼 계산식을 서비스에서 처리해줘도 되고

계산식을 아예 따로 빼서 변수에 넣어주고 변수만 사용해줘도 된다.

 

아래처럼 주소창에 pageNo를 넣어줘보면

 

2페이지의 글 10개를 잘 불러온다.

4페이지의 글 10개도 불러옴

defalt 값을 1로 설정해줬기 때문에 아래처럼 넣으면 pageNo=1로 처리되어 첫번째 페이지가 나온다.

---

이제 board.html 에 페이지 번호를 띄울거다.

 

thymeleaf 문법 사용해서 반복문으로 1p ~ 10p 찍을거다.

table 아래쪽에 페이지 번호 추가해줬다. 그런데 아래처럼 출력했더니

오잉

 

아래처럼 넣어줘야 한다.

 

<th:block th:each="i : ${#numbers.sequence(1,10)}" >

Thymeleaf에서 제공하는 내장 표현식 중 하나로 숫자의 시퀀스(연속된 숫자들의 집합)를 생성하는 데 사용된다.

1부터 10까지의 연속된 숫자들로 이루어진 시퀀스를 생성하고 그걸 th: each를 사용해서 [ [ $ { i } ] ] 로 하나씩 출력한거다.

 

이제 클릭하면 페이지 이동하는 기능을 넣어주자

Thymeleaf 의 onclick 기능 사용

 

그런데 아래처럼 넣어주면

 

요렇게 들어간다.

파이프를 이용해서 전체를 하나의 문자열로 인식할 수 있도록 해주고

@표시 추가 & board의 매개변수 형태로 pageNo를 가지고 이동할 수 있도록 해준다.

그럼 이제 pageNo를 잘 잡아서 해당 페이지로 잘 이동한다.

---

detail.html에서 내용이 출력되는 부분의 괄호를 

[[  ]] 에서 [(  )] 로 바꿔줬다. (태그 없이 문자열만 출력되도록)

---

[ H2 Database ] 사용해보자

 

새로운 프로젝트를 생성한다.

aug31_h2 생성하고 아래에서 H2 Database를 추가해준다. maria db 대신 이걸 사용해보는거다.

위에서 추가 안해준건 gradle에서 추가해주면 된다.

데이터베이스만 바꿔준거다.

아래의 코드가 데이터베이스가 없어도 있는것처럼 가상의 데이터베이스 역할을 해주는거다.

 

 

application.properties 에서도 설정추가

mybatis.type-aliases-package=com.phyho.web 으로 수정해줌.

 

포트설정하고 h2설정도 해준다.

 

# H2 base db
spring.h2.console.enabled=true             콘솔쓸거다
spring.h2.console.path=/h2-console      경로설정

spring.datasource.url=jdbc:h2:mem:~/memory

mem에 설치할거고 memory는 데이터베이스 이름(db명)이다 (mem 에다가 실행할거라는 의미)

spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.datasource.hikari.maximum-pool-size=4

 

hikari한테 db connection pool을 최대 4개까지 잡으라고 설정해준거다 (현업에서 필요)

HikariCP라는 데이터베이스 연결 풀 라이브러리를 Spring 애플리케이션에서 사용할 때, 최대 동시 연결 수를 4개로 제한하겠다는 의미. 즉, 동시에 최대 4개의 데이터베이스 연결만 허용하도록 연결 풀이 설정될 것.

---

YAML (Yet Another Markup Language)

Xml, Json 보다 가시성이 좋다.

 

yaml 파일 작성 요령 (기초편, 스프링편) (velog.io)

yaml 파일 작성 요령 (기초편, 스프링편)

---

aug31_h2 프젝을 실행시키고 아래의 주소로 들어가서

설정해준대로 url주소를 넣어주고 Connect 눌러준다.

User Name / Password 는 생략가능

연결되면 아래의 H2 Console에 접속이 된다.

아래처럼 쿼리문 작성해주고

 

Run을 누르면 board테이블 생성

데이터도 넣어준다.

위의 화면에서 Clear -> BOARD -> Run 순서로 누르면

아래 명령문이 자동으로 뜨면서 테이블에 들어있는 데이터를 확인할 수 있다.

연결이 끊어지면 다시 없어진다....휘발성 메모리란다. 그래서 테스트목적으로 많이 사용한다.

---

SQL 파일 생성해보자.

 

 

요렇게 sql문 작성할 수 있는 파일이다.

테이블 생성 쿼리문 작성해주고 

bno에는 IDENTITY랑 기본키 설정해준다.

        (AUTO_INCREMENT)

하나더 생성해서 

데이터들을 넣어준다.

그런데 table 생성할때 세미콜론을 빼먹었다고 실행이 안된다. 어이없다

board라는 테이블이 있다면 DROP해라 

 

 

이제 컨트롤러패키지 & BoardController 만들어주고 서비스랑 연결

서비스 생성 & DAO랑 연결

DAO 생성

 

컨트롤러에서는 Map 타입의 list에 담아올거고 

 

Model에 붙여서 화면에 띄우자.

서비스와 DAO에도 list 메소드 생성해준다.

 

지금까지는 static 폴더 아래에 mapper를 만들어 줬는데 꼭 정해진건 아니다.

resources아래에 static과 별개로 mapper폴더를 만들어준다.

 

mapper 폴더 아래에 xml 파일 생성

 

 

mapper에서 board의 데이터를 불러오는 쿼리문 작성해준다.

namespace 설정 제대로 해줘야한다 *주의*

불러온 데이터를 board.html에 출력해보면 잘 뜬다.

---

[스프링부트 (12)] SpringBoot 에러 페이지 설정(Custom Error Page) (tistory.com)

[스프링부트 (12)] SpringBoot 에러 페이지 설정(Custom Error Page)

---

[ JPA ]

 

이제 mybatis를 들어내고 jpa를 써보자. 함께할수는 없다.

다시 JPA용 프로젝트 aug31_JPA 를 만든다. (Java 버전 주의)

필요한 Dependencies 여기에서 추가해주는게 편하다.

 

application.properties 에 설정도 지금까지랑 똑같이 해주는데

JPA를 사용할거니 mybatis 부분만 빼주면 된다.

이제 h2 설정하러 가보자

---

https://www.h2database.com/html/main.html

H2 Database Engine

 

---

 

아까는 내장되어 있던걸 사용한건데 이제 다운로드 받아보자

다운로드 받은 파일 압축만 풀어준다.

 

cmd에서 명령어로 실행시켰다.

다운로드 받은 폴더까지 가서 C:\Users\user\Downloads\h2\bin

h2w.bat (window용)을 실행시키면 바로 브라우저가 뜬다.

 

URL 수정해준다. db이름은 choongang으로 해줬다.

연결해주면 ~ 위치에 생성해주는거다.

생성완료

 

~ 물결 표시는 아래의 위치를 의미한다.

cmd에서도 생성된거 확인가능

폴더에서 들어가봐도 생성된거 확인가능

application.properties 에서도 이름 맞춰준다.

이건 파일을 다운받아서 연결해준거라 서버를 끊어도 유지가 된다.

 

JPA  (pdf 참고)

➔ 쿼리 문을 만들 필요가 없다.

➔ 데이터베이스에 미리 테이블을 만들 필요가 없다. (자동생성 가능)

➔ 데이터베이스가 변경되어도 그대로 사용할 수 있다.

 

방언 설정 : JPA 가 직접 실행하기 때문에 DBMS별 SQL문법이 달라 각각 맞게 사용해야 함.

방언설정 해주면 각각 H2, oracle 등등 용도에 맞춰서 sql 문법을 바꿔준다.

이걸 쓰면 쿼리문을 몰라도 되겠지만 그래도 알고는 있어야 하니까 먼저 배웠다고 한다.

 

위의 ddl (data definition language) 이걸 뜻한다.

 

지금까지는 db의 컬럼에 따라 DTO를 만들어줬는데 이제 주체가 바뀐다.

DTO를 기준으로 db를 만들거다.

@Entity 선언을 해주면 이걸 기준으로 데이터베이스를 만들어주는거다.

이제 이 DTO 역할을 할 클래스인 Member.java 클래스 생성

변수들 선언해준다.

 

ID로 pk 설정을 해준거고 

IDENTITY 는 AUTO_INCREMENT 설정해준거다.

@Column (속성의 세부설정시 사용)

mname은 길이지정 해주고

mid라는 컬럼명(db) 지정해주고 서버에서는 id라는 변수로 사용할 예정.

근데 헷갈리니까 걍 컬럼명과 변수명 모두 mid 로 통일한다. unique 키설정도 해준다.

mpw는 그냥 @Column만 선언해줘도 된다.

@Column 이 없으면 그냥 db랑 똑같이 설정해주겠다는 의미다

테이블 이름도 넣어준다.

db명은 test로 해서 돌려보자

url 맞춰서 실행해보면

방언부분에 공백있어서 실행이 안됐었다..세상에나 

잘 실행된다.

Members 클릭하고 run실행해서 테이블 만든다.

 

이제 컨트롤러 만들자

서비스없이 아래처럼 생성

 

 

Member랑 연결해주고

list의 타입을 Member 객체로 지정하고 memberRepository에 findAll() 메소드 실행.

 

Model에 붙여서 내보낸다.

members.html 생성해서 오류안나는지 테스트해본다. 아직 데이터는 안넣어서 뜨는건 없다.

 

member 테이블에 데이터를 넣는다 (mid, mname, mpw, mjoindate)

이제 브라우저에서 넣어준 데이터들을 잘 출력한다.

 

---

[Spring] Spring Data JPA 기본 사용법 ( JpaRepository ) (tistory.com)

[Spring] Spring Data JPA 기본 사용법 ( JpaRepository )

JAP 메소드들은 외워두는게 편하다.

 

 

 

save() 메소드 추가해준다.

 

 

다시 실행하면 오류가 나는데 id를 unique 키로 설정해줬기 때문이다.

 

 

application에서 create => none으로 수정해준다.

서버모드로 h2 실행해본다.

 

연결 이렇게 저렇게 했었는데 줌녹화본 다시보기

일단 꺼줬다.

---

다시 mariadb로 넘어간다.

바뀐 포트번호 주의 ** 아이디 비번 입력하고 필요없는건 주석처리 해준다.

gradle에서 h2는 주석처리 하고 mariadb 넣어준다.

Member.java에서 변수명을 다시 하이디랑 맞춰준다.

 

컨트롤러에서도 안쓰는 부분은 주석처리 해두고

이제 members 페이지를 확인해보면 mariadb의 데이터를 불러와 html에서 list로 출력한 값이 잘 뜬다.

 

repository에서 findTop5를 

언더바 빼준다

왜냐하면 아래 메소드를 쓸때 언더바가 있으면 작동을 안한다.

그런데 하이디에서 m_no 를 mno로 수정하려 했더니 안된다.

다시 member.java에서 jmember 테이블을 만들어줬다.

 

일단 방언설정 mariadb로 바꿔주고 

쌤은 create로 해줬는데 다행히 기존 데이터가 날라가진 않았다. 

다 날아가면 아까우니 난 update로 해준다.

실행시켜보면 jmember 테이블이 생겼다.

create는 기존의 데이터를 싹 날려버린다. 

 

일단 JBoard.java 만든다.

변수들 선언한다.

아래처럼 변수들에 추가 설정들 지정해준다. 

jpa log 추가해줘야한다.

jboard도 생성된다.

 

write.html 생성

BoardController 생성하고 글쓰기 로직 만들자

그런데 request가 아니라 Jboard에 담아줄거다.

노랑은 db랑 이름 맞춰준거고 초록색 변수를 사용하면 된다.

 

write 페이지에서 값들을 입력하고 버튼을 누르면

 

html의 form이 제출되면서 Jboard에 들어간 값을 잘 가져온다

 

원래는 주소값이 찍혀야 하는건데 lombok이 알아서 변환해서 보여주는 거다.

 

BoardRepository 생성하고

JBoard하고 연결해준다.

 

JBoard랑 연결해주고 이름넣어준다.

save() 메소드 생성 매개변수로는 jboard값을 가져간다.

 

테스트 해본다.

 

버튼을 눌러보면 글이 db에 잘 들어간다.