회원목록조회

 

1.MemberController클래스에서 멤버조회하도록 MemberList.html구문작성

 

사진

 

사진, *변수를 합쳐 단축시켜주는 refactor inline 기능 (ctrl + alt + n)

*타임리프의 장점

-html 태그를 그대로 가져다 사용한다.

-MemberController클래스에서 작성한 List<member>구문에 있는 model에서 members를 담아서 사용한 것을 그대로 

 memberList.html파일로 가져와서 binding이 된다. 그래서 그대로 출력하는 구문만 작성하면 된다.

 

타임리프에서 address?

-null이면 그대로 진행 안한다는 의미

 

마주한 문제(회원목록화면 출력이 안된다.)

에러메세지 발생

-에러메시지만 보았을 때는 이해가 안된다..

가설1

MemberControll클래스에서 return "user/userList"으로 해주어서 출력이 안되었을 것이다.

 

결과- 그대로

 

가설 2

회원이름 입력을 하지 않았을 때에 submit을 누르면

필수항목입니다 메시지가 나오는지 재확인 및 재작동됨을 확인했다.

 

이름을 우리나라말로 바꾸어 보았다. submit이 되고 처음화면으로 redirect가 된다.

처음엔 hello1 로 했었는데. 영어 또는 숫자 입력이 안되게 구문을 작성한 것으로 짐작했지만

h2.database에 들어가니 정보가 입력이 되어 있다.

 

가설 3

회원목록이 나오지 않는다는 것은 못받아 온다는 뜻이라고 가설을 세웠다.

GetMapping(“ members/”)에서 /members로 바꾸어 보았다...

 

결과-동일한 에러

 

가설 4

회원목록이 나오지 return 으로 memberList가 받아 오지 못한다고 가설을 세웠다.

확인해보니 return("members/memberList")로 괄호안에 설정 되어 있었다.

return "member/memberList"; 로 수정완료

 

그래도 에러가 나온다.

 

가설5

다시 회원목록조회 구문을 잠시 주석처리하니,

회원가입시 작성하였던 데이터가 Member 테이블에 잘 나오고 에러도 없다.

 

회원가입 항목을 작성하니 에러가 나오고

member_id를 처음 데이터 작성한 첫행으로 인식을 하여

현재 보유한 데이터가 7개이면 회원가입작성 및 submit후에 에러가 나오고 8번을 새로고침해야 작성한 내용이 데이터베이스에 들어가있음을 확인함.

 

현재 application.yml에서 ddl-auto(초기화옵션)은 create이고,

create는 엔티티자체를 전부 없애고 다시 새로 만들어주는 역할이니 그러한 현상이 발생하는 것으로 짐작하여 update로 변경해주었다.

 

결과-회원가입작성은 잘된다.

 

가설6

-회원목록을 클릭하면 회원가입작성페이지가 나온다.

-home.html 파일에 들어가서 확인을 했다.

<p class="lead">회원 기능</p>

<p>

<a class="btn btn-lg btn-secondary" href="/members/new">회원가입</a>

<a class="btn btn-lg btn-secondary" href="/members/new">회원목록</a>

</p>

로 회원가입과 동일하게 하이퍼텍스트 리퍼런스가 동일하게 되어 있다.

-<a class="btn btn-lg btn-secondary" href="/members">회원목록</a> 으로 수정

 

회원목록출력성공 완료

 

사진

 

권장사항

엔티티를 폼으로 사용하면 화면 종속적 기능이 되어버려서

엔티티가 지저분해지게 된다. 유지보수가 하기 어려워진다.

핵심 로직을 수정하니 화면이 나오지 않는다라는 상황이 발생한다.

엔티티는 순수하게 유지하라는 얘기가 있음.

 

jpa 사용할 때 조심해야 하는 것은 순수하게 간결하게 엔티티를 작성해야 한다.

핵심 비즈니스로직에만 디펜던시가 있도록 작성해야 한다.

그래야 어플리케이션을 만들어도 더 커지지 않는다. 유지보수하기가 좋아진다.

 

엔티티 대신 폼객체나 DTO(Data Transfer Object)권장을 한다.

회원등록할때에는 MemberForm객체를 사용했는데 데이터를 memberList로 보낼 때에는 Member로 보낸다.

 

권장사항2

api를 만들 때에는 엔티티를 절대 외부로 반환하면 안된다. api는 스펙이기 때문이다.

 

예를 들어 패스워드가 그대로 노출(private String userpassword;)될 수도 있고,

엔티티의 로직을 변경했는데 api스펙이 변하게 된다. 그래서 api를 만들 때에는 엔티티를 절대 외부로 반환하면 안된다.

 

사진

스프링과 Thymeleaf

-view 환경 설정하는데 Thymeleaf엔진을 사용할 것이다.

-스프링은 Thymeleaf를 권장하는 편이고,

Thymeleaf도 스프링과 관련된 지원하는 기능들이 많다.

-스프링에서 권장하는 Template Engines

(Apache Freemarker, Mustache, Groovy Templates)

 

Thymeleaf Templates Engine

-웹과 standalone 환경을 위한 modern 서버사이드 자바 템플릿 엔진

*https://www.thymeleaf.org/ Thymeleaf 공식 홈페이지 참고

 

Thymeleaf 의 장점

-마크업을 깨지고 않고 그대로 사용 한다.

-보통 다른 Engine은 웹브라우저에서 열리지 않지만, Thymeleaf는 열린다.

-버전 2에서는 <BR></BR> 태그를 달아주는 스타일로 매칭해주지 않으면 에러가 났었지만

