20230830 _[63일차]_01. Swagger & thymeleaf로 board, login페이지

프로젝트를 다른방법으로 실행해보자

Window - Show View - Other

Gradle Tasks 연다.

 

조금 기다려보면 이렇게 뜬다.

---

그냥 프로젝트를 새로 하나 만들어서 해보자.

어제했던대로 필요한 도구들 넣어준다.

 

aug30 프로젝트 생성완료

패키지 및 컨트롤러도 다시 생성

슬러시 요청에 대해 index.html로 보내고

 

templates 아래에 index.html 도 생성

 

이제 cmd에서 새로만든 프로젝트 아래에 gradlew build 를 실행하면 

 

C:\eGovFrameDev-4.1.0-64bit\workspace\aug30\build\libs 아래에 jar 파일이 생성된다.

java -jar aug30-0.0.1-SNAPSHOT.jar

completed가 뜨더니 실행된다.

이렇게도 실행시킬수 있는데 이게 맞나?

 

주소창에 localhost:8080 검색해보니 된다.

실행방법 두가지를 해본것 같은데 녹화본을 다시 보자.

 

---

스웨거 ( Swagger ) 

- API 문서화 도구

- 적용하기 쉽고 문서 화면에서 API를 바로 테스트할 수 있다.

 

Swagger로 API 문서 자동화를 해보자 (velog.io)

Swagger로 API 문서 자동화를 해보자

 

사용하려면 일단 build.gradle에 의존성 추가해줘야 한다.

아래에서 코드를 가져온다.

 

aug09 프로젝트의 build.gradle에 넣어준다. (문서화 했을때 보여질게 많아서 이 프로젝트에 넣어줬다.)

**  refresh 해주기 **

 

SwaggerConfig 클래스 생성 & 어노테이션 해준다.

@EnableSwagger2 어노테이션 (Swagger2버전 활성화)

import주의**

@Bean 으로 Docket 객체를 bean으로 설정해준단다.

패키지명 다시 com.phyho.web으로 수정해줬다.

버전을 수정해서 바로 실행하면 오류가 난단다.

 

application.properties 에서 스웨거 추가설정 추가

이제 실행시키고 

http://localhost/swagger-ui.html#/index-controller

이 주소로 이동하면 컨트롤러에서 설정해준대로 내 패키지를 읽어온다.

 

명세서 역할이다. 신기하다.

---

다시 aug30으로 가본다.

 

문서화되어 편하게 확인가능

사용했던 모든 메소드 등등 잘 정리되어 있다.

---

구로서버 포트번호를 두개로 나눠주셨다 

나는 바뀐포트번호로 해야한다.  다시 접속하고 비번 바꿔줬다

비밀번호 재설정 쿼리문 => SET PASSWORD FOR 'c23b_00'@'%'=PASSWORD('바꿀비번')

---

aug30 프젝 gradle에 

mariadb랑 mybatis 설정 추가해주고

application에도 설정추가

8080 안뜨게 설정해주고

mariadb 연결해주고

mybatis 도 패키지랑 xml 파일 연결해준다. 

위에 설정넣어준대로 static 폴더 아래에 mapper 폴더 만들고 아래에 boardMapper.xml 파일 생성

.

 

---

이제 컨트롤러, 서비스, DAO를 만들자

 

BoardController 먼저 만들고 (board 요청에 대해 board.html 반환)

서비스도 만들어서 연결

DAO 만들어서 연결

 

컨트롤러에 BoardDTO 타입인  list 생성해준다.

밑줄뜨는 DTO 랑 list() 메소드 만들어준다.

list 메소드 만들고

mapper에서는 쿼리문으로 데이터 가져와준다 (DTO에 담아서 가져올거다.)

mapper에서 가져오려고 적어준 데이터들을 int / String 타입으로 나눠서 DTO에 담아준다. 

 

컨트롤러에서 list로 보낸값을 board.html에서 출력해보면 

타입이 DTO여서 아래처럼 한줄씩 DTO에 담겨있는걸 확인할 수 있다.

 

아래처럼 반복문으로 뽑아내는데

row로 출력하면 현재 요소들이 출력되고 