현재 버전 3.0에서는 <BR>작성해도 에러가 발생하지 않는다.

 

Thymeleaf 의 단점

-아직 그래도 불편한점이 있기 때문에 매뉴얼을 참고하면서 개발을 해야 한다.

 

 

스프링 

-스프링 공식 가이드

https://spring.io/guides/

-스프링 관련하여 개념이 혼란스러울 때에는 공식 가이드에서 검색을 통해

개념을 익히면 좋다.

*Serving Web Content with Spring MVC 검색을 해서 나와 있는 가이드 대로

따라해보면 좋다.

-스프링부트 매뉴얼 : 에러핸들링이나 기능이용시 궁금한점들을 공부할 수 있다.

https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-developing-web-applications.html#boot-features-spring-mvc-template-engines

 

Thymeleaf Template Engine을 위해 세팅해야 할 것은?

-스프링부트에서는 하기의 것을 이미 설치함으로,

자동으로 모든 세팅이 전부 되어 있으므로 오직 개발만 하면 된다.

org.springframework.boot:spring-boot-starter-thymeleaf

 

실습

스프링 부트 thymeleaf viewName 매핑

설명

-@Controller를 해줌으로써 annotation은 달아주어야 한다.

-@GetMapping(“hello”)라는 url로 오면 controller가 호출된다라는 뜻

-스프링 ui에 있는 Modelmodel에다가 어떤 데이터를 실어서 controller에서

  view로 데이터를 보낼 수 있다.

-attributeName"data"라는 키의 값(attributeValue)hello로 넘긴다.

-returnhello는 화면이름이다.

 spring initializer가 만들어 놓은 resources 안에 templates->new->file

 view name용으로 hello.html 생성한다.

 hello.html 파일생성후 추후 보이지 않아도 return hello.html 형태로 변환한다.

-return hello결과가 화면렌더링 할 때에 hello.html 화면으로 이동한다.

 

Thymeleaf 템플릿엔진 동작 확인(hello.html)

설명

-<html>xmlns:th(네임스페이스)"http://www.thymeleaf.org" 주었다.

-<p th:text${data}로 아까 hello라고 적어 두었던 데이터가 넘어온다.

  데이터(hello) 렌더링 된 것이 >안녕하세요. 손님</p>로 넘어간다.

 

 

내부경로를 인터넷주소칸에 입력해서 hello.html에 접속 및 소스코드확인

설명

-다른 template engine이면 if절부터 들어가는 것이 많은데

 thymeleaf template engine은 간결한 코드구성으로 화면렌더링이 가능하다.

 

 

서버사이드 렌더링=스프링부트메인실행

 

-스프링부트가 내장톰캣을 가지고 실행시킨다.

 

#마주한문제

hello.html 화면이 위에처럼 나와야 하는데 처음에는 나오지 않아 무엇이 문제인지 확인했다.

해본 것들

1. cmd창에서 실행한 프로세스를 taskkill /f /pid 프로세스넘버를 통해 종료

   ->실행 안됨

2. hello.html에서 복붙 없이 직접 작성해서 넣었기 때문에 확인해 보았더니

   두 번째 라인에 <html 안에 “ / ” 가 있어서 삭제하고

  <html xmlns:th="http://www.thymeleaf.org"> 로 수정

   -> 실행안됨..

3.서버사이드렌더링하는 스프링부트메인파일과 Hello.Controller파일이 같은 폴더내에 있는지 확인했더니, test폴더안에    있었다..

  스프링부트메인파일이 있는 jpabook.jpashop으로 Hello.Controller파일을 이동

->화면이 보인다.

해결!!!

 

 

어떻게 데이터 hellohello.html에 찾아가는건가?

화면렌더링 경로

 

>HelloController

attributeName인 데이터의 attributeValuehellohello.html에 있는 ${data}로 넘어간다.이때 찾아서 가는 요인은 HelloControllerreturn hello이 화면렌더링 할 때에 hello.html로 화면이 넘어가도록 한다.

 

서버사이드템플릿엔진이 내장톰캣 실행시킬 때에

스프링부트 thymeleaf viewName 매핑을 하기처럼 해주어서

resources:templates/ +{ViewName}+ .html

데이터 hellohello.html을 최종적으로 찾아갈 수 있게 된다.

 

 

127.0.0.1:8080 메인 화면에 정적화면 구현해보기

resources->static->file만들기->index.html 파일생성

*resource 폴더에 파일이 생성되었기 때문에 기본적으로 서버를 다시 실행시켜주어야 한다.

설명

href 가 데이터 hello로 넘어가는 하이퍼링크 역할을 한다.

*127.0.0.1:8080/hello에서 hello@GetMapping(“hello")url hello 역할을 한다.

 

 

devtools 라이브러리 역할

-html화면을 수정해야 할 일이 많은데 그때 마다 서버를 리스타트 하면 힘드니

 spring-boot-devtools 라이브러리를 추가한다.

-이 라이브러리가 cache제거와 reloading을 되게 해주는 역할을 한다.

 *build.gradle->dependencies->spring-boot-devtools추가->reimport

 

devtools추가후 다시 서버리스타트하면 restartedMain이라고 뜬다.

 

 

devtools와 recompiler를 이용한 수정화면

#마주한 문제 2

devtools 라이브러리가 설치되었다는 restartedmain 화면이 안보여서

계속 찾아보았더니.. spring-boot-starter-devtools로 되어 있었다.

spring-boot-devtools로 수정하고 reimport, 서버restart를 하니 작동이 된다.

 

 

View환경설정 끝!!!

+ Recent posts