i로 출력하면 아래처럼 index, count, size가 함께 출력된다.

---

mapper 폴더명이 오타가 나서 데이터를 못불러왔다. 폴더명에도 오타가난다 ㅠㅠ 오타주의

---

 

그리고 application에서 이렇게 설정해줬기 때문에

모든 패키지명에 .web을 추가해줬다.

 

일단 최종적으로 아래처럼 데이터를 뽑아내왔다.

css연결해준다. thymeleaf 문법을 사용해서 연결해줬으니 th를 꼭 써줘야한다!!!

불러온 글제목 옆에 댓글 수를 띄워주고 

제목을 클릭하면 해당 글번호(bno)를 가지고 detail로 이동하도록 onclick 기능추가 & 이동할 주소설정

<td th:onclick="|location.href='@{/detail(bno=${row.bno})}'|"> </td>

|  ~~  |  => 이건 내부의 ~~것들을 하나의 문자열로 인식하도록 넣어준거다.

 

아래의 720번 글제목을 클릭하면

 

bno를 잡아 detail로 이동

 

이제 컨트롤러에 detail로 가는 로직 만든다.

720번 글을 클릭하면 bno를 잘잡아온다.

매개변수로 DTO를 넣어주면 그냥 같은이름을 찾아서 알아서 잡아온다. 신기하다.

아래 @requestParam 방식으로도 잘 잡아온다. (719번 글을 클릭)

 

application에서 thymeleaf 경로설정 추가해준다.

.html도 설정해주면 주소설정할때 안붙여줘도 된다.

이제 .html 은 빼고 이름만 써줘도 된다.

이제 db값 불러와서 띄울 detail.html 페이지 만들어준다.

DTO에 담아서 가져올거다. 그래서 아까는 dto에 안넣어줬던 bcontent도 DTO에 담아줘야 가져올 수 있다.

 

detail.html에 와서 컨트롤러에서 detail로 내보냈던 값을 뽑아내본다.

detail 페이지에서 다시 board페이지(게시판)로 돌아가는 버튼도 추가해줬다.

 

menu.html 만들어준다.

th:fragment="호출이름 지정"

detail.html이랑 menu.html을 연결해준다.  (jsp에서의 include 역할)

 

 

메뉴에 footer 써주고 이걸 모든 다른 html에 연결해줄거다.

일단 detail.html에 연결

일단 board.html에도 연결

---

thymeleaf 문법 자동완성기능 넣어주자

install  눌러서 설치해주고 재부팅하면

th : 까지 썼을 때 자동완성이 뜨다.

---

 

menu.html 정리해준다.

메뉴바 클릭하면 이동할 주소들 설정

---

로그인 로직 만들자.

 

입력값 잡아오는지 확인해보면 잘된다.

 

DTO이용하면

아래형태로 값을 잡아온다.

이제 이 dto를 가지고 login() 메소드를 실행시켜서 

db에 있는 count, 이름, 아이디를 가져오자.

 

쿼리문에서는 from부터 시작해서 where 조건에 따른 변수들을 select 해서 가져온다. (순서중요*)

members 테이블에서 html페이지에서 입력한 id & pw와 일치하는 조건 검사후 

SELECT 절에서 적어준 정보들을 가지고 오는거다.

컨트롤러에서 result값 출력 잘되는지 확인하고  

result값에 따른 조건문 걸어준다

---

Junit = 자바에서 독립된 단위테스트를 지원해주는 프레임워크
단정(assert) 메소드로 테스트 케이스의 수행결과를 판별한다.
Junit4 이후부터는 테스트를 지원 어노테이션을 제공한다. (@Test @Before @After 등)
@Test 메서드가 호출할 때마다 새로운 인스턴스를 생성하여 독립적인 테스트가 이루어지게 한다.

 

 

 

 

 

db에 있는 id가 pyopyopyo / pw가 01234 라면 (정보가 일치한다면)

assertEqals로 단정해준 정보가 맞다면  (위의 계정에 대한 이름이 asdf 라면)

아래처럼 초록색이 뜬다.

만약 정보가 틀렸다면 아래처럼 빨간색이 뜬다.